JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<div id="sparklines"></div>
<div id="sparklines2"></div>

<button id = 'update'>Update</button>

CSS

.line{fill: none;}
div.sparkline{float: left;}

CoffeeScript

data = [3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 9]

createAccessors = (visExport) ->
  for n of visExport.opts
    continue  unless visExport.opts.hasOwnProperty(n)
    visExport[n] = ((n) ->
      (v) ->
        (if arguments.length then (visExport.opts[n] = v
        this
        ) else visExport.opts[n])
    )(n)
  return
    

Sparkline = ->
  opts = {
     margin: {top: 30, left: 31, right: 20, bottom: 20}
     width: 100
     height: 24,
     color: "steelblue",
     x: d3.scale.linear(),
     y: d3.scale.linear()
  }

  chart = null

  line = d3.svg.line()
    .x((d, i) -> opts.x(i))
    .y((d, i) -> opts.y(d))
    .interpolate("basis")
  that = this
  exports = (selection) ->
    selection.each (data) ->
      W = opts.width + opts.margin.left + opts.margin.right
      H = opts.height + opts.margin.top + opts.margin.bottom
      opts.x.range([0, opts.width]).domain([0, data.length - 2])
      opts.y.range([opts.height, 0]).domain([0, 10])
       
      svg = d3.select(this).selectAll("svg").data([data])
      chartContainer = svg.enter().append("svg")
        .attr("width", W)
        .attr("height", H)
        .append("g")
        .attr("transform", "translate(#{opts.margin.left}, #{opts.margin.top})")
        
      chartContainer.append("defs").append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", W)
        .attr("height", H);
      
      chart = chartContainer.selectAll("path")
        .data([data]).enter()
        .append("g")
        .attr("clip-path", "url(#clip)")
        .append("path")
        .attr("class", "line")
        .attr("stroke", opts.color)
        .attr("d", line)
        
  exports.opts = opts
  exports.line = line
  createAccessors(exports)
  exports.update = (data) ->
    chart
      .attr("d", line)
      .attr("transform", null)
      .transition()
        .duration(500)
       ...