JSFiddle - React, Tailwind, and code Playground

by angjelinhila

HTML

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<style>
#my_dataviz {        width: 100vw;        height: 100vh;        display: flex;        align-items: center;    }

</style>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>

// create the svg area
var svg = d3.select("#my_dataviz")
  .append("svg").attr("viewBox", `0 0 1000 900`)
    .attr("width", 900)
    .attr("height", 1000)
  .append("g")
  .style('transform', 'translate(50%, 50%)')
   // .attr("transform", "translate(" + width / 2 +" , " + height / 2 + ")");

// create a matrix
var matrix = [
...