JSFiddle - React, Tailwind, and code Playground

by ashishsingh

HTML

<html>

  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <div class="graph"></div>

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

</html>

CSS

body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }

 .graph {
   margin-top: 50px;
 }

 .graph .axis {
   stroke-width: 1;
 }

 .graph .axis .tick line {
   stroke: black;
 }

 .graph .axis .tick text {
   fill: black;
   font-size: 0.7em;
 }

 .graph .axis .domain {
   fill: none;
   stroke: black;
 }

 .graph .group {
   fill: none;
   stroke: black;
   stroke-width: 1.5;
 }

 rect.metric {
   stroke-width: 1;
   shape-rendering: crispEdges;
 }

JavaScript

var limit = 600 * 1,
  duration = 750,
  now = new Date(Date.now() - duration)

var width = 500,
  height = 200;

var groups = {
  current: {
    value: 0,
    color: 'orange',
    data: d3.range(limit).map(function() {
      return 0
    })
  },
  target: {
    value: 0,
    color: 'green',
    data: d3.range(limit).map(function() {
      return 0
    })
  },
  output: {
    value: 0,
    color: 'grey',
    data: d3.range(limit).map(function() {
      return 0
    })
  }
};

// Metric
// pre-fill with dummy data
// 
var aMetricData = d3.range(limit).map(function(i) {
  return {
    x: now - (limit - 1 - i) * duration,
    value: 0
  };
});

var x = d3.time.scale()
  .domain([now - (limit - 2), now - duration])
  .range([0, width]);

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

var line = d3.svg.line()
  .interpolate('basis')
  .x(function(d, i) {
    return x(now - (limit - 1 - i) * duration)
  })
  .y(function(d) {
    return y(d)
  })

var svg = d3.select('.graph').append('svg')
  .attr('class', 'chart')
  .attr('width', width)
  .attr('height', height + 50)

svg.append('g')
  .attr('class', 'y axis')
  .attr('transform', 'translate(20,5)')
  .call(x.axis = d3.svg.axis().scale(y).orient('left'))

var axis = svg.append('g')
  .attr('class', 'x axis')
  .attr('transform', 'translate(20,' + (height + 5) + ')')
  .call(x.axis = d3.svg.axis().scale(x).orient('bottom'));

/**
 * Metric
 * 
 * You can either use a scale or
 * a function that returns discrete colors
 * based on a metric value
 */
var colorScale = d3.scale.linear()
  // TODO: set metric value range
  .domain([0, 1])
  // TODO: set corresponding color range
  .range(["whitesmoke", "black"]);

// add to the graph
var gMetrics = svg.append('g')
  .classed('g-metrics', true);

// ./ Metric

var paths = svg.append('g');

for (var name in groups) {
  var group = groups[name]
  group.path = paths.append('path')
    .data([group.data])
    .attr('class', name + ' group')
   ...