xxxxxxxxxx
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
body {
font: "Open Sans", Helvetica, sans-serif;
}
.container {
width: 1050px;
}
h1 {
weight: 600;
font-size: 26px;
padding: 0px 0 5px 0;
line-height: 1.2em;
color: #000;
margin-bottom: 0px;
}
#lead {
clear: both;
width: 600px;
}
#lead p {
color: #444;
font-family: Georgia, "Palatino", serif;
font-size: 1.0em;
line-height: 1.4em;
}
.chart {
float: left;
padding-right: 5px;
padding-bottom: 5px;
padding-top:0;
padding-left:0;
}
svg {
font-size: 9px;
font-weight: 300;
}
.background {
fill: none;
}
.area {
fill: #D6C789;
opacity: 0.5;
}
.line {
fill: none;
stroke: #696141;
stroke-width: 0.7px;
}
.title {
font-size: 12px;
}
.axis line, .grid line {
stroke-width: .5px;
shape-rendering: crispEdges;
stroke: #fff;
opacity: 0.5;
pointer-events: none;
}
.axis path {
display: none;
}
.hidden {
display:none;
opacity: 0.0;
}
#button-wrap {
width: 220px;
margin-left: auto;
margin-right: auto;
height: 40px;
margin-bottom: 10px;
padding-left: 5px;
}
.button {
cursor: pointer;
float: left;
width: 100px;
height: 30px;
text-align: center;
background: #fcfcfc;
border: 1px solid #cecece;
display: block;
padding-top: 5px;
margin-top: 10px;
border-radius: 5px 5px 5px 5px;
}
.button.active {
box-shadow: inset 0px 0px 7px rgba(0,0,0,0.18);
pointer-events: none;
background-color: rgba(230,222,182,0.5);
}
#count {
border-radius: 5px 0px 0px 5px;
}
#name {
border-radius: 0px 5px 5px 0px;
}
</style>
</head>
<body>
<div class="container">
<h1>Deaths in children aged under 5 (per 1,000 live births), caused by diarrhoeal diseases</h1>
<div id="lead">
<p>Data Source: WHO.</p>
</div>
<div id="main">
<div id="button-wrap">
<div id="count" class="button active">COUNT</div>
<div id="country" class="button">COUNTRY</div>
</div>
<div id="vis"></div>
</div>
</div> <!--! end of #container -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="isotope.pkgd.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">
var width = 150;
var height = 120;
var margin = { top: 15, right: 20, bottom: 40, left: 40 };
var data = [];
var circle = null;
var caption = null;
var curYear = null;
var bisect = d3.bisector(function(d) {
return d.date;
}).left;
var format = d3.time.format("%Y");
var xScale = d3.time.scale().range([0, width]);
var yScale = d3.scale.linear().range([height, 0]);
var xValue = function(d) {
return d.date;
};
var yValue = function(d) {
return d.count;
};
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(3)
.outerTickSize(0)
.tickSubdivide(1)
.tickSize(-width);
var area = d3.svg.area().x(function(d) {
return xScale(xValue(d));
}).y0(height).y1(function(d) {
return yScale(yValue(d));
});
var line = d3.svg.line().x(function(d) {
return xScale(xValue(d));
}).y(function(d) {
return yScale(yValue(d));
});
function setupScales(data) {
var extentX, maxY;
maxY = d3.max(data, function(c) {
return d3.max(c.values, function(d) {
return yValue(d);
});
});
maxY = maxY + (maxY * 1 / 4);
yScale.domain([0, maxY]);
extentX = d3.extent(data[0].values, function(d) {
return xValue(d);
});
return xScale.domain(extentX);
}
function transformData(rawData) {
var format, nest;
format = d3.time.format("%Y");
rawData.forEach(function(d) {
d.date = format.parse(d.year);
d.count = +d["diarrhoeal_diseases"];
});
nest = d3.nest().key(function(d) {
return d.country;
}).sortValues(function(a, b) {
return d3.ascending(a.date, b.date);
}).entries(rawData);
nest = nest.filter(function(d) {
return d.values.length == 14;
});
return nest;
}
function setupIsotope() {
$("#vis").isotope({
itemSelector: '.chart',
layaoutMode: 'fitRows',
getSortData: {
count: function(e) {
var d, sum;
d = d3.select(e).datum();
sum = d3.sum(d.values, function(d) {
return d.count;
});
return sum * -1;
},
country: function(e) {
var d;
d = d3.select(e).datum();
return d.key;
}
}
});
return $("#vis").isotope({
sortBy: 'count'
});
}
d3.csv("diarrhoeal.csv", function(error, rawData) {
if (error) {
console.log(error);
};
var data = transformData(rawData);
d3.select("#vis").datum(data).each(function(myData) {
data = myData;
setupScales(data);
var div = d3.select(this).selectAll(".chart").data(data);
div.enter()
.append("div")
.attr("class", "chart")
.append("svg")
.append("g");
var svg = div.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var g = svg.select("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
g.append("rect")
.attr("class", "background")
.style("pointer-events", "all")
.attr("width", width)
.attr("height", height)
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);
var lines = g.append("g");
lines.append("path")
.attr("class", "area")
.style("pointer-events", "none")
.attr("d", function(c) {
return area(c.values);
});
lines.append("path")
.attr("class", "line")
.style("pointer-events", "none")
.attr("d", function(c) {
return line(c.values);
});
lines.append("text")
.attr("class", "title")
.attr("text-anchor", "middle")
.attr("y", height)
.attr("dy", margin.bottom / 2 + 10)
.attr("x", width / 2).text(function(c) {
return c.key;
});
lines.append("text")
.attr("class", "static_year")
.attr("text-anchor", "start")
.style("pointer-events", "none")
.attr("dy", 13).attr("y", height)
.attr("x", 0).text(function(c) {
return xValue(c.values[1]).getFullYear();
});
lines.append("text")
.attr("class", "static_year")
.attr("text-anchor", "end")
.style("pointer-events", "none").attr("dy", 13)
.attr("y", height).attr("x", width).text(function(c) {
return xValue(c.values[c.values.length - 1]).getFullYear();
});
circle = lines.append("circle")
.attr("r", 2.5)
.attr("opacity", 0)
.attr("fill", "#696141")
.style("pointer-events", "none");
caption = lines.append("text")
.attr("class", "caption")
.attr("text-anchor", "middle")
.style("pointer-events", "none")
.attr("dy", -10);
curYear = lines.append("text")
.attr("class", "caption")
.attr("text-anchor", "middle")
.style("pointer-events", "none")
.attr("dy", 13)
.attr("y", height);
g.append("g")
.attr("class", "y axis")
.call(yAxis)
.selectAll("text")
.attr("dy", ".1em")
.attr("x", -11)
.style("text-anchor", "end");
}); // end of charts for each row
function mouseover() {
circle.attr("opacity", 1.0);
d3.selectAll(".static_year").classed("hidden", true);
return mousemove.call(this);
};
function mousemove() {
var date, index, year;
year = xScale.invert(d3.mouse(this)[0]).getFullYear();
date = format.parse('' + year);
index = 0;
circle.attr("cx", xScale(date)).attr("cy", function(c) {
index = bisect(c.values, date, 0, c.values.length - 0);
return yScale(yValue(c.values[index]));
});
caption.attr("x", xScale(date)).attr("y", function(c) {
return yScale(yValue(c.values[index]));
}).text(function(c) {
return yValue(c.values[index]);
});
return curYear.attr("x", xScale(date)).text(year);
};
function mouseout() {
d3.selectAll(".static_year").classed("hidden", false);
circle.attr("opacity", 0);
caption.text("");
return curYear.text("");
};
setupIsotope();
d3.select("#button-wrap").selectAll("div").on("click", function() {
var id;
id = d3.select(this).attr("id");
d3.select("#button-wrap").selectAll("div").classed("active", false);
d3.select("#" + id).classed("active", true);
return $("#vis").isotope({
sortBy: id
});
});
});
</script>
</body>
</html>
Modified http://code.jquery.com/jquery-1.7.2.min.js to a secure url
https://code.jquery.com/jquery-1.7.2.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js