Skip to content

Instantly share code, notes, and snippets.

@john-guerra

john-guerra/index.html

Last active June 8, 2019 00:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save john-guerra/653dff16b54df2ad2682c8dd0cfbe27a to your computer and use it in GitHub Desktop.
Save john-guerra/653dff16b54df2ad2682c8dd0cfbe27a to your computer and use it in GitHub Desktop.
Download ZIP
Colombia en los olímpicos
Raw
readme.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style type="text/css">
body {
background: black;
color:white;
font-family: sans-serif;
}
.title {
font-size: 3.5em;
font-weight: bold;
float: left;
}
.subtitle {
font-size: 1.5em;
/*margin-top: -30px;*/
float: left;
margin-top: 30px;
margin-left: 10px;
}
svg {
background-color: black;
}
svg text {
fill:white;
}
svg line {
stroke: white;
}
.tick text {
font-size: 12pt;
}
.tick {
stroke-dasharray: 1,7;
}
.clear {
clear: both;
}
</style>
</head>
<div class="title">Colombia</div>
<div class="subtitle">en los Juegos Olímpicos</div>
<div class="clear"></div>
<svg></svg>
<script src="//d3js.org/d3.v4.js"></script>
<script>
/* global d3, console */
var keys = ["Oro", "Plata", "Bronce"];
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
height = height - 150;
var svg = d3.select("svg")
.attr("width", width)
.attr("height", height),
margin = {top: 20, right: 60, bottom: 50, left: 20},
width = width- margin.left - margin.right,
height = height - margin.top - margin.bottom;
var parseDate = d3.timeParse("%Y");
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
z = d3.scaleOrdinal()
.domain(keys)
.range(["#ffd700", "#C0C0C0", "#cd7f32"]);
var stack = d3.stack()
.offset(d3.offsetNone);
var nest = d3.nest()
.key(function(d) { return d.date; })
.key(function(d) { return d.medal; })
.rollup(function (leaves) { return leaves.length; });
var area = d3.area()
.x(function(d) { return x(d.data.key); })
.y0(function(d) { return y(d[0]); })
.y1(function(d) { return y(d[1]); });
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
g.append("g")
.attr("class", "layers");
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")");
g.append("g")
.attr("class", "axis axis--y")
.append("text")
.text("Total acumulado de medallas")
.style("font-size", "14pt")
.attr("transform", "translate(" + ( width + margin.right/3) + ", 0) rotate(90)");
d3.csv("olympic_medals_Colombia.csv", type, function(error, data) {
if (error) throw error;
var nestedData = nest.entries(data);
x.domain(d3.extent(data, function(d) { return d.date; }));
var table = nestedData.reduce(function (p, c) {
//Initialize on zero
keys.forEach(function (k) {
c[k]=0;
});
c.values.forEach(function (d) {
c[d.key] = d.value;
});
//nest converts the date into string, so we need to convert it back
c.key = new Date(c.key);
return p.concat(c);
}, []);
var filledTable = [];
var prevDate = new Date(x.domain()[0]-4, 0, 0);
table.forEach(function (d) {
filledTable.push(d);
//Is there a hole?
if ((d.key.getFullYear() - prevDate.getFullYear()) > 4) {
//Fill the whole with many zero olympics as necessary
for (var y = prevDate.getFullYear() + 4; y < d.key.getFullYear(); y+=4) {
var zeroMedals = {};
for(var i = 0 ; i < keys.length ; ++i){
zeroMedals[keys[i]] = 0;
}
zeroMedals.key=new Date(y, 0);
filledTable.push(zeroMedals);
}
}
prevDate = d.key;
});
stack.keys(keys);
filledTable = filledTable.sort(function (a,b) {
return d3.ascending(a.key, b.key);
});
stack.keys(keys);
z.domain(keys);
//We need to have 0 medals when data is missing
var datesWithOlympics = d3.timeYear.range(
x.domain()[0],
new Date(x.domain()[1].getFullYear()+1, 0),
4);
updateToDateIndex(datesWithOlympics.length-1);
function updateToDateIndex(i) {
console.log("update To i"+ datesWithOlympics[i]);
var layers = stack(filledTable.filter(function (d) {
return d.key<= datesWithOlympics[i];
}));
update(layers);
if (i === datesWithOlympics.length-1) {
i=-1;
}
// setTimeout(function () {updateToDateIndex(i+1)}, 500);
}
function update(layers) {
function pathTween(d) {
var interpolate = d3.scaleQuantile()
.domain([0,1])
.range(d3.range(1, d.length + 1));
return function(t) {
return area(d.slice(0, interpolate(t)));
};
}
y.domain([0, 1+ d3.max(layers,
function (d) {
return d3.max(d,
function (e) {
return e[1];
});
})]);
var layer = g.select(".layers").selectAll(".layer")
.data(layers)
var layerEnter =
layer.enter().append("g")
.attr("class", "layer");
layerEnter.append("path")
.attr("class", "area")
.style("fill", function(d) { return z(d.key); })
.transition()
.duration(5000)
.attrTween("d", pathTween);
layerEnter.filter(function(d) { return d[d.length - 1][1] - d[d.length - 1][0] > 0.01; })
.append("text")
.attr("x", width - 6)
.attr("y", function(d) { return y((d[d.length - 1][0] + d[d.length - 1][1]) / 2); })
.attr("dy", ".35em")
.style("font", "16px sans-serif")
.style("text-anchor", "end")
.text(function(d) { return d.key; });
// layer.select("g .area")
// .transition()
// .duration(1000)
// .attrTween("d", pathTween)
// .attr("d", area);
// layer.selectAll("g text")
// .attr("x", width - 6)
// .attr("y", function(d) { return y((d[d.length - 1][0] + d[d.length - 1][1]) / 2); })
// .attr("dy", ".35em")
// .style("font", "13px sans-serif")
// .style("text-anchor", "end")
// .text(function(d) { return d.key; });
layer.exit().remove();
d3.select(".axis--x")
.call(d3.axisBottom(x)
.tickSizeInner(-height)
// .tickSizeOuter(10)
.tickPadding(15)
.tickValues(datesWithOlympics));
d3.select(".axis--y")
.call(d3.axisRight(y)
.ticks(10, "")
// .tickPadding(15)
.tickSize(width))
}
});
function type(d) {
d.date = parseDate(d.year);
d.total_gold = +d.total_gold;
d.total_silver = +d.total_silver;
d.total_bronze = +d.total_bronze;
d.investment = +d.investment;
d.medal = d.medal.trim();
return d;
}
</script>
Raw
olympic_medals_Colombia.csv
city year city_long total_gold total_silver total_bronze total medal medalist_long medalist Budget investment
M£nich 1972 Bandera de AlemaniaÿM£nich 1972 0 1 2 3 Plata Plata medal olympic.svgÿTiro deportivo, Blanco m¢vil 10 m,ÿHelmut Bellingrodt Tiro deportivo, Blanco m¢vil 10 m,ÿHelmut Bellingrodt 0
M£nich 1972 Bandera de AlemaniaÿM£nich 1972 0 1 2 3 Bronce Bronce medal olympic.svgÿBoxeo, 57 - 60 kg,ÿAlfonso P‚rez Boxeo, 57 - 60 kg,ÿAlfonso P‚rez 0
M£nich 1972 Bandera de AlemaniaÿM£nich 1972 0 1 2 3 Bronce Bronce medal olympic.svgÿBoxeo, 54 - 57 kg,ÿClemente Rojas Boxeo, 54 - 57 kg,ÿClemente Rojas 0
Los µngeles 1984 Bandera de los Estados UnidosÿLos µngeles 1984 0 1 0 1 Plata Plata medal olympic.svgÿTiro deportivo, Blanco m¢vil 10 m,ÿHelmut Bellingrodt Tiro deportivo, Blanco m¢vil 10 m,ÿHelmut Bellingrodt 0
Se£l 1988 Bandera de Corea del SurÿSe£l 1988 0 0 1 1 Bronce Bronce medal olympic.svgÿBoxeo, 51 - 54 kg,ÿJorge Julio Rocha Boxeo, 51 - 54 kg,ÿJorge Julio Rocha 0
Barcelona 1992 Bandera de Espa¤aÿBarcelona 1992 0 0 1 1 Bronce Bronce medal olympic.svgÿAtletismo, 400 m planos,ÿXimena Restrepo Atletismo, 400 m planos,ÿXimena Restrepo 147000
Sidney 2000 Bandera de AustraliaÿS¡dney 2000 1 0 0 1 Oro Oro medal olympic.svgÿHalterofilia, 69 - 75 kg,ÿMar¡a Isabel Urrutia Halterofilia, 69 - 75 kg,ÿMar¡a Isabel Urrutia
Atenas 2004 Bandera de GreciaÿAtenas 2004 0 0 2 2 Bronce Bronce medal olympic.svgÿCiclismo en pista,ÿMar¡a Luisa Calle Ciclismo en pista,ÿMar¡a Luisa Calle 600000
Atenas 2004 Bandera de GreciaÿAtenas 2004 0 0 2 2 Bronce Bronce medal olympic.svgÿHalterofilia, 53 kg,ÿMabel Mosquera Halterofilia, 53 kg,ÿMabel Mosquera 600000
Pek¡n 2008 Bandera de la Rep£blica Popular ChinaÿPek¡n 2008 0 1 1 2 Plata Plata medal olympic.svgÿHalterofilia, 62 kg,ÿDiego Salazar Halterofilia, 62 kg,ÿDiego Salazar 11000000
Pek¡n 2008 Bandera de la Rep£blica Popular ChinaÿPek¡n 2008 0 1 1 2 Bronce Bronce medal olympic.svgÿLucha, 55 kg,ÿJackeline Renter¡a Lucha, 55 kg,ÿJackeline Renter¡a 11000000
Londres 2012 Bandera del Reino UnidoÿLondres 2012 1 3 4 8 Oro Oro medal olympic.svgÿBMX,ÿMariana Paj¢n. BMX,ÿMariana Paj¢n. 10200000
Londres 2012 Bandera del Reino UnidoÿLondres 2012 1 3 4 8 Plata Plata medal olympic.svgÿAtletismo, Triple Salto,ÿCaterine Ibargen Atletismo, Triple Salto,ÿCaterine Ibargen 10200000
Londres 2012 Bandera del Reino UnidoÿLondres 2012 1 3 4 8 Plata Plata medal olympic.svgÿCiclismo en ruta,ÿRigoberto Ur n Ciclismo en ruta,ÿRigoberto Ur n 10200000
Londres 2012 Bandera del Reino UnidoÿLondres 2012 1 3 4 8 Plata Plata medal olympic.svgÿHalterofilia, 62 kg,ÿàscar Figueroa Halterofilia, 62 kg,ÿàscar Figueroa 10200000
Londres 2012 Bandera del Reino UnidoÿLondres 2012 1 3 4 8 Bronce Bronce medal olympic.svgÿLucha, 55 kg,ÿJackeline Renter¡a Lucha, 55 kg,ÿJackeline Renter¡a 10200000
Londres 2012 Bandera del Reino UnidoÿLondres 2012 1 3 4 8 Bronce Bronce medal olympic.svgÿJudo, 70 kg,ÿYuri Alvear Judo, 70 kg,ÿYuri Alvear 10200000
Londres 2012 Bandera del Reino UnidoÿLondres 2012 1 3 4 8 Bronce Bronce medal olympic.svgÿBMX,ÿCarlos Oquendo BMX,ÿCarlos Oquendo 10200000
Londres 2012 Bandera del Reino UnidoÿLondres 2012 1 3 4 8 Bronce Bronce medal olympic.svgÿTaekwondo, 58 kg,ÿàscar Mu¤oz Taekwondo, 58 kg,ÿàscar Mu¤oz 10200000
R¡o de janeiro 2016 Bandera de BrasilÿR¡o de Janeiro 2016 3 2 3 8 Oro Oro medal olympic.svgÿHalterofilia, 62 kg,ÿàscar Figueroa. Halterofilia, 62 kg,ÿàscar Figueroa. 10000000
R¡o de janeiro 2016 Bandera de BrasilÿR¡o de Janeiro 2016 3 2 3 8 Oro Oro medal olympic.svgÿAtletismo, Triple Salto,ÿCaterine Ibargen. Atletismo, Triple Salto,ÿCaterine Ibargen. 10000000
R¡o de janeiro 2016 Bandera de BrasilÿR¡o de Janeiro 2016 3 2 3 8 Oro Oro medal olympic.svgÿBMX,ÿMariana Paj¢n. BMX,ÿMariana Paj¢n. 10000000
R¡o de janeiro 2016 Bandera de BrasilÿR¡o de Janeiro 2016 3 2 3 8 Plata Plata medal olympic.svgÿJudo, 70 kg,ÿYuri Alvear. Judo, 70 kg,ÿYuri Alvear. 10000000
R¡o de janeiro 2016 Bandera de BrasilÿR¡o de Janeiro 2016 3 2 3 8 Plata Plata medal olympic.svgÿBoxeo, 49 kg.ÿYuberjen Mart¡nez. Boxeo, 49 kg.ÿYuberjen Mart¡nez. 10000000
R¡o de janeiro 2016 Bandera de BrasilÿR¡o de Janeiro 2016 3 2 3 8 Bronce Bronce medal olympic.svgÿHalterofilia, 69 kg.ÿLuis Mosquera. Halterofilia, 69 kg.ÿLuis Mosquera. 10000000
R¡o de janeiro 2016 Bandera de BrasilÿR¡o de Janeiro 2016 3 2 3 8 Bronce Bronce medal olympic.svgÿBoxeo, 51 kg.ÿIngrit Valencia. Boxeo, 51 kg.ÿIngrit Valencia. 10000000
R¡o de janeiro 2016 Bandera de BrasilÿR¡o de Janeiro 2016 3 2 3 8 Bronce Bronce medal olympic.svgÿBMX.ÿCarlos Ram¡rez. BMX.ÿCarlos Ram¡rez. 10000000
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment