JSFiddle - React, Tailwind, and code Playground

by azcoov

HTML

<script src="https://raw.github.com/mbostock/d3/master/d3.min.js"></script>
<div class="area"></div>

CSS

.area{
    width: 500px;
    height: 200px;
    background-color: #eee;
}

path {
    stroke: steelblue;
    stroke-width: 2;
    fill: lightsteelblue;
}
 
line {
    stroke: black;
}
circle.mark{
    stroke: steelblue;
    fill: #fff;
}

JavaScript

var data = [1036, 1304, 2372, 3161, 514, 1022, 1840, 2426, 5610, 3716, 3908, 3264, 3810, 3841, 395, 1500, 1512, 1571, 2507, 3405, 2790, 3568, 2013, 1978, 2762, 1416, 3091, 1950, 2822, 2883, 2581, 2851, 3014, 4968, 4322, 2752, 1671, 2126, 3459, 2997, 2347, 3448, 2587, 2363, 1666, 3269, 2035, 1066, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
     
     var size = {
         height: 200,
         width: 500
     }
     
     var scale = {
         x: d3.scale.linear().domain([0, data.length]).range([0, size.width]),
         y: d3.scale.linear().domain([0, d3.max(data)]).range([size.height, 15])        
     }
          
     var chart = d3.selectAll('.area')
       .append('svg:svg')
       .data([data])
       .attr('width', size.width)
       .attr('height', size.height)
       .append('svg:g');
     
     var line = d3.svg.area().x(function(d, i){return scale.x(i);})
     .y(function(d){return scale.y(d);}).y0(size.height).interpolate("basis");
     
     chart.append('svg:path')
          .attr('d', function(d, i){return line(d, i);});
 
    chart.selectAll('circle.mark').data(data).enter().append('svg:circle')
    .attr('class', 'mark')
    .attr('cx', function(d, i){return scale.x(i);})
    .attr('cy', function(d){return scale.y(d);})
    .attr('r', 3.5)