Colombia en los olímpicos

Total de medallas de Colombia en los Juegos Olíimpicos

Inspirado en el artículo de lasillavacia

http://lasillavacia.com/historia/la-plata-del-deporte-se-vuelve-oro-57592

pero tratando de mejorar el gráfico para que represente de mejor manera el total de medallas.

Datos tomados de wikipedia.

<!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);

}, []);

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>

https://d3js.org/d3.v4.js