javascript framework for plot maps - javascript

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

Related

Utilizing p5.js/processing for data visualization on a GeoTIFF? How to plot Lon/Lat coordinates in web mercator?

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.

D3.js scattergraph with large (>500,000) points? Clustering?

I'm looking at plotting a scatterplot with a large number of points (500,000 and upwards).
Currently, we're doing this in Python with Matplotlib. It plots the points, and it provides controls to pan and zoom. I don't believe it provides any clustering or points, it just plots them all - doesn't make much sense at the zoomed out view, I suppose, but you can zoom in and they're all there.
I was looking at doing the chart in JavaScript, to make it a bit easier to distribute. I was looking at D3.js, to see if something similar is feasible there. I did find this example of a basic scatterplot:
http://bl.ocks.org/mbostock/3887118
Firstly, would you be able to plot that number of points? (500,000 and upwards) I was under the impression you couldn't due to the overhead of all the DOM objects? Are there ways around this?
Secondly, is there any kind of clustering available, either a library or even just an example of this being done in D3.js?
Thirdly, if anybody knows any good examples of pan/zoom functionality and clustering, or even just a packaged JS library that handles it, that would be awesome.
Fourth, it would be also nice to have click handlers for each point - and to display some text either in a overlay, or even just in a separate window. Any thoughts on this?
Can you draw half a million points with D3? Sure, but not with SVG. You'll have to use canvas (here's a simple example with 10,000 points that includes brush-based selection: http://bl.ocks.org/emeeks/306e64e0d687a4374bcd) and that means that you no longer have individual elements to assign click handlers to. You will not be able to render half a million points with SVG, because all those DOM elements will choke your interface, as you mentioned.
D3 does include quadtree support that can be leveraged for clustering. It's in use in the above example to speed up search but you could use it to nest elements in proximity at certain scales.
Ultimately, your choices are:
1) Some other library/custom implementation that renders in canvas and polls the mouse position to give you the data element rendered at that point.
2) A sophisticated custom D3 approach that nests elements in proximity and only renders SVG elements appropriate at the zoom level and canvas position (pan) you're at.
Yes, D3.js can be made to work with million scale data with two things:
pre-rendering on the server side. For more see here: https://mango-is.com/blog/engineering/pre-render-d3-js-charts-at-server-side/
By aggregating (or clustering) part of the data so that user can interact and expand the graph if need be. For this use collapsible nodes if you can (http://bl.ocks.org/mbostock/1062288).
Also avoid using force layout. It takes time to settle and converge to a stable positioning.
For clustering libraries, I would pick one up off the shelf. I would choose the scikits library from python, there are many in JavaScript but they are not very robust as they mostly cover k-means or hierarchical clustering. I would precalculate the coordinates using scikits by clustering and then render it using D3.
D3 handles Pan and zoom. Again click handlers and text display are available in D3. (http://bl.ocks.org/robschmuecker/7880033)

ready to use dynamic pie chart in d3.js

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.

Draw line charts. Moving from JpGraph to Raphael JS

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

how to display graphs using canvas element

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.

Categories