Aller au contenu

Les données structurées et leur traitement

Le programme⚓︎

Les données constituent la matière première de toute activité numérique. Afin de permettre leur réutilisation, il est nécessaire de les conserver de manière persistante. Les structurer correctement garantit que l’on puisse les exploiter facilement pour produire de l’information. Cependant, les données non structurées peuvent aussi être exploitées, par exemple par les moteurs de recherche.

Repères historiques
  • 1930 : utilisation des cartes perforées, premier support de stockage de données
  • 1956 : invention du disque dur permettant de stocker de plus grandes quantités de données, avec un accès de plus en plus rapide
  • 1970 : invention du modèle relationnel (E. L. Codd) pour la structuration et l’indexation des bases de données
  • 1979 : création du premier tableur, VisiCalc
  • 2009 : Open Government Initiative du président Obama
  • 2013 : charte du G8 pour l’ouverture des données publiques.
Les données et l’information

Une donnée est une valeur décrivant un objet, une personne, un événement digne d’intérêt pour celui qui choisit de la conserver. Par exemple, le numéro de téléphone d’un contact est une donnée. Plusieurs descripteurs peuvent être utiles pour décrire un même objet (par exemple des descripteurs permettant de caractériser un contact : nom, prénom, adresse et numéro de téléphone).

Une collection regroupe des objets partageant les mêmes descripteurs (par exemple, la collection des contacts d’un carnet d’adresses). La structure de table permet de présenter une collection : les objets en ligne, les descripteurs en colonne et les données à l’intersection. Les données sont alors dites structurées.

Pour assurer la persistance des données, ces dernières sont stockées dans des fichiers. Le format CSV (Comma Separated Values, les données avec des séparateurs) est un format de fichier simple permettant d’enregistrer une table. À tout fichier sont associées des métadonnées qui permettent d’en décrire le contenu. Ces métadonnées varient selon le type de fichier (date et coordonnées de géolocalisation d’une photographie, auteur et titre d’un fichier texte, etc.).

Les données comme les métadonnées peuvent être capturées et enregistrées par un dispositif matériel ou bien renseignées par un humain. Elles sont de différents types (numériques, textes, dates) et peuvent être traitées différemment (calcul, tri, affichage, etc.).

Certaines collections typiques sont utilisées dans des applications et des formats standardisés leur sont associés : par exemple le format ouvert vCard (extension .vfc) pour une collection de contacts.

Une base de données regroupe plusieurs collections de données reliées entre elles. Par exemple, la base de données d’une bibliothèque conserve les données sur les livres, les abonnés et les emprunts effectués.

Les algorithmes et les programmes

La recherche dans des données structurées a d’abord été effectuée selon une indexation préalable faite par l’homme. Des algorithmes ont ensuite permis d’automatiser l’indexation à partir de textes, d’images ou de sons.

Une table de données peut faire l’objet de différentes opérations : - rechercher une information précise dans la collection, trier la collection sur une ou plusieurs propriétés, - filtrer la collection selon un ou plusieurs tests sur les valeurs des descripteurs - effectuer des calculs, - mettre en forme les informations produites pour une visualisation par les utilisateurs.

La recherche dans une base comportant plusieurs collections peut aussi croiser des collections différentes sur un descripteur commun ou comparable.

Les machines

Les fichiers de données sont stockés sur des supports de stockage : internes (disque dur ou SSD) ou externes (disque, clé USB), locaux ou distants (cloud). Ces supports pouvant subir des dommages entraînant des altérations ou des destructions des données, il est nécessaire de réaliser des sauvegardes.

Des recherches dans les fichiers se font à l’intérieur même des ordinateurs, soit sur la base de leurs métadonnées, soit sur la base d’une indexation (à la manière des moteurs de recherche sur le Web).

Les grandes bases de données sont souvent implémentées sur des serveurs dédiés (machines puissantes avec une importante capacité de stockage sur disques). Ces centres de données doivent être alimentés en électricité et maintenus à des températures suffisamment basses pour fonctionner correctement.

Impacts sur les pratiques humaines

L’évolution des capacités de stockage, de traitement et de diffusion des données fait qu’on assiste aujourd’hui à un phénomène de surabondance des données et au développement de nouveaux algorithmes capables de les exploiter.

L’exploitation de données massives (Big Data) est en plein essor dans des domaines aussi variés que les sciences, la santé ou encore l’économie. Les conséquences sociétales sont nombreuses tant en termes de démocratie, de surveillance de masse ou encore d’exploitation des données personnelles.

Certaines de ces données sont dites ouvertes (OpenData), leurs producteurs considérant qu’il s’agit d’un bien commun. Mais on assiste aussi au développement d’un marché de la donnée où des entreprises collectent et revendent des données sans transparence pour les usagers. D’où l’importance d’un cadre juridique permettant de protéger les usagers, préoccupation à laquelle répond le règlement général sur la protection des données (RGPD).

Les centres de données (datacenter) stockent des serveurs mettant à disposition les données et des applications les exploitant. Leur fonctionnement nécessite des ressources (en eau pour le refroidissement des machines, en électricité pour leur fonctionnement, en métaux rares pour leur fabrication) et génère de la pollution (manipulation de substances dangereuses lors de la fabrication, de la destruction ou du recyclage). De ce fait, les usages numériques doivent être pensés de façon à limiter la transformation des écosystèmes (notamment le réchauffement climatique) et à protéger la santé humaine.

Les données structurées et leur traitement : introduction⚓︎

Manipuler un fichier CSV

Utiliser les données venant de plusieurs sources

Travail à faire

  • Récupérer l'archive maCarte.zip, la décompresser. Le fichier maCarte.html se trouve à l'intérieur.
  • Suivre les directives de la vidéo et adapter le script pour afficher les bornes Vélomagg sur la carte.

Organisation des données

Travail à Faire

En vous basant sur l'exemple du cours, réaliser la base de données au format csv correspondant aux informations suivantes :

  • Le numéro de téléphone de Christelle Lepoint est le 0788596847, elle habite à Vauvert.
  • Marc Rappel peut être joint au 0751642887, il vit à Marsillargues.
  • Géraldine Mémet est de Lansargues, pour l'appeler : 0467293717.

Le logiciel Notepad++ ou le bloc-note de Windows vous permettront d'enregistrer votre fichier txt avec l'extension csv

création d'une application de recherche automatique de station vélomagg la plus proche⚓︎

Accédez à la version finale du projet

Voir le code

Il y a beaucoup de lignes, mais l'essentiel sont des commentaires visant à comprendre ce que fait cette page.

Si cela vous intéresse, prenez donc le temps de lire attentivement les commentaires et éventuellement testez les modifications

JavaScript
<!DOCTYPE html>
<head>    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.4.0/dist/leaflet.js"></script><!--le code qui gère l'affichage de la carte-->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.4.0/dist/leaflet.css"/><!--Permet l'agencement des morceaux de carte-->

    <style> /*On définit ici les dimensions de l'image et de la carte*/
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #ma_carte {
        width: 100%;
        height: 100%;
        left: 0%;
        top: 0%;

        }
    </style>
</head>
<body>    

    <div  id="ma_carte" ></div>
    <table style="display:none;"><tr><td id="latitude"></td><td id="longitude"></td></tr></table>
</body>
<script src="https://site-web3-448b34.forge.apps.education.fr/2nde_SNT/localisation/carte_montpellier_simplifiee.js"></script>
<script>

    //------------------------------------------------ Affichage de la carte -------------------------------------------------------------------------------   
    function distance(A,B){
        return Math.round(6.37e6*Math.sqrt(Math.pow(((A[0]-B[0])*Math.PI/180),2)+0.75*Math.cos(Math.PI*B[0]/180)*Math.pow(((A[1]-B[1])*Math.PI/180),2)))
    }


    function couleur_distance(dist,maxdist){ // code trouvé sur https://academo.org/demos/wavelength-to-colour-relationship/
            if (dist > maxdist){
                return "rgb(0,0,0)"
            }
            wavelength = 380 + (780 - 380) * (dist) / maxdist;
            var Gamma = 0.80,
            IntensityMax = 255,
            factor, red, green, blue;
            if((wavelength >= 380) && (wavelength<440)){
                red = -(wavelength - 440) / (440 - 380);
                green = 0.0;
                blue = 1.0;
            }else if((wavelength >= 440) && (wavelength<490)){
                red = 0.0;
                green = (wavelength - 440) / (490 - 440);
                blue = 1.0;
            }else if((wavelength >= 490) && (wavelength<510)){
                red = 0.0;
                green = 1.0;
                blue = -(wavelength - 510) / (510 - 490);
            }else if((wavelength >= 510) && (wavelength<580)){
                red = (wavelength - 510) / (580 - 510);
                green = 1.0;
                blue = 0.0;
            }else if((wavelength >= 580) && (wavelength<645)){
                red = 1.0;
                green = -(wavelength - 645) / (645 - 580);
                blue = 0.0;
            }else if((wavelength >= 645) && (wavelength<781)){
                red = 1.0;
                green = 0.0;
                blue = 0.0;
            }else{
                red = 0.0;
                green = 0.0;
                blue = 0.0;
            };
            // Let the intensity fall off near the vision limits
            if((wavelength >= 380) && (wavelength<420)){
                factor = 0.3 + 0.7*(wavelength - 380) / (420 - 380);
            }else if((wavelength >= 420) && (wavelength<701)){
                factor = 1.0;
            }else if((wavelength >= 701) && (wavelength<781)){
                factor = 0.3 + 0.7*(780 - wavelength) / (780 - 700);
            }else{
                factor = 0.0;
            };
            if (red !== 0){
                red = Math.round(IntensityMax * Math.pow(red * factor, Gamma));
            }
            if (green !== 0){
                green = Math.round(IntensityMax * Math.pow(green * factor, Gamma));
            }
            if (blue !== 0){
                blue = Math.round(IntensityMax * Math.pow(blue * factor, Gamma));
            }
            return "rgb("+red+","+green+","+blue+")";
        }

    function poly(x){
        x = x%1800 ;
        if (x < 1200) { return Math.min(255,Math.round(7.083e-4 * x * (1200 - x))) }
        return 0
    }

    function afficher(liste){


        centrage_carte=[43.608461,3.879509] //position GPS des 3 Grâces




        //on crée un objet la_carte (qu'on ira afficher dans le div "ma_carte", qui est vide pour le moment)
        var la_carte = L.map( //L.map est défini dans le script "leaflet.js" qu'on a ajouté à la ligne 5. On ne les voit pas, mais ce script contient beaucoup de fonctions que l'on peut utiliser
            'ma_carte', { //première info : l'identifiant de l'élément de la page dans laquelle la carte va se dessiner
            center: [(max_lat+min_lat)/2,(max_long+min_long)/2], //coordonnées du centre de la carte, qu'on a indiquées ligne 87
            zoom: 13, // le niveau de zoom : 0-> monde entier ; 18-> maison
            layers: [], //on peut mettre plusieurs couches sur une carte, pour l'instant il n'y en a aucune
            crs: L.CRS.EPSG3857, //indique le système de coordonnées (ne pas modifier)
            zoomControl: true, //fait apparaître les bouton +/- du zoom à l'écran
            });
        // tracé des frontières de Montpellier
        // les variables montpellier, min_lat, max_lat, min_long et max_long sont présentes dans la carte de montpellier.js
        m = montpellier
        for (var i=0; i<m.length-1; i++){
            L.polyline([[m[i][0], m[i][1]],[m[i+1][0],m[i+1][1]]]).addTo(la_carte);
        }

        //détermination de la distance à laquelle se trouve une borne sur un ensemble de rectangle de dimension donnée

        for (var lat = min_lat; lat <= max_lat; lat += (max_lat-min_lat)/100){

            latitude = lat + (max_lat-min_lat)/200
            for (var longi = min_long; longi <= max_long; longi += (max_long-min_long)/100){
                longitude = longi + (max_long-min_long)/200
                //console.log(lat,longi)
                //Calcul de la distance à laquelle se trouve la station
                plus_proche = 3.84e8; //on crée une station sur la Lune pour initialiser la recherche. Si c'est cette station qui sort, y'a un (gros) problème. Arrêtez de parler klingon, monsieur !

                //On calcule à quelle distance à vol d'oiseau vous vous trouvez de chaque station et on cherche la plus proche

                for (var i=0;i<liste.length;i++){
                    current_distance = distance([latitude,longitude],[liste[i][1],liste[i][2]]);
                    //console.log(current_distance)
                    if (current_distance < plus_proche){
                        plus_proche = current_distance;
                    }
                }
                //console.log([lat,longi],[lat+(max_lat-min_lat)/100,longi+(max_long-min_long)/100])
                //L.rectangle([43.57,3.81],[43.65,3.90],{fillColor:"#aaa"})
                if (dedans(montpellier,[latitude,longitude])){
                    /*if (distance([43.608461,3.879509],[latitude,longitude]) < 1000){
                        L.rectangle([[lat,longi],[lat+(max_lat-min_lat)/100,longi+(max_long-min_long)/100]],{fillColor:"#c0c0c0",fillOpacity:0.5, weight : 0}).addTo(la_carte)
                    }
                    else {*/
                    L.rectangle([[lat,longi],[lat+(max_lat-min_lat)/100,longi+(max_long-min_long)/100]],{fillColor:couleur_distance(plus_proche,1600),fillOpacity:0.5, weight : 0}).addTo(la_carte)
                    //}
                }

            }
        }
        //L.circle([43.608461,3.879509],1000,{color:"#0000ff",fillOpacity:0.5, weight : 0}).addTo(la_carte)



        calque_01 = L.tileLayer( //crée le calque de la carte
            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', //adresse où aller chercher les cartes (ne pas toucher)
            {
            "attribution": null,
            "detectRetina": false,
            "maxNativeZoom": 18,
            "maxZoom": 18,
            "minZoom": 0,
            "noWrap": false,
            "opacity": 1,
            "subdomains": "abc",
            "tms": false
        }).addTo(la_carte);//ajoute ce calque à la carte
    }

    function prod_vect(AB,CD) {
        return (AB[0] * CD[1]) - (AB[1] * CD[0])
        }

    function intersect(A,B,C,D){
        un = prod_vect([B[0]-A[0],B[1]-A[1]],[C[0]-A[0],C[1]-A[1]])
        deux = prod_vect([B[0]-A[0],B[1]-A[1]],[D[0]-A[0],D[1]-A[1]])
        trois = prod_vect([D[0]-C[0],D[1]-C[1]],[A[0]-C[0],A[1]-C[1]])
        quatre = prod_vect([D[0]-C[0],D[1]-C[1]],[B[0]-C[0],B[1]-C[1]])

        if (un * deux < 0 && trois * quatre < 0){return true}
        return false
        }

    function dedans(polygone,point){
        nb_inter = 0
        for (var i=1; i<polygone.length; i++){
            nb_inter += intersect(point,[0,0],polygone[i-1],polygone[i])
            }
        return nb_inter%2
        }
    //------------ récupération des données vélomagg ---------------------------------    
    const url = 'https://portail-api-data.montpellier3m.fr/bikestation?limit=1000'; // utilisation de l'api opendata de Montpellier
    stations = []
    donnees = ""                                                                                    // cette adresse liste toutes les stations Velomagg de l'agglo
    fetch(url)
    .then(response => response.json())
    .then(data => {
        /*
        console.log(data[0])
        console.log(data[0]["availableBikeNumber"].value)
        console.log(data[0]["location"].value.coordinates)
        console.log(data[0]["address"].value.streetAddress)
        */
        for(var i=0;i<data.length;i++){

            station=data[i];
            stations.push([station["address"].value.streetAddress,                  // nom de la station
                            station["location"].value.coordinates[1],           // latitude
                            station["location"].value.coordinates[0],           // longitude
                            station["availableBikeNumber"].value,
                            station["freeSlotNumber"].value,
                            station["totalSlotNumber"].value
                            ]);

        }
        //console.log(data);
        afficher(stations);
    })
    .catch(error => {
        // Gérer les erreurs ici
        console.error(error);
    });

    //--------------------------------------------------- Fin de la récupération des positions des vélomagg --------------------------------------------------

    </script>