by Roman Plevka

Visualizing HERE routing API times using D3.js

In this post I’d like to show you how to visualize traffic situation on a route over various times in a week with HERE routing API.

So first of all, we need some decent API for getting the route which would include traffic data in the route calculation. I chose to use HERE routing API so I registered a new app called ‘test‘. In order to get a suitable data structure, I created a rather simple Python script, which fetches the route with departure time as a changing variable. As I would like to get hourly information for all 7 days a week, it sends 168 requests. Mind, that in order to keep things simple, I only take the first (fastest) route in the returned list. This means, that the route times do not necessarily belong to the same route. I’m only interested in a single attribute in the response: response.route[0].summary.trafficTime . I’ll output the information as JSON which will look like this:


Python Script

Okay, here’s the python script.



Now for the actual visualization. I chose the ‘heatmap’ chart style despite the fact, that I’m not constructing an actual histogram here.

That should be it. You can review and fork the code from my pen. Feel free to play with the code!