JSFiddle - React, Tailwind, and code Playground

by mlmason

HTML

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


<h2> From 1970 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": "Detroit",
        
        "population": [
        [1970, 1.511482],
        [1980, 1.203339],
        [1990, 1.027974],
        [2000, .951270],
        [2013, .688701],
    
    ],
        "poverty": [
        [1970, 14.9],
        [1980, 21.9],
        [1990, 30.2],
        [2000, 26.1],
        [2013, 40.7],
     
    ],
    
      "pov": [
        [1970, 14.9],
        [1980, 21.9],
        [1990, 30.2],
        [2000, 26.1],
        [2013, 40.7],
     
    ],
    
      "pop": [
        [1970, 1.511482],
        [1980, 1.203339],
        [1990, 1.027974],
        [2000, .951270],
        [2013, .688701],
    
    ],
}];

function x(d) {
    return d.population;
}

function y(d) {
    return d.poverty;
}

function radius(d) {
    return d.pov;
}

function color(d) {
    return d.pop;
}

function key(d) {
    return d.name;
}

var currentCountry = "";

// Chart dimensions.
var margin = {
    top: 19.5,
    right: 19.5,
    bottom: 19.5,
    left: 39.5
},
width = 400- margin.right,
    height = 200 - margin.top - margin.bottom,
    yearMargin = 10;

// Various scales. These domains make assumptions of data, naturally.
var xScale = d3.scale.linear().domain([0, 2]).range([0, width - yearMargin]),
    yScale = d3.scale.linear().domain([0, .5]).range([height, 0]),
    radiusScale = d3.scale.linear().domain([0, 0.06]).range([0, 80]),
    colorScale = d3.scale.category10();

// The x & y axes.
formatter = d3.format(".0%");
var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(12, d3.format(",d")),
    yAxis = d3.svg.axis().scale(yScale).orient("left").tickFormat(formatter);

// Create the SVG container and set the origin.
var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Add the x-axis.
svg.append("g")
    .attr("class", "x...