JSFiddle - React, Tailwind, and code Playground

by jeanlescure

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>

CSS

body {
  background: #3c404b;
}

svg {
  font: 10px sans-serif;
}

text {
  fill: #ffffff;
}

.axis {
  shape-rendering: crispEdges;
}

.x.axis line {
  stroke: #fff;
}

.x.axis .minor {
  stroke-opacity: .5;
}

.x.axis path {
  display: none;
}

JavaScript

var colorRange = [
  '#4aa3df', // Peter River
  '#e74c3c', // Alizarin
  '#1abc9c', // Turqoise
  '#e67e22', // Carrot
  '#9b59b6', // Amethyst
  '#95a5a6', // Concrete
  '#f1c40f', // Sun Flower
  '#2ecc71', // Emerald
];

var data = [
  {
    key: 'Thing 1',
    values: [
      { date: '2014-01-01', amount: 10 },
      { date: '2014-01-02', amount: 40 },
      { date: '2014-01-03', amount: 20 },
      { date: '2014-01-04', amount: 40 },
      { date: '2014-01-05', amount: 20 },
      { date: '2014-01-06', amount: 80 }
    ]
  },
  {
    key: 'Thing 2',
    values: [
      { date: '2014-01-02', amount: 80 },
      { date: '2014-01-03', amount: 40 },
      { date: '2014-01-04', amount: 20 },
      { date: '2014-01-05', amount: 40 },
      { date: '2014-01-06', amount: 20 },
      { date: '2014-01-07', amount: 10 }
    ]
  },
  {
    key: 'Thing 3',
    values: [
      { date: '2014-01-01', amount: 30 },
      { date: '2014-01-02', amount: 40 },
      { date: '2014-01-03', amount: 20 },
      { date: '2014-01-04', amount: 40 },
      { date: '2014-01-05', amount: 20 },
      { date: '2014-01-06', amount: 50 }
    ]
  }
];
    
var color = generateColorScale();
    
var x = d3.time.scale()
  .range([0, 300]);

var y = d3.scale.linear()
  .range([150, 0]);
    
var minDate = d3.min(data, function(d) {return new Date(Date.parse(d.values[0].date))});
var maxDate = d3.max(data, function(d) {return new Date(Date.parse(d.values[d.values.length - 1].date))});

x.domain([minDate, maxDate]);

y.domain([0, d3.max(data.map(function (d) { return d3.max(d.values.map(function(v){ return v.amount; })); }))]);
    
var area = d3.svg.area()
    .interpolate("cardinal")
    .x(function(d) { return x( new Date(Date.parse(d.date)) ); });
    
var line = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return x( new Date(Date.parse(d.date)) ); });

var xAxis = d3.svg.axis()
  .scale(x)         // x is the d3.time.scale()
  .orient('top') // the ticks go below the graph
...