JSFiddle - React, Tailwind, and code Playground

by Laurie Skelly

HTML

<div id='viz_container'>

</div>

CSS

svg {
  border: 1px solid gray;
  margin: 10px;
}
g.g1 rect {
  stroke: gray;
  fill: teal;
}
g.g2 rect {
  stroke: gray;
  fill: turquoise;
}

.g1 {
  
  
}

JavaScript

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

var data = [200,400];

var svg = d3.select('#viz_container')
  .append('svg')
  .attr('height', h)
  .attr('width', w)
  
var g1 = svg.append('g')
	.attr('class','g1')
  
var g2 = svg.append('g')
	.attr('class','g2') 
  .attr('transform','translate(75,0)')


g1.append('rect')
	.attr('width', bar_w)
	.attr('height', bar_h)
  .attr('x', bar_gap)
  .attr('y', h-bar_h)
  
g2.append('rect')
	.attr('width', bar_w)
	.attr('height', bar_h)
  .attr('x', bar_gap)
  .attr('y', h-bar_h)