JSFiddle - React, Tailwind, and code Playground

by petran

HTML

<link rel="stylesheet" href="http://nvd3.org/css/syntax.css">
<link rel="stylesheet" href="http://nvd3.org/css/common.css">
<script src="http://d3js.org/d3.v2.min.js"></script>
<link rel="stylesheet" href="http://nvd3.org/src/nv.d3.css">
<script src="http://nvd3.org/nv.d3.js"></script>
<div id="social-graph">
    <svg></svg>
</div>

CSS

#social-graph {
    width:150px;
}
.nv-legendWrap {
    display: none;
}
.nv-axis {
    display: none;
}

rect {
   display: inline-block;
   margin-top: 25px;
   margin-bottom: 5px;
}

JavaScript

nv.models.multiBarHorizontal = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var margin = {top: 0, right: 0, bottom: 0, left: 0}
    , width = 960
    , height = 500
    , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
    , x = d3.scale.ordinal()
    , y = d3.scale.linear()
    , getX = function(d) { return d.x }
    , getY = function(d) { return d.y }
    , forceY = [0] // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove
    , color = nv.utils.defaultColor()
    , barColor = null // adding the ability to set the color for each rather than the whole group
    , disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled
    , stacked = false
    , showValues = false
    , valuePadding = 60
    , valueFormat = d3.format(',.2f')
    , delay = 1200
    , xDomain
    , yDomain
    , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout')
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var x0, y0 //used to store previous scales
      ;

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var availableWidth = width - margin.left - margin.right,
          availableHeight = height - margin.top - margin.bottom,
          container = d3.select(this);


      if (stacked)
        data = d3.layout.stack()
                 .offset('zero')
                 .values(function(d){ return d.values })
                 .y(getY)
                ...