|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<!-- based on http://bl.ocks.org/mbostock/4180634 --> |
|
<style> |
|
|
|
body { |
|
background: #fcfcfa; |
|
} |
|
|
|
div.txt{ |
|
font: 14px sans-serif; |
|
background: red; |
|
|
|
} |
|
|
|
div.tooltip { |
|
position: absolute; |
|
text-align: center; |
|
width: 390px; //100px; |
|
height: 30px; //60px; |
|
padding: 4px; |
|
font: 14px sans-serif; |
|
background: #eeeeee; |
|
border: 0px; |
|
border-radius: 8px; |
|
pointer-events: none; |
|
} |
|
|
|
.stroke { |
|
fill: none; |
|
stroke: #000; |
|
stroke-width: 3px; |
|
} |
|
|
|
.fill { |
|
fill: #fff; |
|
} |
|
|
|
.graticule { |
|
fill: none; |
|
stroke: #777; |
|
stroke-width: .5px; |
|
stroke-opacity: .5; |
|
} |
|
|
|
.land { |
|
fill: #222; |
|
} |
|
|
|
.boundary { |
|
fill: none; |
|
stroke: #fff; |
|
stroke-width: .5px; |
|
} |
|
|
|
|
|
</style> |
|
<body> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script> |
|
<script src="http://d3js.org/topojson.v0.min.js"></script> |
|
<script> |
|
|
|
|
|
// quatize from example here |
|
// http://synthesis.sbecker.net/articles/2012/07/18/learning-d3-part-7-choropleth-maps |
|
|
|
var source = "data_new.csv"; |
|
console.log(source); |
|
|
|
|
|
//declare div for tooltips |
|
var div = d3.select("body").append("div") |
|
.attr("class", "tooltip") |
|
.style("opacity", 0); |
|
|
|
|
|
// idea for loading/handling data this way came from |
|
// Interactive Data Visualization for the Web |
|
// An Introduction to Designing with D3 |
|
// By Scott Murray |
|
// |
|
var one; |
|
d3.csv(source, function(data) { |
|
|
|
// planning to add multiple years, staring with one for now |
|
one = data; |
|
|
|
}); |
|
|
|
|
|
var getNum = function(d){ |
|
|
|
var m = one.filter(function(n){ |
|
var obj = n["COUNTRY_NUM"] == d.id; |
|
return obj; |
|
}); |
|
|
|
if(m[0]){ |
|
return m[0]["ALL CAUSES"] |
|
} |
|
|
|
}; |
|
|
|
var getRawCounts = function(d){ |
|
|
|
var maxWidth = 190; |
|
|
|
var m = one.filter(function(n){ |
|
var obj = n["COUNTRY_NUM"] == d.id; |
|
return obj; |
|
}); |
|
|
|
|
|
if(m[0]){ |
|
// make sure we're getting integers, instead of strings |
|
var g = parseInt(m[0]["Acute_lower_respiratory_infections"]); |
|
var h = parseInt(m[0]["Prematurity"]); |
|
var ii = parseInt(m[0]["Birth_asphyxia_and_birth_trauma"]); |
|
var c = parseInt(m[0]["Pertussis"]); |
|
var d = parseInt(m[0]["Measles"]); |
|
var e = parseInt(m[0]["Meningitis_encephalitis"]); |
|
var f = parseInt(m[0]["Malaria"]); |
|
var j = parseInt(m[0]["Sepsis_and_other_infectious_conditions_of_the_newborn"]); |
|
var k = parseInt(m[0]["Other_Group_1"]); |
|
var l = parseInt(m[0]["Congenital_anomalies"]); |
|
var mm = parseInt(m[0]["Other_noncommunicable_diseases"]); |
|
var a = parseInt(m[0]["HIV_AIDS"]); |
|
var b = parseInt(m[0]["Diarrhoeal_diseases"]); |
|
var n = parseInt(m[0]["Injuries"]); |
|
|
|
var counts = [g, h, ii, c, d, e, f, j, k, l, mm, a, b, n]; |
|
|
|
return counts; |
|
} |
|
|
|
}; |
|
|
|
var getNormalizedCounts = function(d){ |
|
|
|
var maxWidth = 190; |
|
|
|
var m = one.filter(function(n){ |
|
var obj = n["COUNTRY_NUM"] == d.id; |
|
return obj; |
|
}); |
|
|
|
|
|
if(m[0]){ |
|
// make sure we're getting integers, instead of strings |
|
var g = parseInt(m[0]["Acute_lower_respiratory_infections"]); |
|
var h = parseInt(m[0]["Prematurity"]); |
|
var ii = parseInt(m[0]["Birth_asphyxia_and_birth_trauma"]); |
|
var c = parseInt(m[0]["Pertussis"]); |
|
var d = parseInt(m[0]["Measles"]); |
|
var e = parseInt(m[0]["Meningitis_encephalitis"]); |
|
var f = parseInt(m[0]["Malaria"]); |
|
var j = parseInt(m[0]["Sepsis_and_other_infectious_conditions_of_the_newborn"]); |
|
var k = parseInt(m[0]["Other_Group_1"]); |
|
var l = parseInt(m[0]["Congenital_anomalies"]); |
|
var mm = parseInt(m[0]["Other_noncommunicable_diseases"]); |
|
var a = parseInt(m[0]["HIV_AIDS"]); |
|
var b = parseInt(m[0]["Diarrhoeal_diseases"]); |
|
var n = parseInt(m[0]["Injuries"]); |
|
|
|
var counts = [g, h, ii, c, d, e, f, j, k, l, mm, a, b, n]; |
|
|
|
|
|
// normalize the data, so it all fits on bar chart |
|
var mx = d3.max(counts); |
|
var scale = d3.scale.linear() |
|
.domain([0, mx]) |
|
.range([0, maxWidth]); |
|
|
|
for(var i = 0; i <counts.length; i++){ |
|
counts[i] = scale(counts[i]); |
|
} |
|
|
|
return counts; |
|
} |
|
|
|
}; |
|
|
|
var getLabels = function(){ |
|
var g = "Lower respiratory infection"; |
|
var h = "Prematurity"; |
|
var i = "Birth asphyxia and trauma"; |
|
var c = "Pertussis"; |
|
var d = "Measles"; |
|
var e = "Meningitis, encephalitis"; |
|
var f = "Malaria"; |
|
var j = "Sepsis, and infections"; |
|
var k = "Other, Group 1"; |
|
var l = "Congenital anomalies"; |
|
var mm = "Others, noncommunicable"; |
|
var a = "HIV/AIDS"; |
|
var b = "Diarrhoeal diseases"; |
|
var n = "Injuries"; |
|
|
|
return [g, h, i, c, d, e, f, j, k, l, mm, a, b, n]; |
|
}; |
|
|
|
var getCountryName = function(d){ |
|
var m = one.filter(function(n){ |
|
var obj = n["COUNTRY_NUM"] == d.id; |
|
return obj; |
|
}); |
|
if(m[0]){ |
|
return m[0]["COUNTRY"]; |
|
} |
|
}; |
|
|
|
var getColor = function(d){ |
|
|
|
var num = getNum(d); |
|
if(num > 1000000){ |
|
return color(6); |
|
} else if(num > 100000){ |
|
return color(5); |
|
} else if(num > 50000){ |
|
return color(4); |
|
} else if(num > 10000){ |
|
return color(3); |
|
} else if(num > 1000){ |
|
return color(2); |
|
} else if(num > 100){ |
|
return color(1); |
|
} else if(num >= 0){ |
|
return color(0); |
|
} else { |
|
// We don't have data on this country |
|
return "#CCCCCC"; |
|
} |
|
}; |
|
|
|
var getY = function(d){ |
|
var maxY = 280; |
|
if(d > maxY){ |
|
return maxY |
|
} |
|
return d; |
|
} |
|
|
|
</script> |
|
<script> |
|
|
|
var width = 960, |
|
height = 580; |
|
|
|
var color = d3.scale.ordinal() |
|
.domain([0, 1, 2, 3, 4, 5, 6, 7]) |
|
.range(["#cce5ff","#99ccff","#66b2ff","#3399ff","#0080ff","#0066cc","#003366","#004c99"]); |
|
|
|
var projection = d3.geo.kavrayskiy7() |
|
.scale(170) |
|
.translate([width / 2, height / 2]) |
|
.precision(.1); |
|
|
|
var path = d3.geo.path() |
|
.projection(projection); |
|
|
|
var graticule = d3.geo.graticule(); |
|
|
|
var chart = d3.select("body").append("svg") |
|
.attr("width", width + 200) |
|
.attr("height", height); |
|
|
|
var svg = chart.append("svg") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
|
|
svg.append("defs").append("path") |
|
.datum({type: "Sphere"}) |
|
.attr("id", "sphere") |
|
.attr("d", path); |
|
|
|
svg.append("use") |
|
.attr("class", "stroke") |
|
.attr("xlink:href", "#sphere"); |
|
|
|
svg.append("use") |
|
.attr("class", "fill") |
|
.attr("xlink:href", "#sphere"); |
|
|
|
svg.append("path") |
|
.datum(graticule) |
|
.attr("class", "graticule") |
|
.attr("d", path); |
|
|
|
//------------------------ |
|
var widthBarchart = 1360; |
|
var heightBarchart = 300; |
|
//------------------------ |
|
|
|
d3.json("world-50m.json", function(error, world) { |
|
var countries = topojson.object(world, world.objects.countries).geometries, |
|
neighbors = topojson.neighbors(world.objects.countries.geometries); |
|
|
|
|
|
var labels = getLabels(); |
|
|
|
// initialize bar chart "off stage" |
|
var barchart = chart.append("svg") |
|
.attr("width", widthBarchart) |
|
.attr("height", heightBarchart) |
|
.attr("x", -500) |
|
.attr("y", -500); |
|
|
|
var xBar = 180; |
|
var yBar = 8; //30; |
|
var dyBar = 20; |
|
var dyTxt = 14; |
|
|
|
|
|
|
|
var bkgrd = barchart.append("rect") |
|
//.attr("width", 170) |
|
.attr("width", 380) |
|
.attr("height", heightBarchart) |
|
.style("fill", "#eeeeee"); |
|
|
|
var chart0 = barchart.append("g"); |
|
var bar0 = chart0.append("svg").append("rect") |
|
.attr("x", xBar) |
|
.attr("y", yBar + (dyBar * 0)) |
|
.attr("width", 0) |
|
.attr("height", dyBar) |
|
.style("fill", "#6E9686") |
|
.style("opacity", 0.85); |
|
|
|
var txt0 = chart0.append("text") |
|
.attr("x", xBar - 4) |
|
.attr("y", yBar + (dyBar * 0) + dyTxt) |
|
.attr("text-anchor", "end") |
|
.style("opacity", 0) |
|
.style("font-family", 'sans-serif') |
|
.style("font-size", "14px") |
|
.text(labels[0]); |
|
|
|
|
|
|
|
var chart1 = barchart.append("g"); |
|
var bar1 = chart1.append("svg").append("rect") |
|
.attr("x", xBar) |
|
.attr("y", yBar + (dyBar * 1)) |
|
.attr("width", 0) |
|
.attr("height", dyBar) |
|
.style("fill", "#666666") |
|
.style("opacity", 0.85); |
|
|
|
var txt1 = chart1.append("text") |
|
.attr("x", xBar - 4) |
|
.attr("y", yBar + (dyBar * 1) + dyTxt) |
|
.attr("text-anchor", "end") |
|
.style("font-family", 'sans-serif') |
|
.style("font-size", "14px") |
|
.style("opacity", 0) |
|
.text(labels[1]); |
|
|
|
var txt_a_1 = chart1.append("text") |
|
.attr("x", xBar + 100) |
|
.attr("y", yBar + (dyBar * 1) + dyTxt) |
|
.attr("text-anchor", "end") |
|
.style("font-family", 'sans-serif') |
|
.style("font-size", "14px") |
|
.style("fill", "#cccccc") |
|
.style("opacity", 0) |
|
.text("test"); |
|
|
|
var chart2 = barchart.append("g"); |
|
var bar2 = chart2.append("svg").append("rect") |
|
.attr("x", xBar) |
|
.attr("y", yBar + (dyBar * 2)) |
|
.attr("width", 0) |
|
.attr("height", dyBar) |
|
.style("fill", "#6E9686") |
|
.style("opacity", 0.85); |
|
|
|
var txt2 = chart2.append("text") |
|
.attr("x", xBar - 4) |
|
.attr("y", yBar + (dyBar * 2) + dyTxt) |
|
.attr("class", "txt") |
|
.attr("text-anchor", "end") |
|
.style("font-family", 'sans-serif') |
|
.style("font-size", "14px") |
|
.style("opacity", 0) |
|
.text(labels[2]); |
|
|
|
var chart3 = barchart.append("g"); |
|
var bar3 = chart3.append("svg").append("rect") |
|
.attr("x", xBar) |
|
.attr("y", yBar + (dyBar * 3)) |
|
.attr("width", 0) |
|
.attr("height", dyBar) |
|
.style("fill", "#666666") |
|
.style("opacity", 0.85); |
|
|
|
var txt3 = chart3.append("text") |
|
.attr("x", xBar - 4) |
|
.attr("y", yBar + (dyBar * 3) + dyTxt) |
|
.attr("text-anchor", "end") |
|
.style("font-family", 'sans-serif') |
|
.style("font-size", "14px") |
|
.style("opacity", 0) |
|
.text(labels[3]); |
|
|
|
var chart4 = barchart.append("g"); |
|
var bar4 = chart4.append("svg").append("rect") |
|
.attr("x", xBar) |
|
.attr("y", yBar + (dyBar * 4)) |
|
.attr("width", 0) |
|
.attr("height", dyBar) |
|
.style("fill", "#6E9686") |
|
.style("opacity", 0.85); |
|
|
|
var txt4 = chart4.append("text") |
|
.attr("x", xBar - 4) |
|
.attr("y", yBar + (dyBar * 4) + dyTxt) |
|
.attr("text-anchor", "end") |
|
.style("font-family", 'sans-serif') |
|
.style("font-size", "14px") |
|
.style("opacity", 0) |
|
.text(labels[4]); |
|
|
|
|
|
var chart5 = barchart.append("g"); |
|
var bar5 = chart5.append("svg").append("rect") |
|
.attr("x", xBar) |
|
.attr("y", yBar + (dyBar * 5)) |
|
.attr("width", 0) |
|
.attr("height", dyBar) |
|
.style("fill", "#666666") |
|
.style("opacity", 0.85); |
|
|
|
var txt5 = chart5.append("text") |
|
.attr("x", xBar - 4) |
|
.attr("y", yBar + (dyBar * 5) + dyTxt) |
|
.attr("text-anchor", "end") |
|
.style("font-family", 'sans-serif') |
|
.style("font-size", "14px") |
|
.style("opacity", 0) |
|
.text(labels[5]); |
|
|
|
|
|
var chart6 = barchart.append("g"); |
|
var bar6 = chart6.append("svg").append("rect") |
|
.attr("x", xBar) |
|
.attr("y", yBar + (dyBar * 6)) |
|
.attr("width", 0) |
|
.attr("height", dyBar) |
|
.style("fill", "#6E9686") |
|
.style("opacity", 0.85); |
|
|
|
var txt6 = chart6.append("text") |
|
.attr("x", xBar - 4) |
|
.attr("y", yBar + (dyBar * 6) + dyTxt) |
|
.attr("text-anchor", "end") |
|
.style("font-family", 'sans-serif') |
|
.style("font-size", "14px") |
|
.style("opacity", 0) |
|
.text(labels[6]); |
|
|
|
|
|
var chart7 = barchart.append("g"); |
|
var bar7 = chart7.append("svg").append("rect") |
|
.attr("x", xBar) |
|
.attr("y", yBar + (dyBar * 7)) |
|
.attr("width", 0) |
|
.attr("height", dyBar) |
|
.style("fill", "#666666") |
|
.style("opacity", 0.85); |
|
|
|
var txt7 = chart7.append("text") |
|
.attr("x", xBar - 4) |
|
.attr("y", yBar + (dyBar * 7) + dyTxt) |
|
.attr("text-anchor", "end") |
|
.style("font-family", 'sans-serif') |
|
.style("font-size", "14px") |
|
.style("opacity", 0) |
|
.text(labels[7]); |
|
|
|
|
|
var chart8 = barchart.append("g"); |
|
var bar8 = chart8.append("svg").append("rect") |
|
.attr("x", xBar) |
|
.attr("y", yBar + (dyBar * 8)) |
|
.attr("width", 0) |
|
.attr("height", dyBar) |
|
.style("fill", "#6E9686") |
|
.style("opacity", 0.85); |
|
|
|
var txt8 = chart8.append("text") |
|
.attr("x", xBar - 4) |
|
.attr("y", yBar + (dyBar * 8) + dyTxt) |
|
.attr("text-anchor", "end") |
|
.style("font-family", 'sans-serif') |
|
.style("font-size", "14px") |
|
.style("opacity", 0) |
|
.text(labels[8]); |
|
|
|
|
|
var chart9 = barchart.append("g"); |
|
var bar9 = chart9.append("svg").append("rect") |
|
.attr("x", xBar) |
|
.attr("y", yBar + (dyBar * 9)) |
|
.attr("width", 0) |
|
.attr("height", dyBar) |
|
.style("fill", "#666666") |
|
.style("opacity", 0.85); |
|
|
|
var txt9 = chart9.append("text") |
|
.attr("x", xBar - 4) |
|
.attr("y", yBar + (dyBar * 9) + dyTxt) |
|
.attr("text-anchor", "end") |
|
.style("font-family", 'sans-serif') |
|
.style("font-size", "14px") |
|
.style("opacity", 0) |
|
.text(labels[9]); |
|
|
|
|
|
var chart10 = barchart.append("g"); |
|
var bar10 = chart10.append("svg").append("rect") |
|
.attr("x", xBar) |
|
.attr("y", yBar + (dyBar * 10)) |
|
.attr("width", 0) |
|
.attr("height", dyBar) |
|
.style("fill", "#6E9686") |
|
.style("opacity", 0.85); |
|
|
|
var txt10 = chart10.append("text") |
|
.attr("x", xBar - 4) |
|
.attr("y", yBar + (dyBar * 10) + dyTxt) |
|
.attr("text-anchor", "end") |
|
.style("font-family", 'sans-serif') |
|
.style("font-size", "14px") |
|
.style("opacity", 0) |
|
.text(labels[10]); |
|
|
|
var chart11 = barchart.append("g"); |
|
var bar11 = chart11.append("svg").append("rect") |
|
.attr("x", xBar) |
|
.attr("y", yBar + (dyBar * 11)) |
|
.attr("width", 0) |
|
.attr("height", dyBar) |
|
.style("fill", "#666666") |
|
.style("opacity", 0.85); |
|
|
|
var txt11 = chart11.append("text") |
|
.attr("x", xBar - 4) |
|
.attr("y", yBar + (dyBar * 11) + dyTxt) |
|
.attr("text-anchor", "end") |
|
.style("font-family", 'sans-serif') |
|
.style("font-size", "14px") |
|
.style("opacity", 0) |
|
.text(labels[11]); |
|
|
|
var chart12 = barchart.append("g"); |
|
var bar12 = chart12.append("svg").append("rect") |
|
.attr("x", xBar) |
|
.attr("y", yBar + (dyBar * 12)) |
|
.attr("width", 0) |
|
.attr("height", dyBar) |
|
.style("fill", "#6E9686") |
|
.style("opacity", 0.85); |
|
|
|
var txt12 = chart12.append("text") |
|
.attr("x", xBar - 4) |
|
.attr("y", yBar + (dyBar * 12) + dyTxt) |
|
.attr("text-anchor", "end") |
|
.style("font-family", 'sans-serif') |
|
.style("font-size", "14px") |
|
.style("opacity", 0) |
|
.text(labels[12]); |
|
|
|
var chart13 = barchart.append("g"); |
|
var bar13 = chart13.append("svg").append("rect") |
|
.attr("x", xBar) |
|
.attr("y", yBar + (dyBar * 13)) |
|
.attr("width", 0) |
|
.attr("height", dyBar) |
|
.style("fill", "#666666") |
|
.style("opacity", 0.85); |
|
|
|
var txt13 = chart13.append("text") |
|
.attr("x", xBar - 4) |
|
.attr("y", yBar + (dyBar * 13) + dyTxt) |
|
.attr("text-anchor", "end") |
|
.style("font-family", 'sans-serif') |
|
.style("font-size", "14px") |
|
.style("opacity", 0) |
|
.text(labels[13]); |
|
|
|
|
|
|
|
svg.selectAll(".country") |
|
.data(countries) |
|
.enter().insert("path", ".graticule") |
|
.attr("class", "country") |
|
.attr("d", path) |
|
.style("fill", function(d, i){ |
|
|
|
//we don't have data for all countries in our map |
|
if(getNum(d) != undefined){ |
|
console.log(d.id, getCountryName(d) ,getNum(d)); |
|
|
|
//var counts = getCounts(d); |
|
|
|
var num = getNum(d); |
|
if(num > 1000000){ |
|
return color(6); |
|
} else if(num > 100000){ |
|
return color(5); |
|
} else if(num > 50000){ |
|
return color(4); |
|
} else if(num > 10000){ |
|
return color(3); |
|
} else if(num > 1000){ |
|
return color(2); |
|
} else if(num > 100){ |
|
return color(1) |
|
} else if(num >= 0){ |
|
return color(0) |
|
} |
|
|
|
} else { |
|
// we don't have data for this country |
|
return "#cccccc"; |
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
// for user interaction |
|
.on("mouseover", function(d){ |
|
|
|
|
|
// make sure we have data for this country, then add interaction |
|
if(getNum(d) != undefined){ |
|
|
|
var counts = getNormalizedCounts(d); |
|
var rawcounts = getRawCounts(d); |
|
|
|
d3.select(this) |
|
|
|
//highlight the map region |
|
.style("fill", "#6E9686"); |
|
|
|
|
|
bkgrd.transition() |
|
.duration(200) |
|
.attr("opacity", .6); |
|
|
|
div.transition() |
|
.duration(200) |
|
.style("opacity", .9); |
|
|
|
div.html("<b>" + getCountryName(d) + "</b><br>" + |
|
" Total: " + getNum(d) |
|
) |
|
// correcting the placement here...don't go "off stage" |
|
.style("left", (d3.event.pageX + 20) + "px") |
|
.style("top", (getY(d3.event.pageY) - 40) + "px"); |
|
|
|
chart0.transition() |
|
.duration(200) |
|
.attr("opacity", .8); |
|
bar0.transition() |
|
.duration(200) |
|
.attr("width", counts[0]) |
|
.style("opacity", .8); |
|
txt0.transition() |
|
.duration(200) |
|
.style("opacity", .9); |
|
|
|
chart1.transition() |
|
.duration(500) |
|
.attr("opacity", .8); |
|
bar1.transition() |
|
.duration(200) |
|
.attr("width", counts[1]) |
|
.style("opacity", .8); |
|
txt1.transition() |
|
.duration(200) |
|
.style("opacity", .9); |
|
|
|
// label for number of premature, to give context for barchart |
|
txt_a_1.transition() |
|
.duration(200) |
|
.attr("x", counts[1] + xBar - 4) |
|
.text(rawcounts[1]) |
|
.style("opacity", .9); |
|
|
|
chart2.transition() |
|
.duration(500) |
|
.attr("opacity", .8); |
|
bar2.transition() |
|
.duration(200) |
|
.attr("width", counts[2]) |
|
.style("opacity", .8); |
|
txt2.transition() |
|
.duration(200) |
|
.style("opacity", .9); |
|
|
|
chart3.transition() |
|
.duration(500) |
|
.attr("opacity", .8); |
|
bar3.transition() |
|
.duration(200) |
|
.attr("width", counts[3]) |
|
.style("opacity", .8); |
|
txt3.transition() |
|
.duration(200) |
|
.style("opacity", .9); |
|
|
|
chart4.transition() |
|
.duration(500) |
|
.attr("opacity", .8); |
|
bar4.transition() |
|
.duration(200) |
|
.attr("width", counts[4]) |
|
.style("opacity", .8); |
|
txt4.transition() |
|
.duration(200) |
|
.style("opacity", .9); |
|
|
|
chart5.transition() |
|
.duration(500) |
|
.attr("opacity", .8); |
|
bar5.transition() |
|
.duration(200) |
|
.attr("width", counts[5]) |
|
.style("opacity", .8); |
|
txt5.transition() |
|
.duration(200) |
|
.style("opacity", .9); |
|
|
|
chart6.transition() |
|
.duration(500) |
|
.attr("opacity", .8); |
|
bar6.transition() |
|
.duration(200) |
|
.attr("width", counts[6]) |
|
.style("opacity", .8); |
|
txt6.transition() |
|
.duration(200) |
|
.style("opacity", .9); |
|
|
|
chart7.transition() |
|
.duration(500) |
|
.attr("opacity", .8); |
|
bar7.transition() |
|
.duration(200) |
|
.attr("width", counts[7]) |
|
.style("opacity", .8); |
|
txt7.transition() |
|
.duration(200) |
|
.style("opacity", .9); |
|
|
|
chart8.transition() |
|
.duration(500) |
|
.attr("opacity", .8); |
|
bar8.transition() |
|
.duration(200) |
|
.attr("width", counts[8]) |
|
.style("opacity", .8); |
|
txt8.transition() |
|
.duration(200) |
|
.style("opacity", .9); |
|
|
|
chart9.transition() |
|
.duration(500) |
|
.attr("opacity", .8); |
|
bar9.transition() |
|
.duration(200) |
|
.attr("width", counts[9]) |
|
.style("opacity", .8); |
|
txt9.transition() |
|
.duration(200) |
|
.style("opacity", .9); |
|
|
|
chart10.transition() |
|
.duration(500) |
|
.attr("opacity", .8); |
|
bar10.transition() |
|
.duration(200) |
|
.attr("width", counts[10]) |
|
.style("opacity", .8); |
|
txt10.transition() |
|
.duration(200) |
|
.style("opacity", .9); |
|
|
|
chart11.transition() |
|
.duration(500) |
|
.attr("opacity", .8); |
|
bar11.transition() |
|
.duration(200) |
|
.attr("width", counts[11]) |
|
.style("opacity", .8); |
|
txt11.transition() |
|
.duration(200) |
|
.style("opacity", .9); |
|
|
|
chart12.transition() |
|
.duration(500) |
|
.attr("opacity", .8); |
|
bar12.transition() |
|
.duration(200) |
|
.attr("width", counts[12]) |
|
.style("opacity", .8); |
|
txt12.transition() |
|
.duration(200) |
|
.style("opacity", .9); |
|
|
|
chart13.transition() |
|
.duration(500) |
|
.attr("opacity", .8); |
|
bar13.transition() |
|
.duration(200) |
|
.attr("width", counts[13]) |
|
|
|
.style("opacity", .8); |
|
txt13.transition() |
|
.duration(200) |
|
.style("opacity", .9); |
|
|
|
|
|
barchart.transition() |
|
.duration(200) |
|
.attr("x", (d3.event.pageX + 20) + "px") |
|
.attr("y", getY(d3.event.pageY)); |
|
|
|
|
|
} |
|
|
|
}) |
|
|
|
.on("mouseout", function(d){ |
|
d3.select(this) |
|
|
|
.style("fill", getColor(d)) |
|
|
|
// get chart out of mouses way, when done |
|
chart.transition() |
|
.duration(500) |
|
.attr("x", -500) |
|
.attr("y", -500); |
|
|
|
bkgrd.transition() |
|
.duration(500) |
|
.attr("opacity", 0); |
|
|
|
chart0.transition() |
|
.duration(500) |
|
.attr("opacity", 0); |
|
bar0.transition() |
|
.duration(500) |
|
.attr("width", 0); |
|
|
|
chart1.transition() |
|
.duration(500) |
|
.attr("opacity", 0); |
|
bar1.transition() |
|
.duration(500) |
|
.attr("width", 0); |
|
|
|
chart2.transition() |
|
.duration(500) |
|
.attr("opacity", 0); |
|
bar2.transition() |
|
.duration(500) |
|
.attr("width", 0); |
|
|
|
chart3.transition() |
|
.duration(500) |
|
.attr("opacity", 0); |
|
bar3.transition() |
|
.duration(500) |
|
.attr("width", 0); |
|
|
|
chart4.transition() |
|
.duration(500) |
|
.attr("opacity", 0); |
|
bar4.transition() |
|
.duration(500) |
|
.attr("width", 0); |
|
|
|
chart5.transition() |
|
.duration(500) |
|
.attr("opacity", 0); |
|
bar5.transition() |
|
.duration(500) |
|
.attr("width", 0); |
|
|
|
chart6.transition() |
|
.duration(500) |
|
.attr("opacity", 0); |
|
bar6.transition() |
|
.duration(500) |
|
.attr("width", 0); |
|
|
|
chart7.transition() |
|
.duration(500) |
|
.attr("opacity", 0); |
|
bar7.transition() |
|
.duration(500) |
|
.attr("width", 0); |
|
|
|
chart8.transition() |
|
.duration(500) |
|
.attr("opacity", 0); |
|
bar8.transition() |
|
.duration(500) |
|
.attr("width", 0); |
|
|
|
chart9.transition() |
|
.duration(500) |
|
.attr("opacity", 0); |
|
bar9.transition() |
|
.duration(500) |
|
.attr("width", 0); |
|
|
|
chart10.transition() |
|
.duration(500) |
|
.attr("opacity", 0); |
|
bar10.transition() |
|
.duration(500) |
|
.attr("width", 0); |
|
|
|
chart11.transition() |
|
.duration(500) |
|
.attr("opacity", 0); |
|
bar11.transition() |
|
.duration(500) |
|
.attr("width", 0); |
|
|
|
chart12.transition() |
|
.duration(500) |
|
.attr("opacity", 0); |
|
bar12.transition() |
|
.duration(500) |
|
.attr("width", 0); |
|
|
|
chart13.transition() |
|
.duration(500) |
|
.attr("opacity", 0); |
|
bar13.transition() |
|
.duration(500) |
|
.attr("width", 0); |
|
|
|
div.transition() |
|
.duration(500) |
|
.style("opacity", 0); |
|
}) |
|
|
|
; |
|
|
|
|
|
svg.insert("path", ".graticule") |
|
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) |
|
.attr("class", "boundary") |
|
.attr("d", path); |
|
|
|
}); |
|
|
|
|
|
d3.select(self.frameElement).style("height", height + "px"); |
|
|
|
</script> |
|
|