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: turquoise;
}

g.two rect {
  fill: teal;
}

JavaScript

h = 400;
w = 500;
rect_h = 100;
rect_w = 50;

data = [{
  'class': 'one',
  'value': '0',
  'data': 100
}, {
  'class': 'two',
  'value': '100',
  'data': 200
}];

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) {
    return 'translate(' + d.value + ',0)';
  })
  .attr('class', function(d) {
    return d.class
  })

gs.append('rect')
  .attr('x', (w / 2 - rect_w / 2))
  .attr('y', function(d) {
    return h - d.data;
  })
  .attr('height', function(d) {
    return d.data;
  })
  .attr('width', rect_w);