JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<div id="main">
</div>

CSS

body{
    font-family: "sans-serif";
}
.axis path, .axis line {
    fill: none;
    stroke: none;
    shape-rendering: crispEdges;
}

.axis text{
    font-size: 14px; 
    font-family: sans-serif
}
.y.axis line {
  stroke: #ddd;
}
.chart {
  float: left;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-top:0;
  padding-left:0;
  background: #eee;
  border: 1px #ddd solid;
}
.title {
    font-family: sans-serif;
    font-size: 24px;
}
.subtitle {
    font-family: sans-serif;
    font-size: 16px;
    fill: #aaa;
}
.data-labels {
   font-family: sans-serif;
   font-size: 14px;
}
#main {
   //background: #e4e4e4;
   width: 530px;
}
#main svg {
    margin-top: 20px;
    margin-left: 30px;
    margin-right; 30px;
}

CoffeeScript

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

BarChart = () ->
    opts = {
        margin: {top: 60, bottom: 60, left: 30, right: 30},
        width: 600,
        height: 400,
        x: d3.scale.ordinal(),
        y: d3.scale.linear(),
        c: d3.scale.category20(),
        xV: (d) -> d.x,
        yV: (d) -> d.y,
        title: null,
        subtitle: null,
        labels: true
    }

    exports = (selection) ->
      selection.each (data) ->
        
        opts.W = opts.width + opts.margin.left + opts.margin.right
        opts.H = opts.height + opts.margin.top + opts.margin.bottom

        svg = d3.select(@).append("svg")
            .attr("width", opts.W)
            .attr("height", opts.H)
          .append("g")
            .attr("transform", "translate(#{opts.margin.left}, #{opts.margin.top})")
            
        svg.append("text")
          .attr("class", "title text")
          .attr("dy", -30)
          .text(opts.title || "")
            
        svg.append("text")
          .attr("class", "subtitle text")
          .attr("dy", -5)
          .text(opts.subtitle || "")
            
        
        console.log data.map(opts.xV)
        # set up scales
        opts.x.domain(data.map(opts.xV))
         .rangeRoundBands([0, opts.width], 0.1)

        opts.y.domain([0, d3.max(data.map(opts.yV))*1.2]) 
         .range([opts.height, 0])

        # set up axis
        xAxis = d3.svg.axis().scale(opts.x).orient('bottom').tickSize(0)
        yAxis = d3.svg.axis().scale(opts.y).orient("left")
          .tickSize(-opts.width).ticks(3)
            
        
        chart = svg.append("g")
          .attr('transform', 'translate(0, 10)')
            
        bars = chart.selectAll("rect")
          .data(data)
            
       ...