Question

I have a data variable which contains the following:

  [Object { score="2.8",  word="Blue"}, Object { score="2.8",  word="Red"}, Object { score="3.9",  word="Green"}]

I’m interested in modifying a piece of a D3 graph http://bl.ocks.org/3887051 to display the legend, which would be the list of the “word”, for my data set.

The legend script looks like this (from link above):

var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });

var legend = svg.selectAll(".legend")
  .data(ageNames.slice().reverse())
.enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", color);

legend.append("text")
  .attr("x", width - 24)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "end")
  .text(function(d) { return d; });

How do I modify their ageNames function to display the “word” set from my data? I’m not sure how they’re utilizing the d3.keys. Is there another way to do it?

Answer 1

This should work more or less, but you may need to reverse() (as the original example does) or otherwise rearrange the elements of words, in order to correctly map a word to the right color. Depends on how you’ve implemented your graph.

var words = yourDataArray.map(function(entry) { return entry.word; });

var legend = svg.selectAll(".legend")
  .data(words)
// The rest stays the same