JSFiddle - React, Tailwind, and code Playground

by Simon Raper

HTML

<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<div id="container">
    <div id="header">
         <h1>Demo Scatterplot</h1>

    </div>
    <div id="sidebar">Y-axis:
        <select id="yAxisVar" onchange="reDraw()">
            <option value="BoxOffice" selected="selected">Box Office</option>
            <option value="BOOpening">Opening Box Office</option>
        </select>
    </div>
    <div id="content">
        <svg height="400" width="650"></svg>
    </div>
    <div id="footer">X-axis:
        <select id="xAxisVar" onchange="reDraw()">
            <option value="RTCritics" selected="selected">Critics' Score</option>
            <option value="RTAudience">Audience Score</option>
        </select>
    </div>
</div>

CSS

h1 {
    color: #ffffff;
    font-family:'Franklin Gothic Medium';
    font-weight: normal;
    font-size: 1.75em;
    letter-spacing: .2em;
    line-height: 1.1em;
    margin:0px;
    text-align: center;
}
#container {
    width:810px;
    height:600px;
    background: #258354;
}
#header {
    width:800px;
    height: 50px;
    padding: 5px;
    background: #258354;
}
#sidebar {
    height:400px;
    width:170px;
    background: #258354;
    float:left;
    font-family:'Franklin Gothic Book';
    font-size: 11px;
    padding: 5px;
}
#content {
    background-color:#ffffff;
    height:400px;
    width:450px;
    float:left;
}
#footer {
    width:630px;
    height: 50px;
    font-family:'Franklin Gothic Book';
    font-size: 11px;
    background: #258354;
    float:left;
    padding: 5px;
    text-align: right;
}
circle {
    stroke: #1abc9c;
    stroke-width: 2;
    fill: white;
}
.d3-tip {
    font-family:'Franklin Gothic Book';
    line-height: 1;
    padding: 1px;
    background-color: rgba(215, 215, 215, 0.5);
    color: #000;
    border-radius: 2px;
    text-transform: capitalize;
}
.axis path, .axis line {
    fill: none;
    stroke: grey;
    shape-rendering: crispEdges;
}
.axis text {
    font-family:'Franklin Gothic Book';
    font-size: 11px;
}
select, button {
    margin: 5px;
    font-family:'Franklin Gothic Book' font-size: 420px;
    text-transform: capitalize;
}

JavaScript

Best_Picture = [{
    "BOOpening": "923715",
        "RTCritics": "96",
        "RTAudience": "90",
        "Winner": "12 Years a Slave",
        "BoxOffice": "56671993",
        "TheatresO": "19",
        "Theatres": "1474"
}, {
    "BOOpening": "367151",
        "RTCritics": "75",
        "RTAudience": "93",
        "Winner": "A Beautiful Mind",
        "BoxOffice": "170742341",
        "TheatresO": "11",
        "Theatres": "2250"
}, {
    "BOOpening": "163773",
        "RTCritics": "97",
        "RTAudience": "89",
        "Winner": "A Prophet",
        "BoxOffice": "2087720",
        "TheatresO": "9",
        "Theatres": "83"
}, {
    "BOOpening": "282367",
        "RTCritics": "85",
        "RTAudience": "74",
        "Winner": "About Schmidt",
        "BoxOffice": "65016287",
        "TheatresO": "6",
        "Theatres": "1240"
}, {
    "BOOpening": "2314646",
        "RTCritics": "88",
        "RTAudience": "92",
        "Winner": "Almost Famous",
        "BoxOffice": "32534850",
        "TheatresO": "131",
        "Theatres": "2262"
}, {
    "BOOpening": "740455",
        "RTCritics": "93",
        "RTAudience": "74",
        "Winner": "American Hustle",
        "BoxOffice": "150117807",
        "TheatresO": "6",
        "Theatres": "2629"
}, {
    "BOOpening": "159705",
        "RTCritics": "94",
        "RTAudience": "86",
        "Winner": "American Splendor",
        "BoxOffice": "6010990",
        "TheatresO": "6",
        "Theatres": "272"
}, {
    "BOOpening": "68266",
        "RTCritics": "93",
        "RTAudience": "82",
        "Winner": "Amour",
        "BoxOffice": "6739492",
        "TheatresO": "3",
        "Theatres": "333"
}, {
    "BOOpening": "19458109",
        "RTCritics": "96",
        "RTAudience": "90",
        "Winner": "Argo",
        "BoxOffice": "136025503",
        "TheatresO": "3232",
        "Theatres": "3247"
}, {
    "BOOpening": "784145",
        "RTCritics": "83",
        "RTAudience": "80",
        "Winner":...