🗺️TD 1 - Tips

Lundi 23/10, 14h00 ou mardi 24/10, 8h00

Tips

Paramètres l'axe Y

const myChart = new Chart(
  document.getElementById('myChart'),
  {
    type: 'line',
    data: {
      labels: ['1', '2', '3', '4', '5'],
      datasets: [{
        label: 'A',
        data: [100, 96, 84, 76, 69],
        fill: true,
      }]
    },
    options: {
      scales: {
        y: {
          min: 0,
          max: 100
        }
      }
    }
  }
);

Deux axes

const myChart = new Chart(
  document.getElementById('myChart'),
  {
    type: 'line',
    data: {
      labels: ['1', '2', '3', '4', '5'],
      datasets: [{
        label: 'A',
        yAxisID: 'A',
        data: [100, 96, 84, 76, 69],
        fill: true,
      }, {
        label: 'B',
        yAxisID: 'B',
        backgroundColor: 'rgb(122, 99, 255)',
        borderColor: 'rgba(102, 99, 255, 0.2)',
        data: [1, 1, 0.5, 1, 0],
        fill: false,
      }]
    },
    options: {
      scales: {
        A: {
          type: 'linear',
          position: 'left',
        },
        B: {
          type: 'linear',
          position: 'right',
          ticks: {
            max: 1,
            min: 0
          }
        }
      }
    }
  }
);

Choix des données

Le HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
    <script src="assets/js/demo3.js" defer></script>
</head>
<body>
    <canvas id="graph"></canvas>
    <div>
        <input type="checkbox" id="check1" value="A" data-color="rgb(120,123,21)" data-label="A" data-value="[1, 3, 4, 6]">A
        <input type="checkbox" id="check1" value="B" data-color="rgb(21,123,121)" data-label="B" data-value="[4, 2, 41, 12]">B
        <input type="checkbox" id="check1" value="C" data-color="rgb(20,13,21)" data-label="C" data-value="[2, 0, 9, 6]">C
        <input type="checkbox" id="check1" value="D" data-color="rgb(120,13,21)" data-label="D" data-value="[10, 3, 7, 1]">D
    </div>
</body>
</html>

Le JS

const myChart = new Chart(
    document.getElementById('graph'),
    {
        type: 'line',
        data: {
            labels: ['1', '2', '3', '4'],
            datasets: []
        },
    }
);

document.querySelectorAll('input[type=checkbox]').forEach((e) => {
    e.addEventListener('click', (el) => {
        console.log('check')
        if (el.target.checked) {
            val = el.currentTarget.dataset.value.substring(1, el.currentTarget.dataset.value.length - 1).split(', ');
            obj = {
                label: el.currentTarget.dataset.label,
                data: val,
                fill: false,
                backgroundColor: el.currentTarget.dataset.color,
                borderColor: el.currentTarget.dataset.color,
            }
            myChart.data.datasets.push(obj);
            myChart.update()
        } else {
            myChart.data.datasets = myChart.data.datasets.filter((e) => e.label !== el.currentTarget.dataset.label)
            myChart.update()
        }
    })
})

Afficher une carte

Avec d3js : Installer D3js : https://www.datavis.fr/d3js/firststep

Le fichier html/JS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .map-tooltip {
            position: absolute;
            text-align: center;
            z-index: 1000;
            color: black;
            width: 275px;
            height: 37px;
            padding: 2px;
            font: 12px sans-serif;
            background: grey;
            border: 0px;
            border-radius: 8px;
            pointer-events: none;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script>
        const width = 550, height = 550;
        const path = d3.geoPath();
        const projection = d3.geoConicConformal()
            .center([2.454071, 46.279229])
            .scale(2600)
            .translate([width / 2, height / 2]);
        path.projection(projection);

        const svg = d3.select('#map').append("svg")
            .attr("id", "svg")
            .attr("width", width)
            .attr("height", height);

        const deps = svg.append("g");

        d3.json('assets/js/departments.json').then(function (geojson) {
            deps.selectAll("path")
                .data(geojson.features)
                .enter()
                .append("path")
                .attr('class', 'department')
                .attr("d", path)//récupère chaque path (chaque département), possible de changer la couleur de path avec un attribut sur le SVG
                .on("mouseover", function (event, d) {
                    console.log(d)//d contient les informations du département survolé
                    div.transition()
                        .duration(200)
                        .style("opacity", .9);
                    div.html("Département : " + d.properties.NOM_DEPT + "<br/>"
                        + "Région : " + d.properties.NOM_REGION)
                        .style("left", (event.pageX + 30) + "px")
                        .style("top", (event.pageY - 30) + "px")
                })
                .on("mouseout", function (event, d) {
                    div.style("opacity", 0);
                    div.html("")
                        .style("left", "-500px")
                        .style("top", "-500px");
                });
        });

        let div = d3.select("body").append("div")
            .attr("class", "map-tooltip")
            .style("opacity", 0);
    </script>
</body>

</html>

Il faut récupérer un fichier geoJson ici : https://github.com/gregoiredavid/france-geojson

Et le charger à la place de departements.json

Un autre exemple de carte avec des couleurs : https://www.datavis.fr/d3js/map-population

Il faut ici une source CSV pour avoir les données de population.

Ou encore un autre exemple ici : https://www.datavis.fr/d3js/map-improve

PrécédentTD 1 - Premiers graphiques SuivantCours magistral 1 - Donner du sens aux données

Mis à jour il y a 1 an