JSFiddle - React, Tailwind, and code Playground

by Cheikh Ba

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">
              X-axis:
        <select id="xAxisVar" onchange="reDraw()" >
            <option></option>
            <option value="physicalstrength" selected="selected">physical strength             
            </option>
            <option value="fearfactor" >fear factor</option>
            <option value="killingpower">killing power</option>
            <option value="horrorrating">horror rating</option>
        </select>
      
    </div> 
    <div id="content">
        <svg height="400" width="650">
        </svg>
    </div>
    <div id = "footer" align= "right">  
        <br>
       Y-axis:
 <select id="yAxisVar" onchange="reDraw()">
     <option></option>
     <option value="physicalstrength">physical strength</option>
     <option value="fearfactor" selected="selected">fear factor</option>
     <option value="killingpower">killing power</option>
     <option value="horrorrating">horror rating</option>
  </select>
    </div>
</div>

CSS

h1 {
    color: #ffffff;
    font-family:'Raleway';
    font-weight: normal;http://jsfiddle.net/cheikhba/sv4nf31w/8/#username
    font-size: 1.75em;
    letter-spacing: .2em;
    line-height: 1.1em;
    margin:0px;
    text-align: center;
    text-transform: uppercase;
}
#container {
    width:800px;
}
#header {
    width:700px;
    height: 50px;
    padding: 5px;
    background: #1F2273;
}

#sidebar {
    height:400px;
    width:140px;
    background: black;
    float:left;
    font-family:  'Raleway';
    font-size: 11px;
    padding: 5px;
}

#content {
    background-color:#ffffff;
    height:300px;
    width:350px;
    float:left;
}
#footer {
    width:700px;
    height: 50px;
    background: black;
    float:left;
}
circle {
    stroke: #1abc9c;
    stroke-width: 2;
    fill: yellow;
}

.d3-tip {
    font-family:'Raleway';
    line-height: 1;
    padding: 1px;
    background: transparent;
    color: #000;
    border-radius: 2px;
}

.axis path, .axis line {
    fill: none;
    stroke: grey;
    shape-rendering: crispEdges;
}

.axis text {
    font-family:'Raleway';
    font-size: 11px; 
}

select, button {
    margin: 5px;
    font-family:  'Raleway'
    font-size: 20px;
}

JavaScript

data= [{

"channels": "display", 
"responses": 95, 
"cost": 424, 
"impressions": 222, 
"cpr": 4.463157895, 
"response_rate": 0.332167832, 
"clicks": 286

}, {
"channels": "search", 
"responses": 78, 
"cost": 346, 
"impressions": 138, 
"cpr": 4.435897436, 
"response_rate": 0.690265487, 
"clicks": 113

}, {
"channels": "affiliates", 
"responses": 55, 
"cost": 405, 
"impressions": 229, 
"cpr": 7.363636364, 
"response_rate": 0.359477124, 
"clicks": 153

}, {
"channels": "upcust", 
"responses": 94, 
"cost": 450, 
"impressions": 285, 
"cpr": 4.787234043, 
"response_rate": 0.580246914, 
"clicks": 162

}, {
"channels": "dfa", 
"responses": 71, 
"cost": 304, 
"impressions": 168, 
"cpr": 4.281690141, 
"response_rate": 0.243986254, 
"clicks": 291

}, {
"channels": "twitter", 
"responses": 70, 
"cost": 345, 
"impressions": 249, 
"cpr": 4.928571429, 
"response_rate": 0.304347826, 
"clicks": 230

}, {
"channels": "facebook", 
"responses": 71, 
"cost": 349, 
"impressions": 257, 
"cpr": 4.915492958, 
"response_rate": 0.47972973, 
"clicks": 148

}];


//Set constants
var w = 420,
    h = 400,
    padding = 30;

//Create adaptable scales
var xScale = d3.scale.linear()
    .domain([0, d3.max(horror, function (d) {
    return d3.max([d.physicalstrength, d.fearfactor, d.killingpower, d.horrorrating]);
})])
    .range([padding, w - padding]);

var yScale = d3.scale.linear()
   .domain([0, d3.max(horror, function (d) {
    return d3.max([d.physicalstrength, d.fearfactor, d.killingpower, d.horrorrating]);
})])

    .range([h - padding, padding]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(horror, function (d) {
    return d3.max([d.physicalstrength, d.fearfactor, d.killingpower, d.horrorrating]);
})])
    .range([h - padding, padding]);

//Select the svg
var svg = d3.select("svg");

//Define and set up the tooltip
var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function (d) {
    return d.name;
});

svg.call(tip);

//Set up the...