JSFiddle - React, Tailwind, and code Playground

by joseph8691

HTML

<div class="container">

   <div style="background-image:url('http://www.realityshares.com/wp-content/uploads/2014/09/bubble-chart-background-image.png');width:850px;height:460px"></div>
</div>
    <center>
        <button id="refresh">Refresh</button>
    </center>
    <div id="chart"></div>
    <script src="http://d3js.org/d3.v2.js?2.8.1"></script>
    <script>

CSS

#chart {
    margin-left: 0px;
    height: 506px;
}
text {
    font: 14px Roboto;
}
.dot {
    stroke: #000;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.label {
    fill: #555;
}
.country {
    font: 400 24px"Roboto";
    text-anchor:center;
    fill: #777;
}
.year.label {
    font: 400 50px"Roboto";
    fill: #ccc;
}
.year.label.active {
    fill: #aaa;
}
.hidden {
    color: #f00;
}
.visible {
    color: #0f0;
}
.overlay {
    fill: none;
    pointer-events: all;
    cursor: ns-resize;
}
.d3-tip {
    line-height: 1;
    font-family: Lucida Grande, Lucida Sans Unicode, Arial, Helvetica;
    font-size: 12px;
    padding: 12px;
    background: #EFEFEF;
    color: #253756;
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
}

JavaScript

var data = [{
    "name": "EXXON MOBIL",
        "sector": "Energy",
        "marketCap": [
        [2000, 278.873055375],
        [2001, 302.2111811875],
        [2002, 268.832829],
        [2003, 235.10769612],
        [2004, 271.0018],
        [2005, 330.69343296],
        [2006, 349.51198332],
        [2007, 446.94355544],
        [2008, 511.88711994],
        [2009, 406.06718967],
        [2010, 322.66812462],
        [2011, 368.71176784],
        [2012, 406.27231008],
        [2013, 394.61113665]
    ],
        "dividendContribution": [
        [2000, 0.0412906038439858],
        [2001, 0.0434253673861952],
        [2002, 0.0434505165999829],
        [2003, 0.0395354491072596],
        [2004, 0.0355101031597655],
        [2005, 0.0333009284136922],
        [2006, 0.0312828578419448],
        [2007, 0.0302428972930411],
        [2008, 0.0299706043892421],
        [2009, 0.0374415253808514],
        [2010, 0.0370925857479247],
        [2011, 0.0339647470583521],
        [2012, 0.0308398334711484],
        [2013, 0.0316029385804407]
    ],
        "dividendGrowth": [
        [2000, 105.389221556886],
        [2001, 102.272727272727],
        [2002, 102.222222222222],
        [2003, 106.521739130435],
        [2004, 108.163265306123],
        [2005, 107.547169811321],
        [2006, 112.280701754386],
        [2007, 107.03125],
        [2008, 113.138686131387],
        [2009, 107.096774193548],
        [2010, 104.819277108434],
        [2011, 106.32183908046],
        [2012, 117.837837837838],
        [2013, 112.844036697248]
    ]
}, {
    "name": "GENERAL ELECTRIC",
        "sector": "Capital Goods",
        "marketCap": [
        [2000, 507.216647],
        [2001, 475.003195875],
        [2002, 398.10474024],
        [2003, 242.26961885],
        [2004, 311.0658428],
        [2005, 385.8828545],
        [2006, 370.34415335],
        [2007, 383.56447542],
        [2008, 374.63716763],
        [2009, 161.2783872],
        [2010, 161.09659935],
        [2011,...