JSFiddle - React, Tailwind, and code Playground

by iros

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3.chart/0.2.1/d3.chart.min.js"></script>
<script src="https://s3.amazonaws.com/static.bocoup.com/blog/d3.chart.base.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div id="vis">
</div>

JavaScript

/* global d3,$,Modernizr */
$(function() {

  // define a basic rect chart
  d3.chart("BaseChart").extend("RectChart", {
    
    modes : {
      mobile : function() {
        return this.width() <= 480 || 
            Modernizr.mq("only all and (max-width: 480px)");
      },
      tablet: function() {
        var w = this.width();
        return (w <= 768 && w >= 481) || 
            Modernizr.mq("only all and (min-width: 481px) and (max-width: 768px)");
      },
      web: function() {
        return (this.width() > 768) || 
            Modernizr.mq("only all and (min-width: 769px)");
      }
    },
      
    transform: function(data) {
      var chart = this;
      chart.data = data;
      return data;
    },

    initialize: function() {

      var chart = this;

      // create an xScale
      this.xScale = d3.scale.linear()
        .range([0, this.width()]);

      // when the width changes, update the x scale range
      chart.on("change:width", function(newWidth) {
        chart.xScale.range([0, newWidth]);
      });

      // add a boxes layer
      this.layer("boxes", this.base.append("g"), {
        modes : ["web", "tablet"],
        dataBind: function(data) {
          var chart = this.chart();

          // update the x scale domain when 
          // new data comes in
          chart.xScale.domain([
            Math.min.apply(null, data),
            Math.max.apply(null, data)
          ]);

          return this.selectAll("rect")
            .data(data);
        },

        // insert semi transparent blue rectangles
        // of height and width 10.
        insert: function() {
          var chart = this.chart();
          var selection =  this.append("rect");

          return selection;
        },

        // for new and updating elements, reposition
        // them according to the updated scale.
        events: {
          "merge" : function() {
            var chart = this.chart();
            var selection = this;
            if...