JSFiddle - React, Tailwind, and code Playground

by webyourway

HTML

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

CSS

g.axis path, g.axis line {
    fill: none; stroke:black; shape-rendering:crispEdges;
}
g.brush rect.extent {
    fill-opacity:0.2;
}

JavaScript

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.category10();

// x0 is the time scale on the X axis
var main_x0 = d3.scale.ordinal().rangeRoundBands([0, main_width - 275], 0.2);
var mini_x0 = d3.scale.ordinal().rangeRoundBands([0, main_width - 275], 0.2);

var main_xZoom = d3.scale.linear()
    .range([0, main_width - 275])
    .domain([0, main_width - 275]);

// x1 is the portfolio scale on the X axis
var main_x1 = d3.scale.ordinal();
var mini_x1 = d3.scale.ordinal();

// y is the fix time scal on the Y axis
var main_y = d3.scale.linear().range([main_height, 0]);
var mini_y = d3.scale.linear().range([mini_height, 0]);

// Date format for the X axis
var dateFormat = d3.time.format("%a %d");

// Define the X axis
var main_xAxis = d3.svg.axis()
    .scale(main_x0)
    .tickFormat(dateFormat)
    .orient("bottom");

var mini_xAxis = d3.svg.axis()
    .scale(mini_x0)
    .tickFormat(dateFormat)
    .orient("bottom");

// Define the Y axis
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);

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

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



/*
 * Pull in the data
 */
//d3.json('fix_time_by_port.json', function(error, data) {
data =...