JSFiddle - React, Tailwind, and code Playground

by Douglas Duhaime

HTML

<body>
<div class='container' style='width:1200px'>
</div>
</body>

CSS

<style>
 
svg {
  font: 10px sans-serif;
}
 
rect {
  fill: #ddd;
}
 
circle {
  fill-opacity: .5;
  fill: #f00;
}
 
.axis path, .axis line {
  fill: none;
  stroke: #fff;
  shape-rendering: crispEdges;
}
 
</style>

JavaScript

width = 600
height = 600
padding = {left:40, top:20, right:20, bottom:30}
size = {
    x: width - padding.left - padding.right,
    y: height - padding.top - padding.bottom
}
var svg = d3.select('.container').append('div')
    .append("svg")
    .attr("width", 300)
    .attr("height", height)
    .attr('class', 'frame')
    .append("g")
    .attr("transform", "translate(" + padding.left + "," + 
          padding.top + ")")



svg.append('rect')
    .attr('class', 'background')
    .attr('pointer-events', 'all')
    .attr('fill', 'none')
    .attr('height', size.y + 'px')
    .attr('width', size.x + 'px')


var d = [5,6,7,8,9,10,11,12]

var x = d3.scale.ordinal()
      .domain(d3.range(d.length))
      .rangeRoundBands([0, size.x], .15)

var y = d3.scale.linear()
            .domain([0,d3.max(d)])
            .range([size.y, 0])

var xax = d3.svg.axis().scale(x)
            .tickSize(-size.y).orient('bottom')

var yax = d3.svg.axis().scale(y)
            .tickSize(-size.x).orient('left')

svg.append("g")
    .attr("class", "y axis")
    .call(yax)

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + size.y+ ")")
    .call(xax)
var svg1 = svg.append('svg')
    .attr('height', size.y + 'px')
    .attr('width', size.x + 'px')
svg1.append('g').attr('class', 'rects')

function update(){

    var rects = d3.select('.rects').selectAll('rect')
                    .data(d)

    rects.attr('x', function(d,i) { return x(i)})
        .attr('width', x.rangeBand())
        .attr('y',  function(d) { return y(d)})
        .attr('height', function(d) { return size.y - y(d)})

    rects.enter().append('rect')
        .attr('x', function(d,i) { return x(i) })
        .attr('width', x.rangeBand())
        .attr('y',  function(d) { return y(d)})
        .attr('height', function(d) { return size.y - y(d)})
        .style('fill', 'orange')
    svg.select('.y.axis')
        .call(yax)
    svg.select('.x.axis')
        .call(xax)
   ...