JSFiddle - React, Tailwind, and code Playground

by nancynancy

HTML

<html>

  <head>
    <meta name="viewport" content="width=device-width">
  </head>

  <body>
    <main>
      <div id="figure">
      </div>
    </main>
  </body>

</html>

CSS

#figure {
  height: 100vh;
}

JavaScript

// using d3 for convenience
var main = d3.select('main')
var chartDiv = document.getElementById("figure")
var width = chartDiv.clientWidth;
var height = chartDiv.clientHeight;
console.log(width);
console.log(height);

var margin = {
  top: 50,
  bottom: 50,
  left: 50,
  right: 50
};

var colors = ["maroon", "beige", "pink", "navy", "url(#seal)"]
var data = {
  name: "root",
  children: [{
      name: "Jenny",
      size: 20
    },
    {
      name: "Carly",
      size: 30
    },
    {
      name: "Deborah",
      size: 50
    },
    {
      name: "Princess",
      size: 50
    },
    {
      name: "Moose",
      size: 40
    }
  ]
};

var g = d3.select('#figure')
  .append("svg")
  .attr("height", height)
  .attr("width", width)

var bluesquare = g.append("rect")
  .attr("id", "bluesquare")
  .attr("height", height * .9)
  .attr("width", width * .9)
  .attr("fill", "lightblue")
  .attr("opacity", 0.8)
  .attr("transform", "translate(50, 50)")


var makeGraph = function() {
  width = chartDiv.clientWidth;
  height = chartDiv.clientHeight;

  g.selectAll("circle").remove()
  g.selectAll("#bluesquare").remove()

  bluesquare
    .attr("height", height * .9)
    .attr("width", width * .9)

  g.append("rect")
    .attr("id", "bluesquare")
    .attr("height", height * .9)
    .attr("width", width * .9)
    .attr("fill", "lightblue")
    .attr("opacity", 0.8)

  var simulation = d3.forceSimulation(data.children)
    .force("x", d3.forceX(0.4 * width))
    .force("y", d3.forceY(0.5 * height))
    .force("collide", d3.forceCollide(function(d) {
      return d.size + 2
    }))
    .stop();

  for (var i = 0; i < 30; ++i) simulation.tick();

  var defs = g.append('svg:defs');

  defs.append("svg:pattern")
    .attr("id", "seal")
    .attr("width", 270)
    .attr("height", 270)
    .attr("patternUnits", "userSpaceOnUse")
    .append("svg:image")
    .attr("xlink:href",
      'https://peopledotcom.files.wordpress.com/2018/04/20180329marmalade6.jpg')
    .attr("width", 270)
 ...