JSFiddle - React, Tailwind, and code Playground

by LONGSHENG ZHOU

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<body>
    <div id = "myChart">
    <!-- d3 chart is here -->
    </div>
</body>

<script>
var data = [{"Uhrzeit":"06:02","Durchschn":"0","Anz":"0","Gesamt":"0"},{"Uhrzeit":"06:03","Durchschn":"3","Anz":"38","Gesamt":"118"},{"Uhrzeit":"06:04","Durchschn":"1","Anz":"107","Gesamt":"186"}];
    
var main_margin = {top: 20, right: 80, bottom: 100, left: 40},
    mini_margin = {top: 430, right: 80, bottom: 20, left: 40},
    main_height = 500 - main_margin.top - main_margin.bottom,
    mini_height = 500 - mini_margin.top - mini_margin.bottom;
    
var main_width = parseInt(d3.select('#myChart').style('width'), 10);
main_width = main_width - main_margin.left - main_margin.right;

var formatDate = d3.time.format("%H:%M"),
    parseDate = formatDate.parse,
    bisectDate = d3.bisector(function(d) { return d.Uhrzeit; }).left,
    formatOutput0 = function(d) { return formatDate(d.Uhrzeit) + " - " + d.Durchschn + " ms"; },
    formatOutput1 = function(d) { return formatDate(d.Uhrzeit) + " - " + d.Anz; };

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

var main_y0 = d3.scale.sqrt()
    .range([main_height, 0]),
    main_y1 = d3.scale.sqrt()
    .range([main_height, 0]),
    mini_y0 = d3.scale.sqrt()
    .range([mini_height, 0]),
    mini_y1 = d3.scale.sqrt()
    .range([mini_height, 0]);

var main_xAxis = d3.svg.axis()
    .scale(main_x)
    .tickFormat(d3.time.format("%H:%M"))
    .orient("bottom"),
    
    mini_xAxis = d3.svg.axis()
    .scale(mini_x)
    .tickFormat(d3.time.format("%H:%M"))
    .orient("bottom");

var main_yAxisLeft = d3.svg.axis()
    .scale(main_y0)
    .orient("left");
    main_yAxisRight = d3.svg.axis()
    .scale(main_y1)
    .orient("right");

var brush = d3.svg.brush()
    .x(mini_x)
    .on("brush", brush);

var main_line0 = d3.svg.line()
    .x(function(d) { return...

CSS

body {
  font: 10px sans-serif;
}

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

.line {
  stroke: black;
  fill: none;
  stroke-width: 0.75px;
}

.line.line0 {
  stroke: steelblue;
}

.line.line1 {
  stroke: indianred;
}

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

.focus circle {
  fill: none;
}

.focus circle.y0 {
  stroke: blue;
}

.focus circle.y1 {
  stroke: red;
}

.focus line {
  stroke: purple;
  shape-rendering: crispEdges;
}

.focus line.y0 {
  stroke: steelblue;
  stroke-dasharray: 3 3;
  opacity: .5;
}

.focus line.y1 {
  stroke: indianred;
  stroke-dasharray: 3 3;
  opacity: .5;
}

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