Skip to content

Instantly share code, notes, and snippets.

@yan2014

yan2014/index.html

Last active October 22, 2015 18:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yan2014/8d425b635b2e1f5673c1 to your computer and use it in GitHub Desktop.
Save yan2014/8d425b635b2e1f5673c1 to your computer and use it in GitHub Desktop.
Download ZIP
Week 6: My Line Plot
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primary Education</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
</head>
<body>
<div>
<h1>Under Five Mortality Rate</h1>
<p>Yemen is the country who has the biggest standard deviation, which means that the mortality rates (in 1970,1990,2000,2013) are farther away from the mean, on average. </p>
<p>
The line with label represents Yemen. It shows that the mortality rate is decreasing in Yemen. As we mentioned before, the standard deviation is biggest in Yemen. We may conclude that Yemen is the country that had the greatest decreasing power. It might be a country that we want to explore more on their strategies to decrease mortality rate.
</p>
<p>Data source: <a href="http://www.unicef.org/statistics/index_countrystats.html">http://www.unicef.org/statistics/index_countrystats.html</a></p>
</div>
</body>
<script src="main.js"></script>
</html>
Raw
main.css
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
.axis path,
.axis line {
fill: none;
stroke: black;
stroke-width: 1px;
}
.line {
fill: none;
stroke: gray;
fill: none;
stroke-width: 1px;
stroke-opacity: 80%;
}
.line1 {
fill: none;
stroke: red;
fill: none;
stroke-width: 1px;
stroke-opacity: 80%;
}
.line.unfocused{
stroke-opacity: 40%;
}
.line.focused {
fill: none;
stroke-width: 2px;
stroke-opacity: 100%;
stroke: black;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.tooltip {
position: absolute;
z-index: 10;
}
.tooltip p {
background-color: white;
border: none;
padding: 2px;
}
Raw
main.js
/**
* Created by shiyan on 10/1/15.
*/
//Dimensions and padding
var width = 700;
var height = 600;
var margin = {top: 20, right: 10, bottom: 40, left:100};
//Set up date formatting and years
var dateFormat = d3.time.format("%Y");
//Set up scales
var xScale = d3.time.scale()
.range([ margin.left, width - margin.right - margin.left ]);
var yScale = d3.scale.linear()
.range([ margin.top, height - margin.bottom ]);
//Configure axis generators
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(4)
.tickFormat(function(d) {
return dateFormat(d);
})
.innerTickSize([0]);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.innerTickSize([0]);
//Configure line generator
// each line dataset must have a d.year and a d.mortalityRate for this to work.
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.year));
})
.y(function(d) {
return yScale(+d.mortalityRate);
});
// 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("body")
.append("svg")
.attr("width", width)
.attr("height", height);
//Load data
d3.csv("under 5 mortality rate.csv", function(data) {
//Note that this is an array of objects. Each object
var years = ["1970","1990","2000","2013"]
//Create a new, empty array to hold our restructured dataset
var dataset = [];
//Loop once for each row in data
data.forEach(function (d, i) {
var mortalityRates = [];
//Loop through all the years
years.forEach(function (y) {
// If value is not empty
if (d[y]) {
//Add a new object to the new mortalityRate data array
mortalityRates.push({
year: y,
mortalityRate: d[y] // this is the value for, for example, d["2004"]
});
}
});
//Create new object with this country's name and empty array
// d is the current data row... from data.forEach above.
dataset.push( {
country: d.country,
mortality: mortalityRates // we just built this!
} );
});
//Uncomment to log the original data to the console
// console.log(data);
//Uncomment to log the newly restructured dataset to the console
console.log(dataset);
//Set scale domains - max and min of the years
xScale.domain(
d3.extent(years, function(d) {
return dateFormat.parse(d);
}));
yScale.domain([
d3.max(dataset, function(d) {
return d3.max(d.mortality, function(d) {
return +d.mortalityRate;
});
}),
0
]);
//Make a group for each country
var groups = svg.selectAll("g.lines")
.data(dataset)
.enter()
.append("g")
.attr("class", "lines");
//style lines with the biggest standard deviation
var statisticData=[];
dataset.forEach(function(d,i){
var j=d.mortality.length;
var temp=[];
for(var k=0;k<j-1;k++){temp.push(d.mortality[k].mortalityRate);}
statisticData.push(d3.deviation(temp));
})
console.log(statisticData);
//get the index of the country with biggest standard deviation
var most=Math.max.apply(Math, statisticData);
console.log(most);
var index=0;
dataset.forEach(function(d, i){
var j=d.mortality.length;
var temp=[];
for(var k=0;k<j-1;k++){temp.push(d.mortality[k].mortalityRate);}
if((d3.deviation(temp))===most){index=i;}
}
);
console.log(index);
groups.append("text")
.datum(function(d,i) {
return {name: d.country, mortality: d.mortality[d.mortality.length - 1]};
})
.attr("transform", function(d) {
if (d.mortality) {
return "translate(" + xScale(dateFormat.parse(d.mortality.year)) + "," + yScale(+d.mortality.mortalityRate) + ")";
}
else {
return null;
}
})
.attr("x", 3)
.attr("dy", ".35em")
.text(function(d,i) { if (index===i) { return d.name; }});
//Within each group, create a new line/path,
//binding just the mortality data to each one
groups.selectAll("path")
.data(function(d) { // because there's a group with data already...
return [ d.mortality ]; // it has to be an array for the line function
})
.enter()
.append("path")
.attr("class", function(d,i){if(i===index) {return "line1";}else{return "line";}})
.attr("d", line);
//Axes
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);
// here we add the mouseover and mouseout effect, and use the id we created to style it.
// this is on the g elements, because the country name is in the data there.
// the line itself has data of an array of x,y values.
d3.selectAll("g.lines")
// .attr("class", function(d,i){if(i===index) {return "line1";}else{return "line";}})
.on("mouseover", mouseoverFunc)
.on("mouseout", mouseoutFunc)
.on("mousemove", mousemoveFunc); // this version calls a named function.
}); // end of data csv
function mouseoverFunc(d) {
// line styling:
// this is the g element. select it, then the line inside it!
//console.log(d, this);
d3.selectAll("path.line").classed("unfocused", true);
// now undo the unfocus on the current line and set to focused.
d3.select(this).select("path.line").classed("unfocused", false).classed("focused", true);
tooltip
.style("display", null) // this removes the display none setting from it
.html("<p>" + d.country + "</p>");
}
function mouseoutFunc() {
// this removes special classes for focusing from all lines. Back to default.
d3.selectAll("path.line").classed("unfocused", false).classed("focused", false);
tooltip.style("display", "none"); // this sets it to invisible!
}
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");
}
Raw
under 5 mortality rate.csv
country 1970 1990 2000 2013
Afghanistan 309 179 136 97
Algeria 245 47 40 25
Argentina 73 28 20 13
Australia 21 9 6 4
Austria 29 10 6 4
Bahamas 31 24 16 13
Bahrain 76 23 13 6
Bangladesh 224 144 88 41
Barbados 48 18 16 14
Belgium 24 10 6 4
Belize 96 40 25 17
Benin 266 179 146 85
Bhutan 273 134 79 36
Bolivia (Plurinational State of) 231 123 77 39
Botswana 122 50 85 47
Brazil 132 62 33 14
Bulgaria 39 22 21 12
Burkina Faso 321 202 186 98
Burundi 248 171 149 83
Cabo Verde 161 63 35 26
Cameroon 212 136 151 95
Canada 22 8 6 5
Central African Republic 216 177 174 139
Chad 272 215 191 148
Chile 79 19 11 8
China 113 54 37 13
Colombia 97 35 25 17
Comoros 226 125 101 78
Congo 153 92 121 49
Cook Islands 52 24 17 9
Costa Rica 76 17 13 10
C0sta Ricadsc 241 152 146 100
Cuba 43 13 8 6
Democratic Republic of the Congo 267 176 176 119
Denmark 17 9 6 4
Dominica 64 17 16 11
Dominican Republic 121 60 41 28
Ecuador 138 57 34 23
Egypt 240 85 45 22
El Salvador 155 60 32 16
Eritrea 217 151 89 50
Ethiopia 240 205 146 64
Fiji 55 30 24 24
Finland 16 7 4 3
France 18 9 5 4
Gambia 302 170 119 74
Germany 26 9 5 4
Ghana 201 128 101 78
Greece 38 13 8 4
Guatemala 174 81 51 31
Guinea 326 238 170 101
Guinea-Bissau 277 225 181 124
Guyana 74 61 49 37
Haiti 249 145 104 73
Honduras 146 59 38 22
Hungary 43 19 11 6
Iceland 16 6 4 2
India 213 126 91 53
Indonesia 167 84 52 29
Iran (Islamic Republic of) 227 57 35 17
Iraq 116 53 45 34
Ireland 22 9 7 4
Italy 34 10 6 4
Jamaica 57 30 24 17
Japan 18 6 5 3
Jordan 90 37 28 19
Kenya 148 99 111 71
Kiribati 140 95 71 58
Kuwait 71 17 13 10
Kyrgyzstan 120 66 49 24
Lebanon 62 32 20 9
Lesotho 176 86 115 98
Liberia 282 248 175 71
Libya 137 42 28 15
Lithuania 25 17 12 5
Luxembourg 22 9 5 2
Madagascar 166 161 111 56
Malawi 344 245 174 68
Malaysia 56 17 10 9
Maldives 262 94 44 10
Mali 398 254 220 123
Malta 28 11 8 6
Marshall Islands 87 50 42 38
Mauritania 195 118 113 90
Mauritius 83 23 19 14
Mexico 108 46 26 15
Morocco 190 81 51 30
Mozambique 271 237 169 87
Myanmar 178 109 80 51
Namibia 98 74 76 50
Nepal 271 142 82 40
Netherlands 16 8 6 4
New Zealand 21 11 7 6
Nicaragua 174 67 40 24
Niger 325 327 227 104
Nigeria 287 213 188 117
Norway 16 9 5 3
Oman 229 39 17 11
Pakistan 188 139 113 86
Panama 68 31 26 18
Papua New Guinea 144 89 78 61
Paraguay 78 46 34 22
Peru 164 80 40 17
Philippines 84 59 40 30
Poland 36 17 9 5
Portugal 68 15 7 4
Qatar 66 21 12 8
Republic of Korea 52 7 6 4
Romania 66 38 27 12
Russian Federation 45 26 23 10
Rwanda 217 152 182 52
Saint Kitts and Nevis 70 29 18 10
Saint Lucia 75 23 18 15
Saint Vincent and the Grenadines 81 25 22 19
Sao Tome and Principe 88 110 89 51
Senegal 290 141 137 55
Seychelles 72 17 14 14
Sierra Leone 339 268 232 161
Singapore 27 8 4 3
Solomon Islands 107 39 34 30
South Sudan 328 253 183 99
Spain 29 11 7 4
Sri Lanka 71 21 16 10
Sudan 155 128 108 77
Swaziland 170 74 123 80
Sweden 13 7 4 3
Switzerland 18 8 6 4
Syrian Arab Republic 105 37 23 15
Thailand 99 37 23 13
Togo 226 146 122 85
Tonga 51 23 18 12
Trinidad and Tobago 52 31 29 21
Tunisia 179 52 31 15
Turkey 187 74 42 19
Uganda 184 179 147 66
United Arab Emirates 98 17 11 8
United Kingdom 21 9 7 5
United Republic of Tanzania 214 167 132 52
United States 23 11 8 7
Uruguay 54 23 17 11
Vanuatu 109 33 23 17
Venezuela (Bolivarian Republic of) 62 30 21 15
Viet Nam 88 51 35 24
Yemen 323 125 96 51
Zambia 181 193 169 87
Zimbabwe 113 75 103 89
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment