JSFiddle - React, Tailwind, and code Playground

by Jim G

HTML

<script src="http://d3js.org/d3.v3.js"></script>
<!DOCTYPE html>

  <body>

    <h3>Build Duration by Stream</h3>

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

  </body>

CSS

body {
  font-size: 16px;
  font-family: "Calibri";
}

.tick-font {
  font-size: 13px;
}

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

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

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

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

.overlay {
  fill: none;
  pointer-events: all;
}

.focus circle {
  fill: none;
  stoke: black;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

JavaScript

var main_margin = {top: 20, right: 80, bottom: 100, left: 40},
    mini_margin = {top: 430, right: 80, bottom: 20, left: 40},
    main_width = 1300 - main_margin.left - main_margin.right,
    main_height = 500 - main_margin.top - main_margin.bottom,
    mini_height = 500 - mini_margin.top - mini_margin.bottom;


d3.json('data.json', function(data) {

  data.result.forEach(function(d) {
      d.date = new Date(d._id.year, d._id.month-1, d._id.day);
  });


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


  // Setup X axis
  main_x = d3.time.scale()
      .domain(d3.extent(data.result, function(d) { return d.date; }))
      .range([0, main_width-275]);

  var mini_x = d3.time.scale()
      .domain(d3.extent(data.result, function(d) { return d.date; }))
      .range([0, main_width-275]);

  var main_xAxis = d3.svg.axis()
      .scale(main_x)
      .ticks(d3.time.day, 1)
      .orient("bottom");

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


  // Setup Y axis
  var main_y = d3.scale.linear()
      .domain(d3.extent(data.result, function(d) { return (d.buildDuration / 1000) / 60 ; }))
      .range([main_height, 0]);

  var mini_y = d3.scale.linear()
      .domain(d3.extent(data.result, function(d) { return (d.buildDuration / 1000) / 60 ; }))
      .range([mini_height, 0]);

  var main_yAxis = d3.svg.axis()
      .scale(main_y)
      .orient("left");


  // Create brush for mini graph
  var brush = d3.svg.brush()
      .x(mini_x)
      .on("brush", brushed);


  // flatten out the data
  var nested = d3.nest().key(function(d) { return d._id.stream; })
      .entries(data.result);


  var main_line = d3.svg.line()
      .interpolate("cardinal")
      .x(function(d) { return main_x(d.date); })
      .y(function(d) { return main_y((d.buildDuration / 1000) / 60 ); });

  var mini_line = d3.svg.line()
      .interpolate("cardinal")
      .x(function(d) { return mini_x(d.date); })
     ...