I'm trying to build a web application to visualize a GPS track (polyline on a base map) together with other information (e.g. speed) which is on the same time base as the lat/lng coordinates. In another word the data columns are typically: [timestamps, latitude, longitude, speed].

Using these data columns as an example, on the page I'd like to have two subplots: a line module to show speed over timestamp and a map module to show the track - a polyline of (latitude, longitude) points.

For the interactive part, when the mouse is hovering over the line chart, a highlighted point should appear at the corresponding point on the track in the map chart. Vice versa, when the mouse is hovering over the map chart, a highlighted point should appear in the line chart, showing the speed value of that particular point.

I'm very new to JavaScript and has just learned enough to make the two types of charts separately (as in the screen shot). Then I realized that for the interaction to work, it's probably better to use one charting library instead of the two I've chosen (dygraphs and LeafLet). So the question is: is there one charting library that can do the job? Screenshot

I've looked at the examples from plotly.js and d3.js (which plotly is based upon) and didn't find any existing example that matches my expectations very well. Somehow I feel they may be the right choice but I'd then need some advice/guidance about which modules in the libraries is relevant to my use case so that I don't have to learn everything.

If there're other choices I'd like to hear too.

Some other requirements:

  1. License - the library should be free for commercial use
  2. Performance - the library should be able to handle typically tens of thousands to hundreds of thousands rows of data points
  3. Documentation - preferably the library is still under active development and has good documentation resources

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.