How to access JSON data with D3.js?

Question

I have an external JSON file structured like so:

{
 data: [
       {
        0: 'cat',
        1: 232,
        2: 45
       },
       {
        0: 'dog',
        1: 21,
        2: 9
       },
       {
        0: 'lion',
        1: 32,
        2: 5
       },
       {
        0: 'elephant',
        1: 9,
        2: 4
       },
       ]
}

Using d3.js I want to access the data with key 2 for the height in a bar chart, so I have set this up:

d3.select('#chart').append('svg')
    .selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('width', barWidth)
    .attr('height', function(d) {
        return d.data['2'];
    });

I can see the SVG canvas but I can't get the rectangles for the bar chart height, any ideas anyone?

Thanks

Millie Smith · Accepted Answer · 2015-03-15 18:28:47Z

1

I changed a few things to make the code function how a default bar chart would. Your main problem was using d.data instead of d. After that, you have to set the x and y coordinates and an alternating color (or a padding with x) so that the rectangles don't overlap each other.

var width = 30;
var padding = 5;
var chartheight = 100;
d3.select('#chart').append('svg')
  .selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('width', width)
  .attr('height', function(d) {
    return d[2];
  })
  .attr('x', function(d, i) {
    return i*(width + padding);
  })
  .attr('y', function(d, i) {
    return chartheight - d[2];
  });

d3.selectAll('rect')
  .style('fill', function(d, i) {
    return i % 2 == 0 ? "#0f0" : "#00f";
  });

edited Mar 15, 2015 at 18:28

answered Mar 15, 2015 at 14:55

Millie Smith

4,6142 gold badges28 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

eladcon · Accepted Answer · 2015-03-15 13:41:41Z

0

The d variable sent to your function is already your data, and its called for each item in your array:

.attr('height', function(d) {
    return d['2'];
});

answered Mar 15, 2015 at 13:41

eladcon

5,8251 gold badge18 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to access JSON data with D3.js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related