How do I adapt the code below from 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]*};
    })
  };
});

How do I adapt the code below from http://bl.ocks/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]*};
    })
  };
});

• javascript
• d3.js

3 Answers 3

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.

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.

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"; 
  });
});