JSFiddle - React, Tailwind, and code Playground

by rolfsf

HTML

<a href="#" id="update1">set1</a>
<a href="#" id="update2">set2</a>

<div id="overview-graph"></div>

CSS

.chart-bg{fill:#f8f8f8;stroke:#dfdfdf}
.range{fill:#CCC;shape-rendering:geometricPrecision}
.measure{fill:#a7c573;shape-rendering:geometricPrecision}
.marker{stroke:#666;stroke-width:1px;shape-rendering:geometricPrecision}
.value{font-size:0.75em;font-weight:300;fill:#58702f}

JavaScript

var set1 = [
 
            {"title": "Set-1", "count": 17, "measures": [10, 13, 16, 14]},
            {"title": "Set-2", "count": 23, "measures": [12, 18, 19, 23]},
            {"title": "Set-3", "count": 25, "measures": [19, 22, 23, 20]},
            {"title": "Set-4", "count": 4, "measures": [4, 4, 4, 4]},
            {"title": "Set-5", "count": 8, "measures": [5, 7, 8, 6]}
];

var set2 = [
 
            {"title": "Set-1", "count": 12, "measures": [6, 2, 10, 10]},
            {"title": "Set-2", "count": 29, "measures": [20, 10, 3, 28]},
            {"title": "Set-3", "count": 8, "measures": [5, 2, 3, 8]},
            {"title": "Set-4", "count": 8, "measures": [3, 4, 2, 4]},
            {"title": "Set-5", "count": 8, "measures": [2, 7, 5, 6]}
];


d3.selectAll("a")
  .on("click",function() { 
      if(this.id === "update1"){
          updateChart(set1);
      }else{ updateChart(set2)}
                                   
  });

function updateChart(data){
    d3  .select('#overview-graph')
        .datum(data)
        .call(relativeCompletionChart()
    //options
    );
}

updateChart(set1);

function relativeCompletionChart() {
    var width = 1200,
        margin = {top: 16, right: 16, bottom: 16, left: 16},
        onSetMouseOver = null,
        onSetClick = null;

    function chart(selection) {
        selection.each(function(data) {
            
            var titleColWidth = 0.3*width,
                setHeight = 24,
                barHeight = 22,
                setCount = data.length,
                colCount = data[0].measures.length,
                colWidth = (width - titleColWidth)/colCount,
                rangeWidth = colWidth - 4,
                height = ((setHeight * setCount) + margin.top + margin.bottom);
            

            var svg = d3.select(this).selectAll("svg")
                         .data([data]);

            var svgEnter = svg.enter().append("svg")
                        .attr("width", width)
                       ...