How to Make an Interactive Map of Geographic Paths

With latitude and longitude coordinates, there are a number of ways to map geographic data using D3.js and Leaflet.

This tutorial shows several ways of visualizing geographic point data using JavaScript. You’ll visualize the data in a web browser using JavaScript libraries D3 and Leaflet and learn how to:

  • Visualize all the point data
  • Visualize the running routes by joining the points
  • Use opacity to get a sense of the most popular routes
  • Animate the points along the routes
  • Show the routes on a interactive map

To access this full tutorial and download the source code you must be a member. (If you are already a member, log in here.)


Gain instant access to step-by-step visualization courses and tutorials for insight and presentation — all while supporting an independent site. Source code and data is included so that you can more easily apply what you learn in your own work.

Members also recieve a weekly newsletter, The Process, which looks more closely at the tools, the rules, and the guidelines and how they work in practice.

See samples of everything you gain access to:

About the Author

Peter Cook is a freelance data designer and developer. He's also the author of D3 in Depth and Frontend Charts. You can find him on Twitter @animateddata and his personal site, Animated Data.