d3 multi-series line chart using a grouping variable and d3.nest?

[Nate]

Hi all,

I often have data that is in what some call "long" format rather than in "wide" format. For example, if we look at the data for the Multi-Series Line Chart example, http://bl.ocks.org/mbostock/3884955 there is a column for date and then each different data series ("City") is given a separate column. This is wide format. Instead, I often I have data where I would have a column labeled DATE, a column labeled CITY (with "New York", "San Francisco", and "Austin") and a column labeled TEMP. This is often a convenient way to store the data its easy to manipulate and group data for analyses using the "city" column. 

Can someone illustrate the simplest means of changing the Multi-Series Line Chart code to that it would retain the same structure, but so that it could use data in the "long" format rather than the "wide" format that the current example uses. I think this entails loading the data using d3.tsv and then using d3.nest in order to nest the temperatures within the cities, but each time I have modified the example code to incorporate this nesting I've been unsuccessful. 

For ease, I have formatted the example data from the d3 Multi-Series Line Chart into the long format and posted it here as a .tsv.    https://gist.github.com/natemiller/8a3becb4c020ae900068

Thanks so much. I imagine others use this same data format and having multi-series example using it would be really useful to compare with the original to learn the different ways of manipulating/nesting data in d3.

Thank you,

Nate

[Chris Viau]

Can you not use d3.transpose for pivoting your data between long and wide?

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Nathan Miller]

Hi Chris,

I think its possible to use d3.transpose, though I've only just looked it it. 

One issue I do have in a dataset I'm currently working on (not the Multi-series example) is that while I do have three columns (Date-Time, Location, Temperature, in long format) not all temperatures were measured at exactly the same Date-Time, so putting them in wide format where they share a common Date-Time won't work without having to include a lot of missing data. Thus, I'd like to plot directly from the long format. By which I mean use the long format data as an input and presumably nest Date-Time and Temperature within Location. I neglected to include these details in the previous question, but was trying to keep it a bit more simple, figuring I would figure out the details for my specific instance once I had an example to build from.

Thanks,

Nate

[Nathan Miller]

Figured I'd add this to the mix. This post (below) captures to some extent what I am going for, but neither the posted code nor the jsfiddle work so its hard to build upon them. The post does utilize the d3.nest and clearly builds upon the Multi-series example, but I think a section in missing as "values" is not specified. 

http://stackoverflow.com/questions/12993906/how-to-create-a-multi-series-line-chart-with-series-for-each-unique-item-in-1st 

Thank you for assistance,

Nate

[Nathan Miller]

Hi all,

So I figured out a way to use the long format data using d3.nest. The plot and code are here http://bl.ocks.org/natemiller/20f9bd99d1795e3a0b1c

Its not 100% there. The color selection is not what it should be from d3.scale.category10() and I haven't worked out how to add the labels as they are on the original plot, but it works.

Nate

[Nate]

Hi folks,

The original d3 example of a Multi-Series Line Chart utilizes the variable "name", which then allows one to specify labels and colors by "name". In my example above (http://bl.ocks.org/natemiller/20f9bd99d1795e3a0b1c) I have explored how to make the same plot if the data were in a different (long) format, because often my own data is in this format. In my example, I nested the temperature data within city, but the method in which I did this left me without a "name" variable, so that I had to instead plot lines and colors using the "key". This works, however, as I've played with it more its not ideal  as I can't use "d.key" in the same way as I can "d.name" to apply the appropriate colors, or to specify labels (as in the d3 example) or a legend, such as with https://gist.github.com/ZJONSSON/3918369. 

I think this problem arises from my incomplete understanding of this section of code (below) and how it might be modified for the dataset I present above (where data from each city is not in a separate column).

Would someone be willing explain in greater detail what this section of code is doing? I'll try to describe how I think it works and you can see where my mistakes are. As I see it, this section is using a function that takes a "name" value and returns an object containing that name and an associated date and temperature (though I'm not perfectly clear on what exactly the +d[name] portion should be translated into words). Then the objects with a common name are mapped to a particular color and the color/data combination is placed in the variable cities. 

var cities = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {date: d.date, temperature: +d[name]};
      })
    };
  });

Can a similar type of code be used for the long format data shown in my example? How can I map the city name to the corresponding date and temperature when in "long" format? Can you add city labels to my example above?

I'll point out that while in this example dataset, all temperature measurements for each city is recorded at the same date/time, typically my datasets consist of measurements from several sites, but not at exactly the same date/time. Thus the data really must be stored and accessed in a "long" format, unless I were to include NAs or (nulls) in regions where measurements from different sites did not share a common date/time.

I'm still new to using d3 and Javascript and so have been mostly building upon and modify existing code to accomplish my visualization goals. I've learned a lot in the past month, but at times, like now, I'm not sure if the existing code can be modified to accomplish what I would like or if something new is needed. I appreciate any constructive advice.

Thank you,

Nate 

[Sukhjeet Singh]

Can i have example for

http://blockbuilder.org/d3noob/9edcd7a67e9ec8c8d24d20f3a47e8879

Without using the file only i need to use is the local array 

Please help