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="responses" selected="selected">responses</option>
            <option value="cost" >cost</option>
            <option value="impressions">impressions</option>
            <option value="clicks">clicks</option>
            
        </select>
      
    </div> 
    <div id="content">
        <svg height="400" width="650">
        </svg>
    </div>
    
   <div id = "footer" align= "center">  
        <br>
       Y-axis:
    <select id="yAxisVar" onchange="reDraw()">
     <option></option>
            <option value="responses">responses</option>
            <option value="cost" >cost</option>
            <option value="impressions">impressions</option>
            <option value="clicks">clicks</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, 
"clicks": 286

}, {
"channels": "search", 
"responses": 78, 
"cost": 346, 
"impressions": 138, 
"clicks": 113
}, {
"channels": "affiliates", 
"responses": 55, 
"cost": 405, 
"impressions": 229, 
"clicks": 153
}, {
"channels": "upcust", 
"responses": 94, 
"cost": 450, 
"impressions": 285, 
"clicks": 162
}, {
"channels": "dfa", 
"responses": 71, 
"cost": 304, 
"impressions": 168, 
"clicks": 291
}, {
"channels": "twitter", 
"responses": 70, 
"cost": 345, 
"impressions": 249, 
"clicks": 230
}, {
"channels": "facebook", 
"responses": 71, 
"cost": 349, 
"impressions": 257, 
"clicks": 148
}];


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

//Create adaptable scales
var xScale = d3.scale.linear()
    .domain([0, d3.max(data, function (d) {
    return d3.max([d.responses, d.cost, d.impressions, d.clicks]);
})])
    .range([padding, w - padding]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(data, function (d) {
    return d3.max([d.responses, d.cost, d.impressions, d.clicks]);
})])

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

var yScale = d3.scale.linear()
    .domain([0, d3.max(data, function (d) {
    return d3.max([d.responses, d.cost, d.impressions, d.clicks]);
})])

    .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.channels;
});

svg.call(tip);

//Set up the circles
diag_circles = svg.selectAll("circle");

diag_circles.data(data)
    .enter()
    .append("circle")
    .attr("cx", function (d){return xScale(d.responses)})
    .attr("cy", function (d){return yScale(d.cost)})
    .attr("r", 10)
    .style("stroke", function (d) {if (d.click <= 100) {return "#1abc9c";} else {return "gray";}})
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide);

//Set up the axes
var xAxis = d3.svg.axis()
...