Selecting d3 data subset based on column

Question

How do I adapt the code below from http://bl.ocks.org/mbostock/3884955 to select specific columns?

var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.temperature); });

d3.tsv("data.tsv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

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

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

  });

In the data being used in the example above, there are 4 columns: dates and 3 columns for temperature in 3 cities. In my use case, i have 10 columns: dates and 3 variables per city for 3 cities i.e. (1 + [3 * 3]). I would like to load the entire data set (for use in tooltips), but only want to chart one of the variables per city which is in column index # 1, 4 and 7. How do I do this? (see rough syntax below).

var cities = color.domain().map(function(name) {
  return {
    name: name,
    values: data.map(function(d) {
      return {date: d.date, maxTemperature: *+d[arrays in column index 1, 4 and 7]*};
    })
    values2: data.map(function(d) {
      return {date: d.date, minTemperature: *+d[arrays in column index 2, 5 and 8]*};
    })
    values3: data.map(function(d) {
      return {date: d.date, avgTemperature: *+d[arrays in column index 3, 8 and 9]*};
    })
  };
});

Solution 1

I was able to solve it by adding filter key conditions to exlude the other data categories i don't want to chart. In the example i used above, i had a min, max and avg temp per city and wanted to grab only the avg temperatures. I added filters excluding column headers with strings that included "max" or "min" like so.

color.domain(d3.keys(data[0]).filter(function(key) 
    { return key !== "date" && key.indexOf("max") == -1 && 
    key.indexOf("min") == -1; });

I don't necessarily know what the full column name is, but in my use case, the different variables are always tagged with max, min or avg which makes this a workable solution for me, but probably not for someone with totally unknown column headers. I had initially wanted to select columns based on index #, but this works just fine.

Solution 2

You shouldn't need to make any changes to the existing code. The way cities is set up only requires you to give a meaningful name to the data you need and then reference that later. So you would have something like

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

d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.first; }); });

Note that the actual names of course depend on what's in your data.

Solution 3

This worked for me in terms of selecting columns:

d3.csv("data.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) {
    return key == "avg" || key == "additional_columns"; 
  });
});

Comments

[WittyID]

I would start off by apologizing for my lack of depth with javascript but i'm not clear on how the code above solves the problem. Are the use of "first:" and "second:" user-defined names or d3 keywords? How does the code above pick particular columns based on their index # without me knowing their names? Also, since i'm trying to call multiple columns at once, how do i replace v.first (for example) with something that calls first, second, fourth etc. This selective multi-column data call would be what i also use to define the y-axis of chart lines (see edit in question).

[Lars Kotthoff]

The names are user-defined. You need to know the column name if you're using this technique, otherwise you can use d3.tsv.parseRows(). If you want to use multiple values to determine the limits, simply put them into an array and use d3.min (or max).