JSFiddle - React, Tailwind, and code Playground

by Anna Hazard

HTML

<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>

<div id="chart"></div>

JavaScript

var root = d3.select('#chart').append('svg')
    .attr('width', 600)
    .attr('height', 600)
    .style('border', '1px solid black');
    
var data = [
  {a:  -5, b:  -5, c: 150, d: 195, e: '#eef2d1'},
  {a: 555, b: 520, c:  55, d:  90, e: '#d49800'},
  {a:  -5, b: 200, c: 150, d: 230, e: '#eef2d1'},
  {a: 155, b:  -5, c: 450, d: 435, e: '#731000'},
  {a: 155, b: 435, c: 395, d: 175, e: '#eef2d1'},
  {a: 555, b: 435, c:  55, d:  80, e: '#eef2d1'},
  {a:  -5, b: 435, c: 150, d: 175, e: '#0b183b'},
];
// Data from http://code.hazzens.com/d3tut/lesson_1.html

/*
var rects = root.selectAll('rect').data(data);

rects.enter()
  .append('rect')
  .attr('x', function(d) { return d.a; })
  .attr('y', function(d) { return d.b; })
  .attr('width', function(d) { return d.c; })
  .attr('height', function(d) { return d.d; })
  .attr('fill', function(d) { return d.e; })
  .attr('stroke-width', 10)
  .attr('stroke', 'black');
*/