Data Visualization Project Code
- 1. <!DOCTYPE html>
<meta charset="utf-8">
<head>
<style type = "text/css">
.header {
height:100px;
background:#FFF;
width:1250px;
margin:0px auto;
text-align: center;
padding-top: 50px;
font-size:50px;
font-family: sans-serif;
font-weight: bold;
}
.decoration {
height: 30px;
background: #02818a;
opacity: .9;
width: 1250px;
}
#button1 {
display: inline-block;
}
#button2 {
display: inline-block;
}
#button3 {
display: inline-block;
}
.space2 {
height: 20px;
}
.space3 {
height: 20px;
background-color: gray;
}
.countries {
fill: none;
}
.country {
fill: none;
stroke: #989898;
stroke-linejoin: round;
}
- 2. .q0-5 { fill:rgb(252,187,161); }
.q1-5 { fill:rgb(252,146,114); }
.q2-5 { fill:rgb(251,106,74); }
.q3-5 { fill:rgb(222,45,38); }
.q4-5 { fill:rgb(165,15,21); }
.q0-5:hover {
opacity: 0.3;
}
.q1-5:hover {
opacity: 0.3;
}
.q2-5:hover {
opacity: 0.3;
}
.q3-5:hover {
opacity: 0.3;
}
.q4-5:hover {
opacity: 0.3;
}
.p0-8 { fill:rgb(253,224,221); }
.p1-8 { fill:rgb(252,197,192); }
.p2-8 { fill:rgb(250,159,181); }
.p3-8 { fill:rgb(247,104,161); }
.p4-8 { fill:rgb(221,52,151); }
.p5-8 { fill:rgb(174,1,126); }
.p6-8 { fill:rgb(122,1,119); }
.p7-8 { fill:rgb(73,0,106); }
.p0-8:hover {
opacity: 0.3;
}
.p1-8:hover {
opacity: 0.3;
}
.p2-8:hover {
opacity: 0.3;
}
.p3-8:hover {
opacity: 0.3;
}
.p4-8:hover {
opacity: 0.3;
- 3. }
.p5-8:hover {
opacity: 0.3;
}
.p6-8:hover {
opacity: 0.3;
}
.p7-8:hover {
opacity: 0.3;
}
.r0-8 { fill:rgb(237,248,177); }
.r1-8 { fill:rgb(199,233,180); }
.r2-8 { fill:rgb(127,205,187); }
.r3-8 { fill:rgb(65,182,196); }
.r4-8 { fill:rgb(29,145,192); }
.r5-8 { fill:rgb(34,94,168); }
.r6-8 { fill:rgb(37,52,148); }
.r7-8 { fill:rgb(8,29,88); }
.r0-8:hover {
opacity: 0.3;
}
.r1-8:hover {
opacity: 0.3;
}
.r2-8:hover {
opacity: 0.3;
}
.r3-8:hover {
opacity: 0.3;
}
.r4-8:hover {
opacity: 0.3;
}
.r5-8:hover {
opacity: 0.3;
}
.r6-8:hover {
opacity: 0.3;
}
.r7-8:hover {
opacity: 0.3;
}
- 4. .s0-5 { fill:rgb(208,209,230); }
.s1-5 { fill:rgb(166,189,219); }
.s2-5 { fill:rgb(103,169,207); }
.s3-5 { fill:rgb(28,144,153); }
.s4-5 { fill:rgb(1,108,89); }
.s0-5:hover {
opacity: 0.3;
}
.s1-5:hover {
opacity: 0.3;
}
.s2-5:hover {
opacity: 0.3;
}
.s3-5:hover {
opacity: 0.3;
}
.s4-5:hover {
opacity: 0.3;
}
.t0-5 { fill:rgb(217,240,163); }
.t1-5 { fill:rgb(173,221,142); }
.t2-5 { fill:rgb(120,198,121); }
.t3-5 { fill:rgb(49,163,84); }
.t4-5 { fill:rgb(0,104,55); }
.t0-5:hover {
opacity: 0.3;
}
.t1-5:hover {
opacity: 0.3;
}
.t2-5:hover {
opacity: 0.3;
}
.t3-5:hover {
opacity: 0.3;
}
.t4-5:hover {
opacity: 0.3;
}
.u0-5 { fill:rgb(198,219,239); }
- 5. .u1-5 { fill:rgb(158,202,225); }
.u2-5 { fill:rgb(107,174,214); }
.u3-5 { fill:rgb(49,130,189); }
.u4-5 { fill:rgb(8,81,156); }
.u0-5:hover {
opacity: 0.3;
}
.u1-5:hover {
opacity: 0.3;
}
.u2-5:hover {
opacity: 0.3;
}
.u3-5:hover {
opacity: 0.3;
}
.u4-5:hover {
opacity: 0.3;
}
#tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
border-radius: 10px;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
- 6. .bar:hover {
fill: brown;
}
.axis {
font: 9px sans-serif;
}
</style>
</head>
<body>
<div class="header">Visual Analytics Project: Gender Equality</div>
<div class="space1"></div>
<div class="decoration"></div>
<div class="space2"></div>
<div style="text-align:center;">
<div id="button1">
<input name="updateButton"
type="button"
value="Gender Inequality Index"
onclick="updateDataGII(); updateBarChartGII();" />
</div>
<div id="button2">
<input name="updateButton"
type="button"
value="Maternal Mortality"
onclick="updateDataMMR(); updateBarChartMMR();" />
</div>
<div id="button3">
<input name="updateButton"
type="button"
value="Adolescent Birth Rate"
onclick="updateDataABR(); updateBarChartABR();" />
</div>
<div id="button4">
<input name="updateButton"
type="button"
value="Female Labor Participation Rate"
onclick="updateDataFLP(); updateBarChartFLP();" />
</div>
<div id="button5">
<input name="updateButton"
type="button"
value="Secondary Education"
onclick="updateDataFSE(); updateBarChartFSE();" />
</div>
<div id="button6">
<input name="updateButton"
- 7. type="button"
value="Parlimentary Representation"
onclick="updateDataFPR(); updateBarChartFPR();" />
</div>
</div>
<div class="space2"></div>
<div id="tooltip" class="hidden"></div>
<div class="space3"></div>
<script src="d3.js"></script>
<script src="queue.js"></script>
<script src="topojson.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<script>
var width = 1250,
height = 600;
var rateById = d3.map();
var quantizeGII = d3.scale.quantize()
.domain([0, 1])
.range(d3.range(5).map(function(i) { return "q" + i + "-5"; }));
var quantizeMMR = d3.scale.quantize()
.domain([0, 1000])
.range(d3.range(8).map(function(i) { return "p" + i + "-8"; }));
var quantizeABR = d3.scale.quantize()
.domain([0, 205])
.range(d3.range(8).map(function(i) { return "r" + i + "-8"; }));
var quantizeFLP = d3.scale.quantize()
.domain([0, 1])
.range(d3.range(5).map(function(i) { return "s" + i + "-5"; }));
var quantizeFSE = d3.scale.quantize()
.domain([0, 1])
.range(d3.range(5).map(function(i) { return "t" + i + "-5"; }));
var quantizeFPR = d3.scale.quantize()
.domain([0, 0.55])
.range(d3.range(5).map(function(i) { return "u" + i + "-5"; }));
var projection = d3.geo.mercator()
.scale(200)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
- 8. .projection(projection);
var map = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
queue()
.defer(d3.json, "countries.topo.json")
.defer(d3.csv, "genderinequality2013.csv", function(d) { rateById.set(d["Country Code"],
+d["Gender Inequality 2013"]); })
.await(ready);
function ready(error, countries, genderinequality2013) {
if (error) throw error;
map.append("g")
.attr("class", "countries")
.selectAll("path")
.data(topojson.feature(countries, countries.objects.countries).features)
.enter().append("path")
.attr("class", function(d) { return quantizeGII(rateById.get(d.id)); })
.attr("id", function(d) {return d.id; })
.attr("d", path);
map.append("path")
.datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !==
b["Country Code"]; }))
.attr("class", "country")
.attr("d", path);
}
function updateDataGII() {
queue()
.defer(d3.json, "countries.topo.json")
.defer(d3.csv, "genderinequality2013.csv", function(d) { rateById.set(d["Country Code"],
+d["Gender Inequality 2013"]); })
.await(ready);
function ready(error, countries, genderinequality2013) {
if (error) throw error;
map.append("g")
.attr("class", "countries")
.selectAll("path")
.data(topojson.feature(countries, countries.objects.countries).features)
.enter().append("path")
.attr("class", function(d) { return quantizeGII(rateById.get(d.id)); })
.attr("d", path);
- 9. map.append("path")
.datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !==
b["Country Code"]; }))
.attr("class", "country")
.attr("d", path);
}
};
function updateDataMMR() {
queue()
.defer(d3.json, "countries.topo.json")
.defer(d3.csv, "maternalmortality2013.csv", function(d) { rateById.set(d["Country Code"],
+d.maternalMortality); })
.await(ready);
function ready(error, countries, maternalmortality2013) {
if (error) throw error;
map.append("g")
.attr("class", "countries")
.selectAll("path")
.data(topojson.feature(countries, countries.objects.countries).features)
.enter().append("path")
.attr("class", function(d) { return quantizeMMR(rateById.get(d.id)); })
.attr("d", path);
map.append("path")
.datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !==
b["Country Code"]; }))
.attr("class", "country")
.attr("d", path);
}
};
function updateDataABR() {
queue()
.defer(d3.json, "countries.topo.json")
.defer(d3.csv, "adolescentbirthrate2013.csv", function(d) { rateById.set(d["Country Code"],
+d.adolescentBirths); })
.await(ready);
function ready(error, countries, adolescentbirthrate2013) {
if (error) throw error;
map.append("g")
.attr("class", "countries")
.selectAll("path")
.data(topojson.feature(countries, countries.objects.countries).features)
- 10. .enter().append("path")
.attr("class", function(d) { return quantizeABR(rateById.get(d.id)); })
.attr("d", path);
map.append("path")
.datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !==
b["Country Code"]; }))
.attr("class", "country")
.attr("d", path);
}
};
function updateDataFLP() {
queue()
.defer(d3.json, "countries.topo.json")
.defer(d3.csv, "femalelaborparticipation2013.csv", function(d) { rateById.set(d["Country Code"],
+d.femaleLaborPar); })
.await(ready);
function ready(error, countries, femalelaborparticipation2013) {
if (error) throw error;
map.append("g")
.attr("class", "countries")
.selectAll("path")
.data(topojson.feature(countries, countries.objects.countries).features)
.enter().append("path")
.attr("class", function(d) { return quantizeFLP(rateById.get(d.id)); })
.attr("d", path);
map.append("path")
.datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !==
b["Country Code"]; }))
.attr("class", "country")
.attr("d", path);
}
};
function updateDataFSE() {
queue()
.defer(d3.json, "countries.topo.json")
.defer(d3.csv, "femalese2013.csv", function(d) { rateById.set(d["Country Code"], +d.femaleSE); })
.await(ready);
function ready(error, countries, femalese2013) {
if (error) throw error;
map.append("g")
- 11. .attr("class", "countries")
.selectAll("path")
.data(topojson.feature(countries, countries.objects.countries).features)
.enter().append("path")
.attr("class", function(d) { return quantizeFSE(rateById.get(d.id)); })
.attr("d", path);
map.append("path")
.datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !==
b["Country Code"]; }))
.attr("class", "country")
.attr("d", path);
}
};
function updateDataFPR() {
queue()
.defer(d3.json, "countries.topo.json")
.defer(d3.csv, "femalepr2013.csv", function(d) { rateById.set(d["Country Code"], +d.femalePR); })
.await(ready);
function ready(error, countries, femalepr2013) {
if (error) throw error;
map.append("g")
.attr("class", "countries")
.selectAll("path")
.data(topojson.feature(countries, countries.objects.countries).features)
.enter().append("path")
.attr("class", function(d) { return quantizeFPR(rateById.get(d.id)); })
.attr("d", path);
map.append("path")
.datum(topojson.mesh(countries, countries.objects.countries, function(a, b) { return a.id !==
b["Country Code"]; }))
.attr("class", "country")
.attr("d", path);
}
};
var margin = {top: 50, right: 40, bottom: 40, left: 60},
width = 1250 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var colorGII = d3.scale.ordinal()
.range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7",
"#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#bebada", "#bebada",
"#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#fb8072", "#fb8072", "#fb8072",
- 12. "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3",
"#80b1d3", "#80b1d3", "#80b1d3"]);
var colorMMR = d3.scale.ordinal()
.range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7",
"#8dd3c7", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462",
"#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada",
"#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#80b1d3",
"#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3"]);
var colorABR = d3.scale.ordinal()
.range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7",
"#8dd3c7", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462",
"#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada",
"#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#80b1d3",
"#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3"]);
var colorFLP = d3.scale.ordinal()
.range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7",
"#8dd3c7", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462",
"#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada",
"#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#80b1d3",
"#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3"]);
var colorFSE = d3.scale.ordinal()
.range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7",
"#8dd3c7", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462",
"#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#bebada",
"#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#fb8072", "#80b1d3",
"#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3"]);
var colorFPR = d3.scale.ordinal()
.range(["#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7", "#8dd3c7",
"#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#fdb462", "#bebada", "#bebada",
"#bebada", "#bebada", "#bebada", "#bebada", "#bebada", "#fb8072", "#fb8072", "#fb8072",
"#fb8072", "#fb8072", "#fb8072", "#fb8072", "#80b1d3", "#80b1d3", "#80b1d3", "#80b1d3",
"#80b1d3", "#80b1d3", "#80b1d3"]);
var legendColor = d3.scale.ordinal()
.range(["#8dd3c7", "#fdb462", "#bebada", "#fb8072", "#80b1d3"]);
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .25);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
- 13. .orient("left")
.ticks(10);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("barchartgii.csv", function(error, data) {
if (error) throw error;
d3.csv("barchartlegend.csv", function(error, datalegend) {
if (error) throw error;
x.domain(data.map(function(d) { return d.region; }));
y.domain([0, d3.max(data, function(d) { return d.gii; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class","bar")
.attr("x", function(d) { return x(d.region); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.gii); })
.attr("height", function(d) { return height - y(d.gii); })
.style("fill", function(d) { return colorGII(d.region); });
var legend = svg.selectAll(".legend")
.data(datalegend)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d) {return legendColor(d.name)});
- 14. legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function (d) { return d.name});
})
});
function updateBarChartGII () {
d3.csv("barchartgii.csv", function(error, data) {
if (error) throw error;
x.domain(data.map(function(d) { return d.region; }));
y.domain([0, d3.max(data, function(d) { return d.gii; })]);
svg.selectAll(".bar").remove();
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class","bar")
.attr("x", function(d) { return x(d.region); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.gii); })
.attr("height", function(d) { return height - y(d.gii); })
.style("fill", function(d) { return colorGII(d.region); });
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
//Update Y axis
svg.select(".y.axis")
.transition()
.duration(1000)
.call(yAxis);
});
}
function updateBarChartMMR () {
d3.csv("barchartmmr2.csv", function(error, data) {
if (error) throw error;
x.domain(data.map(function(d) { return d.region; }));
- 15. y.domain([0, 750]);
svg.selectAll(".bar").remove();
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class","bar")
.attr("x", function(d) {
return x(d.region);
})
.attr("width", x.rangeBand())
.attr("y", function(d) {
return y(d.mmr);
})
.attr("height", function(d) {
return height - y(d.mmr);
})
.style("fill", function(d) {
return colorMMR(d.region);
});
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
svg.select(".y.axis")
.transition()
.duration(1000)
.call(yAxis);
});
}
function updateBarChartABR () {
d3.csv("barchartabr.csv", function(error, data) {
if (error) throw error;
x.domain(data.map(function(d) { return d.region; }));
y.domain([0, 150]);
svg.selectAll(".bar").remove();
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class","bar")
.attr("x", function(d) { return x(d.region); })
- 16. .attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.abr); })
.attr("height", function(d) { return height - y(d.abr); })
.style("fill", function(d) { return colorABR(d.region); });
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
svg.select(".y.axis")
.transition()
.duration(1000)
.call(yAxis);
});
}
function updateBarChartFLP () {
d3.csv("barchartlaborpar.csv", function(error, data) {
if (error) throw error;
x.domain(data.map(function(d) { return d.region; }));
y.domain([0, 1]);
svg.selectAll(".bar").remove();
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class","bar")
.attr("x", function(d) { return x(d.region); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.laborpar); })
.attr("height", function(d) { return height - y(d.laborpar); })
.style("fill", function(d) { return colorFLP(d.region); });
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
//Update Y axis
svg.select(".y.axis")
.transition()
.duration(1000)
.call(yAxis);
- 17. });
}
function updateBarChartFSE () {
d3.csv("barchartse.csv", function(error, data) {
if (error) throw error;
x.domain(data.map(function(d) { return d.region; }));
y.domain([0, d3.max(data, function(d) { return d.sefemale; })]);
svg.selectAll(".bar").remove();
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class","bar")
.attr("x", function(d) { return x(d.region); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.sefemale); })
.attr("height", function(d) { return height - y(d.sefemale); })
.style("fill", function(d) { return colorFLP(d.region); });
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
//Update Y axis
svg.select(".y.axis")
.transition()
.duration(1000)
.call(yAxis);
});
}
function updateBarChartFPR () {
d3.csv("barchartpr.csv", function(error, data) {
if (error) throw error;
x.domain(data.map(function(d) { return d.region; }));
y.domain([0, 0.5]);
svg.selectAll(".bar").remove();
