JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<body>
  <div class="graph"></div>

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


  </script>
</body>

CSS

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

.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;
}

JavaScript

var limit = 200,
          duration = 300,
          now = new Date(Date.now() - duration)

        var width = 500,
          height = 350

        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
            })
          }
        }

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

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


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

        // Bottom Axis
        var axis = svg.append('g')
          .attr('class', 'x axis')
          .attr('transform', 'translate(0,' + height + ')')
          .call(x.axis = d3.svg.axis().scale(x).orient('bottom').ticks(d3.time.second, 5))

        var paths = svg.append('g').attr("class", "line");

        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 transition = d3.select({}).transition()
          .duration(duration)
          .ease("linear");
        // Painting
        for (var name in groups) {
          var group = groups[name]
          group.path = paths.append('path')
            .data([group.data])
            .attr('class', name + ' group')
            .style('stroke', group.color)
        }
 ...