JSFiddle - React, Tailwind, and code Playground

by Laurie Skelly

HTML

<div id="div1"></div>
<div id="div2"></div>

CSS

rect {
    fill:#fff;
    border-style: solid;
    stroke-width: 2px;
}

JavaScript

var svgh = 150;
var svgw = 400;
var rh = 100;
var rw = 100;

var svg1 = d3.select('#div1').append('svg')
    .attr('width', svgw)
    .attr('height', svgh)
var svg2 = d3.select('#div2').append('svg')
    .attr('width', svgw)
    .attr('height', svgh)

svg1.append('rect').attr('x',0).attr('y',0)
    .attr('width',svgw).attr('height',svgh)
    .style('stroke','blue')

svg2.append('rect').attr('x',0).attr('y',0)
    .attr('width',svgw).attr('height',svgh)
    .style('stroke','red')    


var d1 = [];
for (i=0;i<5;i++){
    d1.push({
        'cat':i,
        'val':(i+1)*3
    })
}

var d2 = [];
for (i=0;i<5;i++){
    d2.push({
        'cat':i,
        'val':(i+1)*3
    })
}