UNGA Streamgraph [UNLISTED]

A StreamGraph visualization of the debates at the UNGA.

Data based on https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/0TJX8Y

Les chercheurs ont procédé à une analyse informatique de l'ensemble des motions présentées (depuis 1970) lors de l'Assemblée générale des Nations unies. La méthode employée recherche des similarités statistiques entre les différents textes, et à partir de là établit des "thèmes", constitués de mots dont la fréquence est relativement plus élevée dans tel ou tel groupe de textes.

Le graphique représente la part relative, année après année, des trente thèmes principaux extraits de cette masse de textes. Les bandes reflètent l'évolution historique des débats.

On repère assez vite la question de la guerre froide et du désarmement nucléaire, qui s'arrête en 1989 à la chute du mur de Berlin. De même, les années 1980 sont l'objet d'importants débats sur l'apartheid en Afrique du Sud.

Sur le plus long terme, les questions de l'organisation politique de la planète, présentes dans les années 1970, cèdent rapidement le pas à une proccupation croissante pour l'économie.

La rupture de 1989 ouvre l'ère du "développement" puis de la lutte contre la pauvreté. Le terrorisme fait irruption dans les débats à partir de 2001. Mais le sujet qui monte le plus, c'est celui du changement climatique. Au point qu'il supplante désormais quasi totalement la lutte contre la pauvreté et la question des droits humains.

See also http://blockbuilder.org/Fil/c3ee2144ccedc2a6c9a61349feb04c30

forked from curran's block: Refugees Streamgraph

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://unpkg.com/d3@4.10.0"></script>
    <script src="https://unpkg.com/d3-area-label@1.1.0"></script>
    <title>Refugees Streamgraph</title>
    <style>
      body {
        margin: 0px;
      }
      .area-label {
        font-family: sans-serif;
        fill-opacity: 0.7;
        fill: white;
      }
      path:hover {
        fill-opacity: 1;
        fill:black;
      }
      path {
        fill-opacity: 0.8;
        stroke-width: 0.5;
      }
      text {
        pointer-events: none;
      }
      .axis .tick text, .legend text, .tooltip text {
        fill: #585858;
        font-family: sans-serif;
        font-size: 16pt;
      }
      .axis .tick line{
        stroke: #ddd;
      }
      .axis .domain {
        display: none;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      // Find the min and max year, then give the
      // full range of years between them.
      function computeYears (rawData) {
        var allYearsSet = d3.set();
        rawData.forEach(function (d) {
          d.values.forEach(function (d) {
            allYearsSet.add(d.key);
          });
        });
        var yearsExtent = d3.extent(allYearsSet
          .values()
          .map(function (yearStr) {
            return +yearStr;
          }));
        return d3
          .range(yearsExtent[0], yearsExtent[1] + 1)
          .map(function (year) {
            return new Date(year + "");
          });
      }

var bisectDate = d3.bisector(function (d) {
        return d.date;
      }).left;

function getInterpolatedValue (values, date, value){
        const i = bisectDate(values, date, 0, values.length - 1);
        if (i > 0) {
          const a = values[i - 1];
          const b = values[i];
          const t = (date - a.date) / (b.date - a.date);
          return value(a) * (1 - t) + value(b) * t;
        }
        return value(values[i]);
      }

// Interpolate values, create data structure
      // for d3.stack.
      function interpolateValues (years, rawData) {
        var value = function (d) {
          return d.value;
        };
        return years.map(function (date) {

// Create a new row object with the date.
          var row = {
            date: date 
          };

// Assign values to the new row object for each key.
          // Value for `key` here will be country name.
          rawData.forEach(function (d){
            row[d.key] = getInterpolatedValue(d.values, date, value);
          });

return row;
        });
      }

d3.csv('un.csv', function (rawData) {
        
        var keys = rawData.map(d => d.topic);
        var data = Object.keys(rawData[0]).map(d => +d)
        .filter(d => !isNaN(d))
        .map(y => {
          var o = { date: new Date(y,1,1)};
          keys.forEach((key,i) => { o[key] = +rawData[i][y]; })
          return o;
        })
        render(data, keys);
      });

var margin = { top: 0, bottom: 30, left: 0, right: 30 };

var area = d3.area()
        .x(d => xScale(xValue(d.data)))
        .y0(d => yScale(d[0]))
        .y1(d => yScale(d[1]))
        .curve(d3.curveBasis);
      
      // Render StreamGraph
      function render(data, keys) {
        stack.keys(keys);
        var stacked = stack(data);
        
        var innerWidth = width - margin.right - margin.left;
        var innerHeight = height - margin.top - margin.bottom;

xScale
          .domain(d3.extent(data, xValue))
          .range([0, innerWidth]);

yScale
          .domain([
            d3.min(stacked, function (series) {
              return d3.min(series, function (d) { return d[0]; });
            }),
            d3.max(stacked, function (series) {
              return d3.max(series, function (d) { return d[1]; });
            })
          ])
          .range([innerHeight, 0]);
        
        colorScale.domain(d3.range(keys.length));
        
        var paths = marksG.selectAll('path').data(stacked);
        paths
          .enter().append('path')
          .merge(paths)
            .attr('fill', function (d) { return colorScale(d.index); })
            .attr('stroke', function (d) { return colorScale(d.index); })
            .attr('d', area);

var labels = marksG.selectAll('text').data(stacked)
        labels
          .enter().append('text')
            .attr('class', 'area-label')
          .merge(labels)
            .text(function (d) { return d.key; })
            .attr('transform', d3.areaLabel(area));
        
        xAxis.tickSize(-innerHeight);
        xAxisG
          .attr('transform', `translate(0,${innerHeight})`)
          .call(xAxis);
      }
    </script>
  </body>
</html>

https://unpkg.com/d3@4.10.0

https://unpkg.com/d3-area-label@1.1.0