JSFiddle - React, Tailwind, and code Playground

by joseph8691

HTML

<h1>delimited | Force Bubble Charts in D3 
</h1>

<link rel="shortcut icon" href="http://projects.delimited.io/experiments/common/delimited-favicon-v4.ico">
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active" id="make">
        <input type="radio" name="options">Make</label>
    <label class="btn btn-primary" id="drive">
        <input type="radio" name="options">Drive</label>
    <label class="btn btn-primary" id="trans">
        <input type="radio" name="options">Transmission</label>
</div>
</div>
<div id="chart"></div>
<script src="http://projects.delimited.io/experiments/force-bubbles/lib/d3.js"></script>
<script src="lhttp://projects.delimited.io/experiments/force-bubbles/lib/jquery.js"></script>
<script src="http://projects.delimited.io/experiments/force-bubbles/lib/bootstrap.js"></script>
<script src="http://projects.delimited.io/experiments/force-bubbles/lib/underscore.js"></script>

CSS

body {
    background-color: white;
    padding-left: 50px;
}
circle {
    stroke: white;
    stroke-width: 2px;
    opacity: .8;
}
.btn-group {
    margin-left: 330px;
}
.label {
    fill: white;
    font-size: 16px;
}

JavaScript

var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-45101494-1']);
 _gaq.push(['_setDomainName', 'delimited.io']);
 _gaq.push(['_trackPageview']);
 (function () {
     var ga = document.createElement('script');
     ga.type = 'text/javascript';
     ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0];
     s.parentNode.insertBefore(ga, s);
 })();
 d3.csv('http://projects.delimited.io/experiments/force-bubbles/data/fuel.csv', function (error, data) {

     var width = 800,
         height = 800;
     var fill = d3.scale.ordinal().range(['#827d92', '#827354', '#523536', '#72856a', '#2a3285', '#383435']);
     var svg = d3.select("#chart").append("svg")
         .attr("width", width)
         .attr("height", height);

     for (var j = 0; j < data.length; j++) {
         data[j].radius = +data[j].comb / 2;
         data[j].x = Math.random() * width;
         data[j].y = Math.random() * height;
     }

     var padding = 2;
     var maxRadius = d3.max(_.pluck(data, 'radius'));

     var getCenters = function (vname, size) {
         var centers, map;
         centers = _.uniq(_.pluck(data, vname)).map(function (d) {
             return {
                 name: d,
                 value: 1
             };
         });

         map = d3.layout.treemap().size(size).ratio(1 / 1);
         map.nodes({
             children: centers
         });

         return centers;
     };

     var nodes = svg.selectAll("circle")
         .data(data);

     nodes.enter().append("circle")
         .attr("class", "node")
         .attr("cx", function (d) {
         return d.x;
     })
         .attr("cy", function (d) {
         return d.y;
     })
         .attr("r", function (d) {
         return d.radius;
     })
         .style("fill", function (d) {
         return fill(d.make);
     })
         .on("mouseover", function (d) {
        ...