Graph visualization

antonsdavis's picture

Hi all,

I am a total newbie to quartz composer. Basically i wanted to read signals from the input port and plot the signal in the form of a rising graph where the axes remain constant. Although i have searched a lot, i am unable to find a simple graph data visualization in QC. I explored ACPlotter but it doesnt serve the purpose.. it just show an infinitely moving graph (axes not static). Cant i plot a simple graph within a predefined max and min for x axis? Please help out.. I am really stuck! Thanks (By the way, although core plot looked promising, i couldnt figure out how to use that library/ plugin in my QC application)

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

usefuldesign.au's picture
Re: Graph visualization

Not sure what style of graph you want to draw.

If its a basic (X,Y) plot of points and/or lines all you need to do is make a structure of elements with each element defined as having "X" and "Y" keys each paired with a value. You can make the structure with a Javascript patch or Kineme Structure Tools Plugin inside QC or make it outside QC and import structure as a XML file.

Make sure it has the right 'structure' though (sorry can't think of a more descriptive word). It's a set of elements. Each element has two or three co-ordinates (2D or 3D). See specific compositions to understand better the syntax. This site is dripping in comps using point structures. Eg:

http://kineme.net/forum/Discussion/Programming/timelinestructure#comment...

QC uses normalised co-ordinates for positioning points, lines, sprites and anything else. So origin is centre of window at (0,0,0) and camera (where your view comes from) is (0,0,somewhere between 1 and 2 I think – not important at this stage) in the (X,Y,Z) axis. Left edge of screen is at (-1,0), right edge is at (1,0) – always.

http://tinyurl.com/yzlhm6x for further explanation in Apples user docs. In fact if your new to QC read the whole doc.

So if you have data values <> than [-1,1] you either normalise the data (easiest) or use a 3D transform patch to shift your plotted data further away from camera so that perspective rendering brings the whole data field into view.

To plot you can use Kineme GL Tools Point Structure Patch & Line Structure Patch. Or you can place a Sprite inside an iterator and sample the data from your structure for each instance based on the iterator index value. That allows you to use an image for each point rather than just a point.

You can also use the Queue patch to generate a point data structure from event based values as the composition is running.

dust's picture
Re: Graph visualization

there are lots of ways to graph data in quartz composer, essentially thats what you are doing when you are creating a composition. that is graphing out your node connections as QC relies heavily on what is refereed to as the graph foundation. surprisingly there is no documentation of the actual graph foundation framework but and someone can correct me if im wrong but the graph foundation seems to be a core data model of these frameworks...

OpenCL.framework, JavaScriptCore.framework QTKit.framework, Foundation.framework, AppKit.framework , QuartzCore.framework, OpenGL.framework, Accelerate.framework, IOKit.framework, CoreServices.framework, CoreFoundation.framework, ApplicationServices.framework, and the CoreVideo.framework

or quartz Composer is dependent upon these frameworks, GF seems to be really the UI of QC as in the patch browser and editor are inherently GF and or how the nodes are managed and traversed seem to be GF everything else is QC.

i suppose that is not what your looking for. although keeping with the same GF core data model you can create a new quartz composer application in x-code but make sure to check off "core data" then name your project and navigate to the folder. inside that folder you will find a QC file called chart i think. anyways this is an example of how to bind core data nodes to a QC file that visualizes the node data in a graph format. you may have all ready found this file ? its basically a bar graph representation of your node tree graph data.

actually this is really how qc works as in your data model values are stored in an XML file which then is used to graph one to many type of connections by key and or predicates. although this all may seem complicated it is really ment to simplify the processes of visualizing complex systems.

in short your answer is entirely dependent upon the actual type of graph you want to build but you could plot a structure of gl points and have them connected by lines for instance.

antonsdavis's picture
Re: Graph visualization

Thanks for the reply guys! :-) i definitely see some direction now. Anyways as both of you concluded i can implement it by interfacing the whole thing through structures and i will definitely give it a shot. However i am genuinely surprised that we dont have any patch defined that simply takes an input signal and plots it in the form of a graph, as a continuous function of time(t=0 to t=n where n is the number of seconds that can be defined by the user). Also, maybe the graph could be tweaked to look attractive too!

usefuldesign.au's picture
Re: Graph visualization

QC is a development tool so the emphasis is one extensibility and flexibility not one size fits all solutions.

It takes a while to get into it, esp for us non-programmers but once you get the hang all things QC you'll appreciate the open ended nature of it. After all there are hundreds of types of graphs for data and quadrillions of ways to visualise it. Happy noodling!

antonsdavis's picture
Re: Graph visualization

Hi, Thanks a lot for the tip and i am catching up. I created a y value from a signal and generated x value from stopwatch and combined them into a structure using javascript. I tried passing the structure to Kineme GLScale which plots it. However it continuously refreshes the graph and i am unable to create a continuos line graph using the point plots. ANy heads up?

smokris's picture
Re: Graph visualization

Please post the composition --- otherwise it's kinda difficult to tell what's going on.

antonsdavis's picture
Re: Graph visualization

As you can see from the file, i am trying to read a signal, make it cumulative, and then plot it on a graph, well atleast thats the intention. However the point appear by itself without forming a continuous graph and i am not able to scale the axes of the graph to make it look bigger :-(

PreviewAttachmentSize
input_signal_reader.qtz23.72 KB

antonsdavis's picture
Re: Graph visualization

Hello all,

i am still stuck at this. If anyone could give me some hints on how to plot a continuous graph, dynamically with respect to time

Thanks a lot..

dust's picture
Re: Graph visualization

i can't really tell what kind of graph your trying to make from the example but the reason your not seeing anything in your patch is because the y value is way off the screen. you can always open the music visualizer template to get bar graph of the audio spectrum. here i made a simple point line graph type of thing that might help you. its queuing up mouse coordinates and plotting them. you can make the queue bigger if you want its set to graph 200 points and you have to click the mouse to see. you can certainly graph any continuos stream of numbers this way. maybe provide a link of the type of graph your trying to make ? have a look at this file maybe this will help. the qc screen x is -1 to 1 with 0 in the middle and is varying with y depending on aspect ratio etc.. just make sure your points are in that range and you will see them.

PreviewAttachmentSize
linePointGraph.qtz9.95 KB

antonsdavis's picture
Re: Graph visualization

Hey thanks a lot for that. But i am still confused. My aim is simple- construct a normal curve which read the input signal every second. So as soon as the program launches x =0, y=0 x =1, y=0.02 x =2, y = 0.38 etc

Here x is the time in seconds and y is the cumulative value of the signal being read. I want to simply plot this in the form of a rising curve for one whole hour. at the end of 1 hour i should be able to see during what time the signal was high and during what time the signal was low. Hope the problem is very clear now. Any good suggestions?

dust's picture
Re: Graph visualization

here is a simple sinusoidal curve graphed over time. this displays a point for every second and stops after 1 hour. i think in order to visualize the data you might want to use time in min ? hope this helps but yeah i have a better understanding of what you want now. i actually think it would be best to queue up a structure of time values X and signals Y then once the hour is complete iterate and visualize your graph. this example isn't using any input signal im just multiplying time by .02 to give you a graph of incremental units in a curve. you may want to use the gl structure point patch to graph points as well. the problem with a literal 1 to 1 mapping of signal values is that you have to keep x and y within the bounds of the screen. so in this example im printing the values next to the point because the literal value of each point in QC screen space differs from the plot data.

PreviewAttachmentSize
sinusoidalGraph.qtz8.23 KB