JSFiddle - React, Tailwind, and code Playground

by Jim G

HTML

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

CSS

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

.main_stream {
  fill: none;
  stroke-width: 2px;
}

.mini_stream {
  fill: none;
  stroke-width: 1px;
}

JavaScript

function multiLineChart() {
    var main_margin = {top: 20, right: 80, bottom: 100, left: 40},
        mini_margin = {top: 460, right: 80, bottom: 20, left: 40},
        main_width = 1300 - main_margin.left - main_margin.right,
        main_height = 525 - main_margin.top - main_margin.bottom,
        mini_height = 525 - mini_margin.top - mini_margin.bottom;

    // Define line colors
    var color = d3.scale.category20();

    // These are the x and y dimensions supplied by the calling chart
    var xValue, yValue;

    // The label for the Y axis
    var yLabel = "Duration";

    // The dimension key
    var dimKey;

    // Setup X time scale
    var main_x = d3.time.scale()
        .range([0, main_width-275]);

    var mini_x = d3.time.scale()
        .range([0, main_width-275]);

    var main_xAxis = d3.svg.axis()
        .scale(main_x)
        .ticks(10)
        .orient("bottom");

    var mini_xAxis = d3.svg.axis()
      .scale(mini_x)
      .ticks(d3.time.day, 2)
      .orient("bottom");

    // Setup Y axis
    var main_y = d3.scale.linear()
        .range([main_height, 0]);

    var mini_y = d3.scale.linear()
        .range([mini_height, 0]);

    var main_yAxis = d3.svg.axis()
        .scale(main_y)
        .tickFormat(function(d) { return d3.round((d / 1000 / 60 / 60), 0); } )
        .orient("left");

    // Define main svg element in #graph
    var svg = d3.select("#graph").append("svg")
        .attr("width", main_width + main_margin.left + main_margin.right)
        .attr("height", main_height + main_margin.top + main_margin.bottom);

    svg.append("defs").append("clipPath")
        .attr("id", "clip")
      .append("rect")
        .attr("width", main_width-275)
        .attr("height", main_height);

    var main = svg.append("g")
        .attr("transform", "translate(" + main_margin.left + "," + main_margin.top + ")")
        .attr("id", "main");

    var mini = svg.append("g")
        .attr("transform", "translate(" + mini_margin.left + "," +...