Question

I’ve checked the various tutorials, and can’t find my use case covered.

Here is a subset of my dataset, in the form of CSV:

Provider,Service date,Unique patients seen
10800,2007-12-03,1
10800,2008-03-21,9
10800,2008-04-16,3
10800,2008-04-18,6
11451,2008-06-27,24
11451,2008-07-10,1
11451,2008-07-14,31
11451,2008-07-15,6
12980,2008-06-17,24
12980,2008-06-27,14
12980,2008-06-28,24
13907,2008-05-04,23
13907,2008-05-05,20
13907,2008-05-08,6
14618,2008-08-27,27
14618,2008-09-04,21
14618,2008-09-05,20

What I would like is for there to be a series for each unique provider, with that series having its X axis as the service date, and Y axis as patients seen.

So far, I’ve looked at the multi-series line chart tutorial, but I can’t convince it to use the data I have instead of columns as it does now.

Any advice or readings?

tarek : )

Answer 1

You can see a working example at http://jsfiddle.net/YHW6H/1/.

I did the following to coerce your data a bit. You’ll want to use d3.csv to read in your csv file, but I hard coded the values for the example.

// you would use d3.csv('filename.csv', function (data) {...})
// in order to populate the data variable, I'm just hard coding it here

var data = [
    {Provider:'10800', 'Service Date': '2007-12-03', 'Unique patients seen':'1'},
    {Provider:'10800', 'Service Date': '2008-03-21', 'Unique patients seen':'9'},
    {Provider:'10800', 'Service Date': '2008-04-16', 'Unique patients seen':'3'},
    {Provider:'10800', 'Service Date': '2008-04-18', 'Unique patients seen':'6'},
    {Provider:'11451', 'Service Date': '2008-06-27', 'Unique patients seen':'24'},
    {Provider:'11451', 'Service Date': '2008-07-10', 'Unique patients seen':'1'},
    {Provider:'11451', 'Service Date': '2008-07-14', 'Unique patients seen':'31'},
    {Provider:'11451', 'Service Date': '2008-07-15', 'Unique patients seen':'6'},
    {Provider:'12980', 'Service Date': '2008-06-17', 'Unique patients seen':'24'},
    {Provider:'12980', 'Service Date': '2008-06-27', 'Unique patients seen':'14'},
    {Provider:'12980', 'Service Date': '2008-06-28', 'Unique patients seen':'24'},
    {Provider:'13907', 'Service Date': '2008-05-04', 'Unique patients seen':'23'},
    {Provider:'13907', 'Service Date': '2008-05-05', 'Unique patients seen':'20'},
    {Provider:'13907', 'Service Date': '2008-05-08', 'Unique patients seen':'6'},
    {Provider:'14618', 'Service Date': '2008-08-27', 'Unique patients seen':'27'},
    {Provider:'14618', 'Service Date': '2008-09-04', 'Unique patients seen':'21'},
    {Provider:'14618', 'Service Date': '2008-09-05', 'Unique patients seen':'20'}    
];

// first we need to coerce the data into the right formats and make the
// names a little more sane
data = data.map( function (d) { 
    return { 
      provider: +d.Provider,   // the + sign will coerce strings to number values
      date: new Date(d['Service Date']),
      patients: +d['Unique patients seen'] }; 
});   

// then we need to nest the data on Provider since we want to only draw one
// line per provider
data = d3.nest().key(function(d) { return d.provider; }).entries(data);

Unfortunately the data you provided wasn’t that interesting to graph since the providers didn’t really overlap. Once you get all your data loaded it should look nicer 🙂