Changing D3.js input format from .csv to an array of dates

Question

I'm trying to implement a d3.js histogram on my website which is getting the data from a solr response. On my research I discovered Mike Bostock who's offering great D3 solutions. One of it is the "Histogram II" which would fit perfectly for my needs. The problem is that it (and all other comparable solutions I found) comes with a .csv as data source. I would like to use an array as data source but failed as I tried to change the input.

Can you please give me a tip which lines have to be changed to use the following array, which is currently based on Mike Bostocks .csv:

my_data = [
    {"id": "10097071", "case": "HY285524", "date": "06/02/2015 09:41:19 PM"},
    {"id": "21907", "case": "HY291065", "date": "06/07/2015 03:50:00 AM"}
  ]

Thanks in advance.

Edit: Gerados questions is gone. He asked if I'm parsing the dates. @GerardoFurtado I avoided to fully copy Mike Bostocks code. If Iinterpret it correctly the dates get parsed by "d3.timeParse("%m/%d/ ...)" in his solution. I'm struggeling with his line 'd3.csv("homicides.csv", type, function(error, data)' where I'm not able to say "use the array instead". — Alexander
– Alexander, Commented Apr 9, 2017 at 12:50
I deleted my comment because I thought it was obvious that you were parsing the dates. Now I see you aren't parsing the dates: that parseDate variable simply defines the specifier. In Bostock's code, the dates are being parsed in the accessor (row) function. However, there is no accessor function if you're using a variable to store the data. That being said, you have to use a forEach or something similar. — Gerardo Furtado
– Gerardo Furtado, Commented Apr 9, 2017 at 13:14

Gerardo Furtado · Accepted Answer · 2017-04-09 13:27:20Z

2

In Bostock's original code, the date strings are being parsed by the type function, called by d3.csv as a row function:

function type(d) {
    d.date = parseDate(d.date);
    return d;
}

Since you plan to use an variable to hold your data array and get rid of d3.csv completely, you'll have to parse the date strings some other way. For instance, you can use a forEach:

data.forEach(function(d){
  d.date = parseDate(d.date)
})

Here is the demo, I just modified Bostock's code for using an array instead of a CSV file: https://bl.ocks.org/anonymous/bb0d820fbca8fbdf0f8827b0edbcbd44. Look at the forEach after the data array.

answered Apr 9, 2017 at 13:27

Gerardo Furtado

102k9 gold badges128 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexander Over a year ago

You are awesome, thank you! :) For a test I copy-pasted it and it works fine. Of course I will reconstruct your solution to get a deeper understanding.

Collectives™ on Stack Overflow

Changing D3.js input format from .csv to an array of dates

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related