rect4

by Laurie Skelly

HTML

<div id="svg_container"></div>

CSS

#svg_container {
  margin: 10px;
}

svg {
  border: 1px solid gray;
}

g rect {
  fill: none;
  stroke: gray;
}

g.one rect {
  fill: tomato;
}

g.two rect {
  fill: dodgerblue;
}

JavaScript

h = 400;
w = 500;
bar_w = 50;
bar_gap = 25;
bar_h = 100;


data = [{
  'class': 'one',
  'values': [100, 200, 300]
}, {
  'class': 'two',
  'values': [350, 250, 150]
}];

var svg =
  d3.select("#svg_container")
  .append("svg")
  .attr("id", "svg")
  .attr('height', h)
  .attr('width', w);

var gs = svg.selectAll('g')
  .data(data)
  .enter().append('g')
  .attr('transform', function(d,i) {
    trans = bar_gap + i*(bar_gap + bar_w); 
    return 'translate(' + trans + ',0)';
  })
  .attr('class', function(d) {
    return d.class
  });

var rects = gs.selectAll('rect')
	.data(function(d){return d.values})
	.enter().append('rect')
  .attr('x', function(d,i){
  	return 2*i*(bar_gap+bar_w);
  })
  .attr('y', function(d) {
    return h - d;
  })
  .attr('height', function(d) {
    return d;
  })
  .attr('width', bar_w);