JSFiddle - React, Tailwind, and code Playground

by joseph8691

HTML

<h1>Top 50 S&P 500 Companies' Dividend Performance 
</h1>


<h2> From 1990 to 2013.</h2>

<p id="chart"></p>
<script src="http://d3js.org/d3.v2.js?2.8.1"></script>
<button id="update">Update</button>

CSS

#chart {
    margin-left: 0px;
    height: 506px;
}
text {
    font: 10px sans-serif;
}
.dot {
    stroke: #000;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.label {
    fill: #777;
}
.country {
    font: 400 48px"Helvetica Neue";
    text-anchor:center;
    fill: #777;
}
.year.label {
    font: 400 120px"Helvetica Neue";
    fill: #ddd;
}
.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": "Technology",
        "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, 0.0538922155688624],
        [2001, 0.0227272727272727],
        [2002, 0.0222222222222221],
        [2003, 0.0652173913043477],
        [2004, 0.0816326530612246],
        [2005, 0.0754716981132075],
        [2006, 0.12280701754386],
        [2007, 0.0703125],
        [2008, 0.131386861313868],
        [2009, 0.0709677419354839],
        [2010, 0.0481927710843375],
        [2011, 0.0632183908045976],
        [2012, 0.178378378378378],
        [2013, 0.128440366972477]
    ]
}, {
    "name": "GENERAL ELECTRIC",
        "sector": "Energy",
        "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,...