Organizing data for grouped bar chart

Question

still quite new to d3.js but I'm trying to work off Mike Bostock's example of a grouped bar chart here: http://bl.ocks.org/mbostock/3887051

The issue is that my data is sorted differently compared to the example CSV and I'm having trouble making it work.

Sample of example CSV:

CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496
TX,2027307,3277946,1420518,2454721,7017731,5656528,2472223
NY,1208495,2141490,1058031,1999120,5355235,5120254,2607672

Sample of my CSV:

Year, Sex, Cause, Value
1979,Males,Colorectal cancer,20378
1980,Males,Colorectal cancer,20065
1981,Males,Colorectal cancer,20908
1979,Females,Colorectal cancer,19178
1980,Females,Colorectal cancer,18100
1981,Females,Colorectal cancer,17650

In the example CSV, all the data for each group of bars is sorted into one row of values. Whereas for my CSV, they're not organized neatly into one line.

I'm trying to group the values for Male and Female under each Cause and sorted by Year like so: https://i.sstatic.net/pU15l.jpg

If anyone could explain to me how I should work with this data in making a group bar chart it'd be greatly appreciated.

saaj · Accepted Answer

var valueKeys = ['MALE', 'FEMALE'];

var data = d3.csv.parse(csv)
  .map(function(v)
  {
    d3.keys(v).forEach(function(k)
    {
      if(k != 'CAUSE')
      {
        v[k] = Number(v[k]);
      }
    });
    return v;
  })
  .filter(function(v)
  {
    return v['YEAR'] == 1979;
  })
  .map(function(v)
  {
    // convert data for plotting groups
    v['values'] = valueKeys.map(function(k)
    {
      return {
        'name'  : k,
        'value' : v[k]
      };
    });
    return v;
  });

var margin = {
  'top'    : 20, 
  'right'  : 80, 
  'bottom' : 30, 
  'left'   : 150
};
var width  = 600 - margin['left'] - margin['right'];
var height = 400 - margin['top']  - margin['bottom'];

var y0 = d3.scale.ordinal().rangeRoundBands([0, height], 0.1);
y0.domain(data.map(function(v) 
{ 
  return v['CAUSE']; 
}));

var y1 = d3.scale.ordinal();
y1.domain(valueKeys).rangeRoundBands([0, y0.rangeBand()]);

var x = d3.scale.linear().range([0, width]);
x.domain([0, d3.max(data, function(v) 
{ 
  return d3.max(valueKeys.map(function(k)
  {
    return v[k];
  })); 
})]);

var color = d3.scale.category10();

var yAxis = d3.svg.axis()
  .scale(y0)  
  .orient('left');

var svg = d3.select('#chart').append('svg')
  .attr("width", width + margin['left'] + margin['right'])
  .attr("height", height + margin['top'] + margin['bottom'])
  .append('g')
  .attr('transform', 'translate(' + margin['left'] + ',' + margin['top'] + ')');

svg.append('g')
  .attr('class', 'y axis')
  .call(yAxis);

var cause = svg.selectAll('.cause')
  .data(data)
  .enter()
  .append('g')
  .attr('class', 'g')
  .attr('transform', function(v) 
  { 
    return 'translate(0,' + y0(v['CAUSE']) + ')'; 
  });

cause.selectAll('rect')
  .data(function(v) 
  { 
    return v['values'];
  })
  .enter()
  .append('rect')
  .attr('height', y1.rangeBand())
  .attr('x', 6)
  .attr('y', function(d) 
  { 
    return y1(d['name']); 
  })
  .attr('width', function(d) 
  { 
    return x(d['value']); 
  })
  .style('fill', function(d) 
  { 
    return color(d['name']); 
  });

cause.selectAll('text')
  .data(function(v) 
  { 
    return v['values'];
  })
  .enter()
  .append('text')  
  .attr("x", function(d) { return x(d['value']) + 10; })
  .attr("y", function(d)
  {
    return y1(d['name']) + y1.rangeBand() / 2;
  })
  .attr("dy", ".35em")
  .attr('fill', '#000')
  .text(function(d) { return d['value']; });

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

Organizing data for grouped bar chart

Answers (1)

Related Questions