JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<div id="chart"></div>

CSS

.area {
  fill: steelblue;
  opacity: 0.5;
  stroke: steelblue;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

div.charts {
  width: 200px;
  float: left;
}

JavaScript

// Helper function ////////////////////////////////////                       
var createAccessors = function(visExport) {
    for (var n in visExport.opts) {
        if (!visExport.opts.hasOwnProperty(n)) continue;
        visExport[n] = (function(n) {
            return function(v) {
                return arguments.length ? (visExport.opts[n] = v, this) : visExport.opts[n];
            }
        })(n);
    }
}; 

var data = [[0, 80], [1, 4], [2, 2], [3, 3], [4, 5], [5, 10], [6, 20], [7, 40]]

  var Chart = function module(){
    var opts = {
      margin: {top: 20, bottom: 20, left: 20, right: 50},
      width: 607,
      height: 320,
      interpolate: "linear",
      xValue: function(d) { return d[0]^3; },
      yValue: function(d) { return d[1]; }
    }
    var xScale = d3.scale.linear(),
     yScale = d3.scale.linear()

    var exports = function(selection){
      opts.W = opts.width - opts.margin.left - opts.margin.right
      opts.H = opts.height - opts.margin.top - opts.margin.bottom
      // Convert data to standard representation greedily;
      // this is needed for nondeterministic accessors.
      selection.each(function(data){
        data = data.map(function(d, i) {
            return [
              opts.xValue.call(data, d, i), 
              opts.yValue.call(data, d, i)
            ];
        });
        console.log(data)
        xScale
         .range([0, opts.W])
         .domain(d3.extent(data, function(d){return d[0]}))
        yScale
         .range([opts.H, 0])
         .domain(d3.extent(data, function(d){return d[1]}))
        
        
        var chart = d3.select(this).append("svg")
          .attr('width', opts.width)
          .attr('height', opts.height)
        .append("g")
          .attr("transform", "translate(" + opts.margin.left + "," + opts.margin.top + ")")
      
        var line = d3.svg.line()
          //.interpolate(opts.interpolate)
          .x(X)
          .y(Y)
  
        chart.append("path")
          ...