JSFiddle - React, Tailwind, and code Playground

by TTTT

HTML

<script src="tc51.net/w/at/stackoverflow.com/20150604.1-jsfiddle/0/d3.csv.js"></script>
<script src="tc51.net/w/at/stackoverflow.com/20150604.1-jsfiddle/0/d3.js"></script>
<script src="tc51.net/w/at/stackoverflow.com/20150604.1-jsfiddle/0/d3.time.js"></script>
<link rel="stylesheet" href="http://tc51.net/w/at/stackoverflow.com/20150604.1-jsfiddle/0/style.css">
<link rel="stylesheet" href="tc51.net/w/at/stackoverflow.com/20150604.1-jsfiddle/0/style.svg.css">
<script src="http://tc51.net/w/at/stackoverflow.com/20150604.1-jsfiddle/0/flights-departed.csv"></script>
	<body>
    <div id="body">
      <div id="footer">
        <span>U.S. Commercial Flights, 1999-2002</span>
        <div class="hint">mousewheel to zoom, drag to pan</div>
      </div>
    </div>
<div style="visibility: hidden; top: 0px; height: 0px; width: 0px; overflow-y: scroll;"><div style="height: 2000px;"></div></div>
	</body>

JavaScript

$(document).ready(function() {

var m = [79, 80, 160, 79],
    w = 1280 - m[1] - m[3],
    h = 800 - m[0] - m[2],
    parse = d3.time.format("%Y-%m-%d").parse,
    format = d3.time.format("%Y");

// Scales. Note the inverted domain for the y-scale: bigger is up!
var x = d3.time.scale().range([0, w]),
    y = d3.scale.linear().range([h, 0]),
    xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(-h, 0).tickPadding(6),
    yAxis = d3.svg.axis().scale(y).orient("right").tickSize(-w).tickPadding(6);

// An area generator.
var area = d3.svg.area()
    .interpolate("step-after")
    .x(function(d) { return x(d.date); })
    .y0(y(0))
    .y1(function(d) { return y(d.value); });

// A line generator.
var line = d3.svg.line()
    .interpolate("step-after")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });

var svg = d3.select("body").append("svg:svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
  .append("svg:g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

var gradient = svg.append("svg:defs").append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x2", "0%")
    .attr("y2", "100%");

gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "#fff")
    .attr("stop-opacity", .5);

gradient.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "#999")
    .attr("stop-opacity", 1);

svg.append("svg:clipPath")
    .attr("id", "clip")
  .append("svg:rect")
    .attr("x", x(0))
    .attr("y", y(1))
    .attr("width", x(1) - x(0))
    .attr("height", y(0) - y(1));

svg.append("svg:g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + w + ",0)");

svg.append("svg:path")
    .attr("class", "area")
    .attr("clip-path", "url(#clip)")
    .style("fill", "url(#gradient)");

svg.append("svg:g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + h + ")");

svg.append("svg:path")
    .attr("class", "line")
   ...