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">
<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

/* nvd3 */

(function(){

var nv = window.nv || {};

nv.version = '0.0.1a';
nv.dev = true //set false when in production

window.nv = nv;

nv.tooltip = {}; // For the tooltip system
nv.utils = {}; // Utility subsystem
nv.models = {}; //stores all the possible models/components
nv.charts = {}; //stores all the ready to use charts
nv.graphs = []; //stores all the graphs currently on the page
nv.logs = {}; //stores some statistics and potential error messages

nv.dispatch = d3.dispatch('render_start', 'render_end');

// *************************************************************************
//  Development render timers - disabled if dev = false

if (nv.dev) {
  nv.dispatch.on('render_start', function(e) {
    nv.logs.startTime = +new Date();
  });

  nv.dispatch.on('render_end', function(e) {
    nv.logs.endTime = +new Date();
    nv.logs.totalTime = nv.logs.endTime - nv.logs.startTime;
    nv.log('total', nv.logs.totalTime); // used for development, to keep track of graph generation times
  });
}

// ********************************************
//  Public Core NV functions

// Logs all arguments, and returns the last so you can test things in place
nv.log = function() {
  if (nv.dev && console.log && console.log.apply) console.log.apply(console, arguments);
  return arguments[arguments.length - 1];
};


nv.render = function render(step) {
  step = step || 1; // number of graphs to generate in each timout loop

  render.active = true;
  nv.dispatch.render_start();

  setTimeout(function() {
    var chart;

    for (var i = 0; i < step && (graph = render.queue[i]); i++) {
      chart = graph.generate();
      if (typeof graph.callback == typeof(Function)) graph.callback(chart);
      nv.graphs.push(chart);
    }

    render.queue.splice(0, i);

    if (render.queue.length) setTimeout(arguments.callee, 0);
    else { nv.render.active = false; nv.dispatch.render_end(); }
  }, 0);
};

nv.render.active = false;
nv.render.queue = [];

nv.addGraph = function(obj) {
  if...