JSFiddle - React, Tailwind, and code Playground

by Gabriel Z

HTML

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

CSS

body {
    font: 10px sans-serif;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.line.second {
    stroke: red;
}
.area {
    fill: none;
    opacity: 0.5;
}
.dot {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}

JavaScript

var data = [
    [12345, 42345, 3234, 22345, 72345, 62345, 32345, 92345, 52345, 22345],
    [1234, 4234, 3234, 2234, 7234, 6234, 3234, 9234, 5234, 2234]
];

var width = 200,
    height = 200;

var x = d3.scale.linear()
    .domain([0, data[0].length])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, d3.max(data[0])])
    .range([height, 0]);

var numberOfTicks = 6;

var yAxisGrid = d3.svg.axis().scale(y)
  .ticks(numberOfTicks) 
  .tickSize(width, 0)
  .tickFormat("")
  .orient("right")

var xAxisGrid = d3.svg.axis().scale(x)
  .ticks(numberOfTicks) 
  .tickSize(-height, 0)
  .tickFormat("")
  .orient("top")

var line = d3.svg.line()
    .x(function (d, i) {
    return x(i);
})
    .y(function (d) {
    return y(d);
});

var area = d3.svg.area()
    .x(line.x())
    .y1(line.y())
    .y0(y(0));

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

var lines = svg.selectAll("g")
    .data(data);

var aLineContainer = lines.enter().append("g");

svg.append("g")
  .classed('y', true)
  .classed('axis', true)
  .call(yAxisGrid)

svg.append("g")
  .classed('x', true)
  .classed('axis', true)
  .call(xAxisGrid)

aLineContainer.append("path")
    .attr("class", "area")
    .attr("d", area);

aLineContainer.append("path")
    .attr("class", "line")
    .attr("d", line);

aLineContainer.selectAll(".dot")
    .data(function (d, i) {
    return d;
})
    .enter()
    .append("circle")
    .attr("class", "dot")
    .attr("cx", line.x())
    .attr("cy", line.y())
    .attr("r", 3.0);