|
var num = 11; |
|
var numTop = 5; |
|
|
|
var margin = {top: 35, right: 70, bottom: 30, left: 70}; |
|
var width = 950, |
|
height = 500; |
|
|
|
var devicePixelRatio = window.devicePixelRatio || 1; |
|
|
|
var canvas = d3.select("canvas") |
|
.attr("width", width * devicePixelRatio) |
|
.attr("height", height * devicePixelRatio) |
|
.style("width", width + "px") |
|
.style("height", height + "px"); |
|
|
|
var svg = d3.select("svg") |
|
.style("width", width + "px") |
|
.style("height", height + "px"); |
|
|
|
var color = d3.scaleOrdinal() |
|
.range(["#DB7F85", "#50AB84", "#4C6C86", "#C47DCB", "#B59248", "#DD6CA7", "#E15E5A", "#5DA5B3", "#725D82", "#54AF52", "#954D56"]); |
|
|
|
var xscale = d3.scaleLinear() |
|
.domain([1959, 2021]) |
|
.range([margin.left, width-margin.right]); |
|
|
|
var xaxis = d3.axisBottom() |
|
.scale(xscale) |
|
.tickFormat(d3.format("")); |
|
|
|
var xaxis2 = d3.axisTop() |
|
.scale(xscale) |
|
.tickFormat(d3.format("")); |
|
|
|
var yscale = d3.scaleLinear() |
|
.domain([0-0.2, num-0.5]) |
|
.range([margin.top, height-margin.bottom]); |
|
|
|
var radius = d3.scaleSqrt() |
|
.domain([0,0.1]) |
|
.range([0,4]); |
|
|
|
d3.csv("medals.csv", function(error, data) { |
|
var hostCountries = {}; // Find host countries by year |
|
data.forEach(function(d) { |
|
d.gold = +d.gold; |
|
d.year = +d.year; |
|
if (d.host === "y") { |
|
hostCountries[d.year] = d.name; |
|
} |
|
}); |
|
|
|
var years = Object.keys(hostCountries).map(function(d) {return +d;}); |
|
xaxis.tickValues(years); |
|
xaxis2.tickValues(years); |
|
|
|
svg.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform", "translate(0," + (height-margin.bottom) + ")") |
|
.call(xaxis); |
|
|
|
svg.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform", "translate(0," + (margin.top-10) + ")") |
|
.call(xaxis2); |
|
|
|
// Vertical guide line |
|
var hiddenMargin = 100; |
|
var highlightedYear; |
|
var verticalGuide = svg.append("line") |
|
.attr("class", "guide") |
|
.attr("x1", -hiddenMargin) |
|
.attr("y1", margin.top - 10) |
|
.attr("x2", -hiddenMargin) |
|
.attr("y2", height - margin.bottom) |
|
.style("stroke-width", function() { return xscale(2) - xscale(0); }) //two year interval |
|
.style("opacity", 0); |
|
var mouseTrap = svg.append("rect") |
|
.attr("width", width) |
|
.attr("height", height) |
|
.style("opacity", 0) |
|
.on("mouseover", function() { verticalGuide.style("opacity", 0.1); }) |
|
.on("mouseout", function() { verticalGuide.style("opacity", 0); }) |
|
.on("mousemove", function() { |
|
var mousex = d3.mouse(this)[0] |
|
var x = xscale.invert(mousex); |
|
var found = false; |
|
for (var i = 0; i < years.length; i++) { |
|
if (Math.abs(years[i] - x) <= 1) { // game interval (2 years) in half |
|
highlightedYear = years[i]; |
|
found = true; |
|
break; |
|
} |
|
} |
|
if (!found) { |
|
highlightedYear = undefined; |
|
} |
|
|
|
mouseTrap.style("cursor", highlightedYear? "pointer":"auto"); |
|
verticalGuide.attr("transform", "translate(" + (xscale(highlightedYear)+hiddenMargin) + ", 0)"); |
|
}) |
|
.on("click", function() { |
|
if (highlightedYear) { |
|
var url = "https://en.wikipedia.org/wiki/" + highlightedYear + ((highlightedYear <= 1975) ? "_Southeast_Asian_Peninsular_Games":"_Southeast_Asian_Games"); |
|
window.open(url, "_blank"); |
|
} |
|
}); |
|
|
|
// nest by name and rank by total popularity |
|
var nested = d3.nest() |
|
.key(function(d) { return d.name; }) |
|
.rollup(function(leaves) { |
|
return { |
|
data: leaves, |
|
sum: d3.sum(leaves, function(d) { return d.gold; }) |
|
}; |
|
}) |
|
.entries(data) |
|
.sort(function(a, b) { return d3.descending(a.value.sum, b.value.sum); }) |
|
|
|
var topnames = nested.slice(0, num).map(function(d) { return d.key; }); |
|
data = data.filter(function(d) { |
|
return topnames.indexOf(d.name) > -1; |
|
}); |
|
|
|
// nest by name and rank by total popularity |
|
window.byYear = {} |
|
d3.nest() |
|
.key(function(d) { return d.year; }) |
|
.key(function(d) { return d.name; }) |
|
// .sortValues(function(a, b) { return a.gold - b.gold; }) |
|
.rollup(function(leaves,i) { |
|
return leaves[0].gold; |
|
}) |
|
.entries(data) |
|
.forEach(function(year) { |
|
byYear[year.key] = {}; |
|
year.values |
|
.sort(function(a, b) { return d3.descending(a.value, b.value); }) |
|
.forEach(function(name, i) { |
|
byYear[year.key][name.key] = i; |
|
}); |
|
}); |
|
|
|
// window.byName = {}; |
|
// d3.nest() |
|
// .key(function(d) { return d.name; }) |
|
// .key(function(d) { return d.year; }) |
|
// .rollup(function(leaves,i) { |
|
// return leaves[0].gold; |
|
// }) |
|
// .entries(data) |
|
// .forEach(function(name) { |
|
// byName[name.key] = []; |
|
// name.values |
|
// .forEach(function(year) { |
|
// byName[name.key].push(year.value); |
|
// }); |
|
// }); |
|
// console.log(byName["Thailand"].join(", ")); |
|
|
|
var ctx = canvas.node().getContext("2d"); |
|
ctx.scale(devicePixelRatio, devicePixelRatio); |
|
|
|
// Draw a circle for each host country |
|
var countrySumRank = nested.map(function(d) { return d.key; }); |
|
for (var year in hostCountries) { |
|
if (countrySumRank.indexOf(hostCountries[year]) < numTop) { |
|
ctx.fillStyle = color(hostCountries[year]); |
|
} else { |
|
ctx.fillStyle = "#888"; |
|
} |
|
|
|
ctx.beginPath(); |
|
ctx.arc(xscale(year), yscale(byYear[year][hostCountries[year]]), 5, 0, 2*Math.PI); |
|
ctx.fill(); |
|
ctx.closePath(); |
|
} |
|
|
|
nested.slice(0, num).reverse().forEach(function(name, i) { |
|
var yearspopular = name.value.data; |
|
|
|
if (i >= num-numTop) { |
|
ctx.globalAlpha = 0.85; |
|
ctx.strokeStyle = color(name.key); |
|
ctx.lineWidth = 2.5; |
|
} else { |
|
ctx.globalAlpha = 0.55; |
|
ctx.strokeStyle = "#888"; |
|
ctx.lineWidth = 1; |
|
} |
|
|
|
// bump line |
|
ctx.globalCompositeOperation = "darken"; |
|
ctx.lineCap = "round"; |
|
yearspopular.forEach(function(d, j) { |
|
if (j > 0) { |
|
var previousYear = yearspopular[j-1].year; |
|
|
|
ctx.beginPath(); |
|
if ((d.year - previousYear) > 4) { //skipping games |
|
ctx.setLineDash([5, 10]); |
|
} else { |
|
ctx.setLineDash([]); |
|
} |
|
ctx.moveTo(xscale(previousYear), yscale(byYear[previousYear][name.key])) |
|
// ctx.lineTo(xscale(d.year), yscale(byYear[d.year][name.key])); |
|
ctx.bezierCurveTo( |
|
xscale(previousYear)+15, yscale(byYear[previousYear][name.key]), |
|
xscale(d.year)-15, yscale(byYear[d.year][name.key]), |
|
xscale(d.year), yscale(byYear[d.year][name.key])); |
|
// ctx.closePath(); |
|
ctx.stroke(); |
|
} |
|
}); |
|
}); |
|
|
|
ctx.textAlign = "right"; |
|
ctx.textBaseline = "middle"; |
|
ctx.font = "10px sans-serif"; |
|
nested.slice(0, num).reverse().forEach(function(name, i) { |
|
var yearspopular = name.value.data; |
|
if (i >= num-numTop) { |
|
ctx.fillStyle = color(name.key); |
|
} else { |
|
ctx.fillStyle = "#555"; |
|
} |
|
|
|
ctx.globalCompositeOperation = "source-over"; |
|
ctx.globalAlpha = 0.9; |
|
|
|
// start names |
|
ctx.save(); |
|
ctx.textAlign = "end"; |
|
var start = yearspopular[0].year; |
|
var x = xscale(start)-10; |
|
var y = yscale(byYear[start][name.key]); |
|
switch (name.key) { |
|
case "Indonesia": x += 30; y -= 10; break; |
|
case "Philippines": x += 45; y -= 10; break; |
|
case "Cambodia": x += 10; y -= 10; break; |
|
default: break; |
|
} |
|
ctx.fillText(name.key, x, y); |
|
ctx.restore(); |
|
|
|
// end names |
|
ctx.textAlign = "start"; |
|
var end= yearspopular[yearspopular.length-1].year; |
|
ctx.fillText(name.key, xscale(end)+10, yscale(byYear[end][name.key])); |
|
}); |
|
|
|
// legend |
|
var legendPos = {x: width*0.12, y: height*0.78}; |
|
|
|
ctx.fillStyle = "#888"; |
|
ctx.beginPath(); |
|
ctx.arc(legendPos.x, legendPos.y, 5, 0, 2*Math.PI); |
|
ctx.fill(); |
|
ctx.closePath(); |
|
|
|
ctx.textAlign = "start"; |
|
ctx.fillText("marks the years that each country hosts the SEA Games.", legendPos.x + 10, legendPos.y - 1); |
|
}); |
