Les couleurs du Décodex

Une carte du décodex du Monde.

[Mise à jour: le serveur du Monde n'autorise plus l'accès de sites tiers au fichier de données https://www.lemonde.fr/webservice/decodex/updates, ce qui casse cette visualisation. Ne sachant s'il est autorisé de recopier le fichier ici, je m'abstiens.]

Le Monde vient de publier son “Décodex: nos conseils pour vérifier les informations qui circulent en ligne”.

Il s'agit d'une liste de sites, commentés et notés selon un schéma de couleurs.

vert: “fiable”
bleu: “satirique ou parodique”
orange: “régulièrement imprécis”
rouge: “diffuse régulièrement de fausses informations”
gris: “pas une source à proprement parler”

Nous les regroupons ici en fonction de certains mots-clés contenus dans les descriptifs, avec l'algorithme t-SNE.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
 
    <style>
        body {
            margin: 0;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
          font-family: monospace;
        }
      #tip {
        position: absolute;
        top: -100;
        left: 0;
        z-index: 2;
        background: white;
        padding: 2px;
        pointer-events: none;
        max-width: 27em;
      }
      
      #legende {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        background: rgba(255,255,255,0.2);
        padding: 2px;
        pointer-events: none;
        max-width: 27em;
      }
    </style>
</head>

<body>
<script>
    const width = 820,
        height = 820,
        margin = { top: 60, bottom: 60, left: 60, right: 60 },
        scalecountry = d3.scaleLinear().range(['#777', '#60c7ff',  '#fe4823', 'orange','#00e00b',]).domain([0,1,2,3,4]),
        centerx = d3.scaleLinear()
        .range([0, width]),
        centery = d3.scaleLinear()
        .range([0, height]);
    const svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', `translate(${margin.left}, ${margin.top})`);

const tip = d3.select('body').append('div').attr('id', 'tip')
  
    d3.json('https://www.lemonde.fr/webservice/decodex/updates', function (json) {

tags = [/\bblog/, /bpas une source/, /\b(complot|conspi)/, /\bdroite/, /\b(gauche)/, /\b(extrême[- ]droite|national[ei]|patri|antisé|migran|raciste|homophob|islam|ivg)/, /\bfran[çc][ea]/, /\baméri/, /\b(faux|fausse|erroné|fictif|mauvais|trompeu|condamn)/, /\b(satirique|parodi|blague|caricatur)/, /b(opinion|militant)/, /\brégional/, /\b(journal\b|presse|quotidien|magazine|hebdo)/, /\bspécialis/, /\b(peu fiable|sensation|racole|vérifi)/ ];
      
      
        const data = d3.values(json.sites)
            .map((d, i) => {
              return {
                lon: Math.random(),
                lat: Math.random(), 
                name: d[2],
                link: 'https://www.lemonde.fr/verification/source/' + d[3] + '/',
                r: 12.5,
                score: +d[0],
                desc: d[1],
                tags: tags.map(tag => !!d[1].toLowerCase().match(tag)),
                color: scalecountry(+d[0])
              };
            });

// pos is the array of positions that will be updated by the tsne worker
        // start with the geographic coordinates as is (plate-carrée)
        // random or [0,0] is fine too
        let pos = data.map(d => [d.lon, -d.lat]);

const forcetsne = d3.forceSimulation(
          data.map(d => (d.x = width / 2, d.y = height / 2, d))
        )
            .alphaDecay(0.005)
            .alpha(0.2)
            .force('tsne', function (alpha) {

centerx.domain(d3.extent(pos.map(d => d[0]))); 
                centery.domain(d3.extent(pos.map(d => d[1])));

data.forEach((d, i) => {
                    d.x += alpha * (centerx(pos[i][0]) - d.x);
                    d.y += alpha * (centery(pos[i][1]) - d.y);
                });
            })
            .force('collide', d3.forceCollide().radius(d => 1 + d.r))
            .on('tick', function () {

// drawcanvas(canvas, data);
              drawsvg(svg, data);

});

function drawsvg(svg, nodes) {
          const g = svg.selectAll('g.city')
          .data(nodes);
          
          var enter = g.enter().append('g').classed('city', true);

enter.append('circle')
          .attr('r', d => d.r)
          .attr('fill', d => d.color)
          .on('click', d => {
            window.open(d.link,'targetWindow');
          })
          .on('mouseover', function(d) {
            tip
            .style('left', Math.min(width - 200, d.x - 10)+'px')
            .style('top', Math.min(height-100, d.y + margin.top + 10)+'px')
            .html(d.name + '<br><small><em>Commentaire des Décodeurs:</em> ' + d.desc + '</small>')
          }); 
          
          enter
          .filter(d => d.r > 7)
          .append('text')
          .attr('fill', 'white')
          .style('font-size', '10px')
          .attr('text-anchor', 'middle')
          .attr('dominant-baseline', 'middle')
          .attr('pointer-events', 'none')
          .text(d => d.name.replace(/^(Le |La |L')/, '').substring(0,4));
          
          g.attr('transform', d => `translate(${d.x},${d.y})`);

}

d3.queue()
    .defer(d3.text, 'tsne.js')
    .defer(d3.text, 'https://unpkg.com/d3-geo')
    .defer(d3.text, 'worker.js')
    .awaitAll(function (err, scripts) {

const worker = new Worker(
      window.URL.createObjectURL(
        new Blob(scripts, {
          type: "text/javascript"
        })
      )
    );
  
  worker.postMessage({
      maxIter: 10,
      dim: 2,
      perplexity: 30.0,
      data: data
  });

worker.onmessage = function (e) {
    if (e.data.log) console.log.apply(this, e.data.log);
    if (e.data.pos) pos = e.data.pos;
    if (e.data.done && e.data.done < 10000  && e.data.cost > 1e-2) {
      worker.postMessage({
            maxIter: e.data.done + 10,
      });
    }
  };
});
      
    });
</script>
</body>

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