While learning graph algorithms and canvas HTML element it stuck me that i should have a small graph library of my own in javascript which shows the graphs using canvas element can you point me in right direction so as i can read some code[js/python] as on how to display the graphs and write my own little lib.
PS : i mean edges and Node grapth not the bars and pie charts.
There are quite a few ways to display graphs using various layout algorithms. Two of the primary ones are a Force-Directed layout algorithm, which can be a continuous layout algorithm using a push-pull principle. Next is the GEM layout algorithm which uses a rudimentary physics approach to determine the best "fit".
Here are some examples:
http://vis.stanford.edu/protovis/ex/force.html
bitbucket.org/bwalenz/algorithms/src/
Protovis has probably the most functional. The bitbucket link is an implementation of the GEM algorithm but with no visualization. It just lays out the nodes/edges.
Not really using canvas, but quite a good JS solution for graphs: Raphael Charting plugin
The good thing about Raphael is that it works in all browsers, IE included.
Great lib, for graphics in canvas: processing.js:
http://processingjs.org/
this is a graphic library, that allows you to write build amazing visualization using simple javascript code. have a look.
Related
The problem: Looking for quite some time for a js graph library to create a directed graph (e.g. using dagre layout), with the constrain of non-overlapping edges.
Steps until now
Started with cytoscape.js but as it seems, such a feature doesn't exist.
Continued on with an svg based solution (considering that all elements are in the DOM), d3.js using the dagre-d3, but still the information in the DOM is the path route.
Objective
Find a way to detect edge overlapping, either canvas or svg based.
Create a custom layout to respect this constrain. Will use this as a metric for my convergence algorithm.
Graphical Representation
Below a graphical representation of the objective.
I want to detect that edges 0>1 and 2>3 are overlapping.
Any ideas, thoughts are welcome.
If there is something wrong with my logic, corrections/suggestions are more than welcome.
Finding edge crossings (line intersections) is a fairly simple bit of geometry which is explained here --> https://stackoverflow.com/a/18234609/368214
But then minimising such edge crossings in a graph (zero edge crossings are only possible in planar graphs) is one of the great research challenges of graph layout - https://cs.stackexchange.com/questions/14901/how-to-reduce-the-number-of-crossing-edges-in-a-diagram
Some graph layouts for specific graph types like DAGS such as Sugiyama aim to reduce crossings and similar cytoscape layouts are available at yfiles if that helps (i.e. the hierarchic layout) --> http://apps.cytoscape.org/apps/yfileslayoutalgorithms
I work on a database collecting archaeological sites. A goal of our project is to make the data accessible on the web. I would like to plot them on a GeoTIFF to show their distribution and change over time. I further want to calculate Delaunay triangulations and a heatmap which you could display as an overlay. Its important to me to visualize the change over time as an animation. I choose p5.js/processing because I'm not a very skilled programmer (some R, NetLogo and Processsing). i think it will fit the task especially regarding the animation. Before I get into more detail my first question is:
Is this a wise choice of tools? Would you recommend other tools?
If you think my choice is vital here is my second question:
I came across Daniel Shiffmans tutorial on visualizing earthquake data in p5.js and this comes close to what I would do:
https://www.youtube.com/watch?v=ZiYdOwOrGyc
The code is here:
https://github.com/CodingTrain/Rainbow-Code/blob/master/CodingChallenges/CC_57_Earthquake_Viz/sketch.js
In the above example he relies on mapbox.js. I would prefer to use a custom build GeoTiff from our project and avoid mapbox since its not 100% free. But how do I get his code to work with a custom GeoTiff as basemap? I can set his variables "clon" and "clat" to my custom Tiff center point but the coordinates did not get transformed right. I think the Problem is the in the zoom level aka "zoom". But how to determine the Zoom for my custom map? I did not find any other implementation of web mercator projection in p5.js nor processing. Or do i get the math beyond projection wrong?
I'm not very proficient with p5.js, but I have a good experience using d3.js for various dataviz tasks, including crunching geodata. So my suggestion would be to use best of both worlds — use p5.js for rendering and d3.js for data manipulation. In your case, it seems like you will need a simple reprojection (LonLat to Mercator).
To reiterate:
Use d3.js to project data from whatever projection it is (LonLat) into projection that p5.js is using (Mercator)
Render projected data in p5.js
Quick googling landed me this guide on d3 + p5 integration
On the d3 side, there is an API documentation
And here is a good example of GeoTIFF reading/rendering in d3.js. Ok, here is one more.
I would like to know if there is a good JS framework to convert an area map into a plottable one.
For example, if I have a map like this which identifies parkinglots with numbers, I want to identify the occupied lots with red color and vacant lots with other color.
What would be the best framework to achieve this. I saw D3.js but it has too much learning curve and we need to hard-code fixed points on an svg area. I'm looking for a quick alternative which could be a wrapper library of D3.js similar to what nvd3 is for charts
You might want to take a look at http://processingjs.org/ -- it is NOT a wrapper around D3, but it's designed to be easy to use.
(FWIW, I stopped using processing.js once I discovered D3 -- I like D3's flexibility despite the steeper learning curve.)
This post might be useful: https://forum.processing.org/one/topic/interactive-svg-map-with-processing-js.html
I am evaluating to change the graphics I generated so far using highcharts.js to d3.js
just for fun and I want to learn how d3.js works.
I wonder if there is something similar to the url below (see if you click on a pie it gives you new data), something dynamic and ready to use (or not to implement from zero).
What I wanna achieve, more or less...
http://lully.snv.jussieu.fr/gbif/mapping/graphs/examples/pie-legend.htm
thanks in advance
Pere
If you want to replace Highcharts, I think the only good open-source alternative available at the moment is Bob Monteverde's Novus charts library: http://novus.github.com/nvd3/. NVD3 has a nice pie chart and also has good legends. Take a look at all the charts from this library and you will see what I mean. You can also find a good pie chart in Stephen Boak's tutorial: http://blog.stephenboak.com/2011/08/07/easy-as-a-pie.html. Another interesting option is to look for Frank Guerino's questions on the D3 js google group. I would use NVD3 if I were you. It might need some adjustments, but it seems to be the best option currently. Good luck!
Simple function to generate Pie Charts utilisiing d3.js. This function is part of the http://xhprof.io/ project. It is able to handle datasets of arbitrary size. It has several options that allow for customisation, such as the label margin, circle radius and visibility of the percentage data (refer to the source code).
The demo is available at https://dev.anuary.com/858b33b7-bd66-507b-a9f1-533e4de79ba3/. The source code is available at https://github.com/gajus/pie-chart.
I've an application that based on some values from different inputs (temperature, humidity...), show different charts.So far I've done that with JpGraph, and I found it pretty easy to do. You can add a legend easily, and plot as many functions as you want. You can also fix the scale easily. Regardless of that, I would like to have some interactivity with the user (I just want that one the user clicks on a point of the graph, the X and Y value are shown). That is not easy to do with JpGraph because it is just a PNG image.
I was recommended to use Raphael JS library, and I've been reading to the documentation (Raphael JS Reference), but I don't see that what I want to do (line charts) is that simple.
So, I am asking, to both Jpgraph users and Raphael JS users if they had had experience with this, and if there is any good tutorial online (I have not able to find one that works with line charts). The kind of graphs I'm drawing now are like this: JpGraph Example
Some other options:
D3.js (SVG)
JSXGraph (SVG and VML for IE)
Protovis (SVG)
There is a chart plugin for Raphael. It supports line charts. The documentation is certainly lacking - but there is always the source.
Answering myself. After doing some research, I found this one pretty interesting for doing line charts:Grafico