Question

I have a php script that echoes a large JSON array. This is a very small part of it:

{
"BR_RioDeJaneiro": [
    {
        "timeRange": "12:00:00 AM-12:19:59 AM",
        "average": "4.3653"
    },
    {
        "timeRange": "12:20:00 AM-12:39:59 AM",
        "average": "4.5386"
    }
]
}

The time range actually goes up to 11:50:00 AM-11:59:59 PM. I want the timeRange to be the domain and the average to be the range. I would like to create a line chart that visualizes the averages during each time range. I know there’s a d3.json() function that can be used to get the json data but I’m having a hard time understanding how you can set up the domain, range and create the visualization. Thanks.

Answer 1

This tutorial does much of what you’re asking how to do:

http://www.recursion.org/d3-for-mere-mortals/

It builds a path-based line graph made up of dates and values.

In your case, you’ll need to do some work to convert the string date ranges into real Dates that you can use to plot.

Also, just a note, if the time ranges are consecutive (i.e. each starts when the last ended), you don’t need to care about the end dates.