Using an associative array as data for D3

Question

I have a very simple D3 example that first reads data into an associative array, then displays it in a bar graph.

I can't seem to get anything to display using this method though. Instead, I have to insert a task in between: Read the data into an associative array, copy that data into a simple array, then display the bar graph using the simple array.

chart.selectAll("div")
     .data(genreAssociative)
     .enter().append("div")
     .style("width", function(d) { return d * 10 + "px"; })
     .text(function(d) { return d; });

The above does not work.

genreSimple = [];
for (var genre in genreAssociative) genreSimple.push(genreAssociative[genre]);         
chart.selectAll("div")
     .data(genreSimple)
     .enter().append("div")
     .style("width", function(d) { return d * 10 + "px"; })
     .text(function(d) { return d; });

The above does; using a simple array as an intermediary. Is there a special way to iterate over an associative array instead of a standard array?

it appears from the included information that the chart.data function does not accept a javascript object (aka "associative array"). If this is the case, then you have no choice but to convert to an Array. — jbabey, Mar 06 '12 at 18:43
They are not called associative arrays in JavaScript. I tend to get hung up on this terminology because usually the people who day associative array will declare it as an array, like PHP. — Ruan Mendes, Dec 19 '15 at 00:06

score 32 · Accepted Answer · answered Mar 06 '12 at 18:39

32

You can use the functions d3.values or d3.entries to work directly with associative arrays. You simply need to take it into account in the functions that set attributes (e.g. function(d) { return d.value; }).

answered Mar 06 '12 at 18:39

Lars Kotthoff

107,425
16
204
204

1

This solution didn't completely work but it pointed me in the right direction. By replacing ".data(genreAssociative)" with ".data(d3.values(genreAssociative))" I was able to get data displaying correctly, though unfortunately this loses key information (so I can't display the key as text, for example). – Malcolm Crum Mar 06 '12 at 19:42
2

Did you try using `.data(d3.entries(genreAssociative))`? – Lars Kotthoff Mar 06 '12 at 19:51
Yes, but then I have access to the keys and not the values. In my bar graph I want the values for the bar length, and the keys for the labels. – Malcolm Crum Mar 06 '12 at 20:06
8

`d3.entries()` returns an array where each element has a `key` and a `value` member. You should be able to get both keys and values that way. – Lars Kotthoff Mar 06 '12 at 20:08
That's it! Thanks very much! That'll teach me to read the documentation closer next time. – Malcolm Crum Mar 06 '12 at 20:11

score 2 · Answer 2 · edited Dec 19 '15 at 00:01

I found that in order for bar chart generation to work well, the following format works best. It's based on the the D3 post-parsed CSV format.

var dataSet1 = [
  {xCoordinate: "Legend String 1", magnitude: 54, link: "http://www.if4it.com"},
  {xCoordinate: "Legend String 2", magnitude: 21, link: "http://www.if4it.com/glossary.html"},
  {xCoordinate: "Legend String 3", magnitude: 31, link: "http://www.if4it.com/resources.html"},
  {xCoordinate: "Legend String 4", magnitude: 14, link: "http://www.if4it.com/taxonomy.html"},
  {xCoordinate: "Legend String 5", magnitude: 19, link: "http://www.if4it.com/disciplines.html"},
  {xCoordinate: "Legend String 6", magnitude: 47, link: "http://www.if4it.com"},
  {xCoordinate: "Legend String 7", magnitude: 27, link: "http://www.if4it.com/glossary.html"}];

The format allows for the correlation of coordinates, magnitudes, legends and html links to each other.

A working example can be found at: http://bl.ocks.org/2164562.

Using an associative array as data for D3

2 Answers2

Linked