JSFiddle - React, Tailwind, and code Playground

by Andy Bulka

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>

JavaScript

const data = {
  className: 'Person',
  attributes: [
    { name: 'name', type: 'string' },
    { name: 'age', type: 'integer' },
    { name: 'countriesVisited', type: 'array', values: ['USA', 'Canada', 'Australia'] }
  ]
};

const svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height", 300);

const g = svg.append("g")
  .attr("transform", "translate(50, 20)");

// Draw the class
g.append("rect")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", 150)
  .attr("height", 100)
  .attr("fill", "lightblue");

g.append("text")
  .text(data.className)
  .attr("x", 75)
  .attr("y", 20)
  .attr("text-anchor", "middle");

// Draw the attributes
data.attributes.forEach((attr, i) => {
  g.append("text")
    .text(`${attr.name}: ${attr.type}`)
    .attr("x", 10)
    .attr("y", 40 + i * 20);
});

// Draw the array
g.append("rect")
  .attr("x", 200)
  .attr("y", 0)
  .attr("width", 100)
  .attr("height", 100)
  .attr("fill", "lightgreen");

g.append("text")
  .text("Array")
  .attr("x", 250)
  .attr("y", 20)
  .attr("text-anchor", "middle");

data.attributes[2].values.forEach((value, i) => {
  g.append("text")
    .text(value)
    .attr("x", 210)
    .attr("y", 40 + i * 20);
});

// Draw a line connecting the class and the array
g.append("line")
  .attr("x1", 150)
  .attr("y1", 70)
  .attr("x2", 200)
  .attr("y2", 70)
  .attr("stroke", "black");