JSFiddle - React, Tailwind, and code Playground

by torresomar

HTML

<script src="https://d3js.org/d3-selection.v1.min.js"></script>
    <div id="grouped-bar" class="grouped-bar">
    </div>

JavaScript

// Define the SVG dimensions.
const margin = {
  top: 25,
  right: 75,
  bottom: 25,
  left: 25
}
const height = 310;
const width = 650;
// Use the select library to transform the DOM by selecting our node and appending a new SVG one with certain modifications
const svg = d3.select('#grouped-bar') // Using the id of the div in our html template
    .append('svg')
    .attr('class', 'grouped-bars-svg')
    .attr('height', height)
    .attr('width', width)
    .style('background', '#fff');