xxxxxxxxxx
<!-- Modification of an example by Scott Murray from Knight D3 course -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Line Chart with Multiple Data Sets, Transitions</title>
<!-- this is the cdn link to bootstrap's css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
body {
background-color: white;
font-family: "Open Sans", Arial, sans-serif;
}
h1 {
font-size: 24px;
font-weight: 600;
color: rgba(0, 153, 255, 1);
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
.selected {
background-color: rgba(0, 153, 255, 0.7);
}
svg {
background-color: white;
}
.dots {
fill: rgba(0,153,255,1);
opacity: 0.5;
}
.highlighted {
fill: rgba(247,148,29, 0.7);
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.xlabel{
font-size: 14px;
font-weight: normal;
}
.ylabel{
font-size: 14px;
font-weight: normal;
}
.tooltip {
position: absolute;
z-index: 10;
opacity: 1;
}
.tooltip p {
width: initial;
font-family: "Open Sans", sans-serif;
line-height: 1.4;
color: black;
font-size: 13px;
background-color: rgba(255,255,255,0.8);
border: rgba(230,230,230,1) 1px solid;
padding: 5px 7px 5px 7px;
}
/* this is an adjustment to bootstrap's row for my page */
.row {
padding-top: 50px;
}
/* this is an adjustment to bootstrap for my page */
.btn-group {
padding-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5">
<h1>Diarrhea treatment</h1>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default" id="Female">Girls vs Boys</button>
<button type="button" class="btn btn-default" id="Urban">Urban vs Rural</button>
</div>
<p>This graphic shows the percentage of children under 5 with diarrhea receiving oral rehydration salts (ORS). It compares two variables: how is applied in boys and girls and how it is applies in urban an rural areas. Every circle represents a country.</p>
<p>Source: <a href="https://www.unicef.org/">UNICEF</a></p>
<div id="svg"></div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="map_note">
<p>An example of an ORC sachet, used to avoid diarrhea among children.</p>
<img src="https://farm4.static.flickr.com/3059/2934816392_556e88a4ea_o.jpg" class="img-responsive" alt="ORC sachet" height="600" width="600">
</div>
</div>
</div>
<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script type="text/javascript">
//Dimensions and padding
var width = 700;
var height = 600;
var margin = {top: 20, right: 10, bottom: 70, left: 110};
var dotRadius = 5; // fix this to a nice value.
//Set up date formatting and years
var xScale = d3.scale.linear()
.range([ margin.left, width - margin.right - margin.left])
.domain([-2,100]);
// top to bottom, padding just in case
var yScale = d3.scale.linear()
.range([ height - margin.bottom, margin.top ])
.domain([-2,100]);
// Custom tick count if you want it.
// Create your axes here.
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(4); // fix this to a good number of ticks for your scale later.
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(4);
// add a tooltip to the page - not to the svg itself!
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip");
//Create the empty SVG image
var svg = d3.select("#svg")
.append("svg")
.attr("width", width)
.attr("height", height);
d3.csv("diarrhea.csv", function(error, data) {
// Notice what happens if you don't sort by year :)
var buttons = d3.select("body").selectAll("button");
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
// Circles in SVG have cx, cy, and r attributes. x location, y location, radius.
circles.attr("cx", function(d) {
return xScale(+d.Female);
// return the value to use for your x scale here
})
.attr("cy", function(d) {
return yScale(+d.Male);
})
.attr("class", function(d){
// highlighting some interesting outliers
if (d.Countries === "Somalia" || d.Countries === "Egypt" || d.Countries === "Sudan" || d.Countries === "Djibouti" || d.Countries === ("Costa Rica") || d.Countries === ("Solomon Islands")) {
return "highlighted";
}
else {
return "dots";
}
});
/*.append("title")
.text(function(d) {
return "In " + d.Countries + " the " + d.Female + "% of girls received treatment for diarrhea. " + "The " + d.Male + "% of boys received it.";
});*/
// adding a silly intro animation to catch the eye -- using transition:
circles.sort(function(a, b) {
return d3.ascending(+a.Female, +b.Male);
})
.transition()
.delay(function(d, i) {
return i * 10;
})
.duration(750) // milliseconds, so this is 1 second.
.ease("linear")
.attr("r", dotRadius);
// fix these translates so they use your margin and height width as needed
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (margin.left) + ",0)")
.call(yAxis);
svg.append("text")
.attr("class", "xlabel")
.attr("transform", "translate(" + (width / 2) + " ," +
(height-20) + ")")
.style("text-anchor", "middle")
.attr("dy", "1")
.text("Treatment for girls (%)");
svg.append("text")
.attr("class", "ylabel")
.attr("transform", "translate(" + margin.right + ")")
.style("text-anchor", "middle")
.attr("dx", "-250")
.attr("dy", "30")
.attr("transform", "rotate(-90)")
.text("Treatment for boys (%)");
circles
.on("mouseover", mouseoverChange3Func)
.on("mousemove", mousemoveChange3Func)
.on("mouseout", mouseoutChange3Func);
var buttons = d3.select("body").selectAll("button");
d3.select("button#Urban").on("click", function() {
circles
.transition()
.duration(750)
.ease("linear")
.attr("cx", function(d) {
return xScale(+d.Urban);
// return the value to use for your x scale here
})
.attr("cy", function(d) {
return yScale(+d.Rural);
})
// We can't transition the new title text -- must remove and rewrite.
/*circles.selectAll("title").remove();
circles
.append("title")
.text(function(d) {
return "In " + d.Countries + ", the " + d.Rural + "% of kids in urban areas received diarrhea treatment. " + "In the rural area, the " + d.Urban + "% of the kids received it.";
});*/
buttons
var thisButton = d3.select(this);
d3.selectAll("button").classed("selected", false);
thisButton.classed("selected", true);
svg.selectAll("text").remove();
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (margin.left) + ",0)")
.call(yAxis);
svg.append("text")
.attr("class", "xlabel")
.attr("transform", "translate(" + (width / 2) + " ," +
(height-20) + ")")
.style("text-anchor", "middle")
.attr("dy", "1")
.text("Treatment in rural areas (%)");
svg.append("text")
.attr("class", "ylabel")
.attr("transform", "translate(" + margin.right + " ," +
(height/2) + ")")
.style("text-anchor", "middle")
.attr("dx", "-260")
.attr("dy", "30")
.attr("transform", "rotate(-90)")
.text("Treatment in urban areas (%)");
circles
.on("mouseover", mouseoverChange2Func)
.on("mousemove", mousemoveChange2Func)
.on("mouseout", mouseoutChange2Func);
d3.selectAll("button").classed("selected", false);
thisButton.classed("selected", true);
});
d3.select("button#Female").on("click", function() {
circles
.transition()
.duration(750)
.ease("linear")
.attr("cx", function(d) {
return xScale(+d.Female);
// return the value to use for your x scale here
})
.attr("cy", function(d) {
return yScale(+d.Male);
})
.attr("id", "change2");
// We can't transition the new title text -- must remove and rewrite.
/*circles.selectAll("title").remove();
circles
.append("title")
.text(function(d) {
return "In " + d.Countries + " the " + d.Female + "% of girls received treatment for diarrhea. " + "The " + d.Male + "% of boys received it.";
});*/
buttons
var thisButton = d3.select(this);
d3.selectAll("button").classed("selected", false);
thisButton.classed("selected", true);
svg.selectAll("text").remove();
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (margin.left) + ",0)")
.call(yAxis);
svg.append("text")
.attr("class", "xlabel")
.attr("transform", "translate(" + (width / 2) + " ," +
(height-20) + ")")
.style("text-anchor", "middle")
.attr("dy", "1")
.text("Treatment for girls (%)");
svg.append("text")
.attr("class", "ylabel")
.attr("transform", "translate(" + margin.right + " ," +
(height/2) + ")")
.style("text-anchor", "middle")
.attr("dx", "-250")
.attr("dy", "30")
.attr("transform", "rotate(-90)")
.text("Treatment for boys (%)");
circles
.on("mouseover", mouseoverChange1Func)
.on("mousemove", mousemoveFunc)
.on("mouseout", mouseoutFunc);
d3.selectAll("button").classed("selected", false);
thisButton.classed("selected", true);
});
});
function mouseoverChange1Func(d) {
d3.select(this)
.transition()
.attr("r", 6);
tooltip
.style("display", null) // this removes the display none setting from it
.html("<p>" + d.Countries +
"<br><strong>" + d.Female + "%</strong> of girls received treatment" +
"<br><strong>" + d.Male + "%</strong> of boys received treatment</p>");
}
function mouseoutFunc(d) {
d3.select(this)
.transition()
.attr("r", 5);
tooltip.style("display", "none");
}
function mousemoveFunc(d) {
//console.log("events", window.event, d3.event);
tooltip
.style("top", (d3.event.pageY - 10) + "px" )
.style("left", (d3.event.pageX + 10) + "px");
}
d3.select("button#Female").classed("selected", true);
function mouseoverChange2Func(d) {
d3.select(this)
.transition()
.attr("r", 6);
tooltip
.style("display", null) // this removes the display none setting from it
.html("<p>" + d.Countries +
"<br><strong>" + d.Urban + "%</strong> of girls received treatment" +
"<br><strong>" + d.Rural + "%</strong> of boys received treatment</p>");
}
function mouseoutFunc(d) {
d3.select(this)
.transition()
.attr("r", 5);
tooltip.style("display", "none");
}
function mousemoveFunc(d) {
//console.log("events", window.event, d3.event);
tooltip
.style("top", (d3.event.pageY - 10) + "px" )
.style("left", (d3.event.pageX + 10) + "px");
}
function mouseoverChange3Func(d) {
d3.select(this)
.transition()
.attr("r", 6);
tooltip
.style("display", null) // this removes the display none setting from it
.html("<p>" + d.Countries +
"<br><strong>" + d.Female + "%</strong> of girls received treatment" +
"<br><strong>" + d.Male + "%</strong> of boys received treatment</p>");
}
function mouseoutChange3Func(d) {
d3.select(this)
.transition()
.attr("r", 5);
tooltip.style("display", "none");
}
function mousemoveChange3Func(d) {
//console.log("events", window.event, d3.event);
tooltip
.style("top", (d3.event.pageY - 10) + "px" )
.style("left", (d3.event.pageX + 10) + "px");
}
</script>
</div>
<!-- Latest compiled and minified JavaScript -->
</body>
</html>
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js