Файловый менеджер - Редактировать - /home/carpe/public_html/dataviz/mariage.php
Назад
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="main2.css"> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.9.0/math.min.js"></script> <title>Statistiques</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> </head> <style> * { box-sizing: border-box; /* Inclut les bordures et marges dans les dimensions des éléments */ } body{ margin:0; padding:0; width:100%; height:auto; background:#F5F5F5; background:url('mariage.jpg'); background-size:100%; overflow-x: hidden; background-repeat:no-repeat; font-family: "Poppins", serif; font-weight: 600; font-style: normal; } #title1{ margin:0; padding:0; padding-top:0px; padding-bottom:10px; position:relative; bottom:70px; } #contain1{ width:100%; height:100vh; } #contain2{ margin:0; padding:0; width:100%; background:white; display:flex; position:relative; bottom:70px; } #contain2 { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 20px; padding: 20px; padding-bottom:50px; } canvas { width: 100%; height: auto; flex: 1 1 45%; max-width: 800px; text-align: center; } #title1{ background:white; width:100%; text-align:center; } #contain4{ width:100%; margin:0; padding:0; display:flex; justify-content:space-around; align-items:start; } #texte{ width:500px; } #texte1{ width:600px; margin-top:200px; margin-left:200px; } #map { margin:0; padding:0; width:600px; height:600px; } .leaflet-control-attribution{ display:none; } #color1{ width:60px; height:20px; background:#FFFAE5; border:1px black solid; } #color2{ width:60px; height:20px; background:#FFEDA0; border:1px black solid; } #color3{ width:60px; height:20px; background:#FED976; border:1px black solid; } #color4{ width:60px; height:20px; background:#FEB24C; border:1px black solid; } #color5{ width:60px; height:20px; background:#FD8D3C; border:1px black solid; } #color6{ width:60px; height:20px; background:#FC4E2A; border:1px black solid; } #color7{ width:60px; height:20px; background:#E31A1C; border:1px black solid; } #color8{ width:60px; height:20px; background:#BD0026; border:1px black solid; } .legende{ display:flex; align-items:center; gap:20px; } #texte1 h3{ color:#F5F5F5; background:#252525; padding:10px 15px 10px 15px; border-radius:25px; cursor:pointer; } </style> <body> <div id='contain1'> <div id='texte1'> <h1>Statistiques sur les mariages en 2021</h1> <p>Ce site propose une mise en forme des données officielles du gouvernement relatives au mariages en France en 2021.</p> <P>Vous pouvez retrouver les données présentées directement sur le site <a href='https://www.data.gouv.fr/fr/'>https://www.data.gouv.fr/fr/</a></P> <h3>Découvrir</h3> </div> </div> <h1 id='title1'>Statistiques sur le nombre de mariages dans l'année</h1> <div id='contain2'> <canvas id="myChart" ></canvas> <canvas id="myChart2" width="400" height="200"></canvas> </div> <div id='contain4'> <div id="map"></div> <div id='texte'> <h1>Nomre de mariages par département</h1> <p>Carte de la France représentant la densité de mariages en fonction des départements en 2021.</p> <div class='legende'> <div id='color1'></div> <p>Moins de 200 mariages</p> </div> <div class='legende'> <div id='color2'></div> <p>Entre 200 et 300 mariages</p> </div> <div class='legende'> <div id='color3'></div> <p>Entre 300 et 400 mariages</p> </div> <div class='legende'> <div id='color4'></div> <p>Entre 400 et 500 mariages</p> </div> <div class='legende'> <div id='color5'></div> <p>Entre 500 et 600 mariages</p> </div> <div class='legende'> <div id='color6'></div> <p>Entre 600 et 700 mariages</p> </div> <div class='legende'> <div id='color7'></div> <p>Entre 800 et 900 mariages</p> </div> <div class='legende'> <div id='color8'></div> <p>Plus de 900</p> </div> </div> </div> <script> var tab = []; var cause =''; const nomsMois = { "01": "Janvier", "02": "Février", "03": "Mars", "04": "Avril", "05": "Mai", "06": "Juin", "07": "Juillet", "08": "Août", "09": "Septembre", "10": "Octobre", "11": "Novembre", "12": "Décembre" }; const nomsJours = { "1": "Lundi", "2": "Mardi", "3": "Mercredi", "4": "Jeudi", "5": "Vendredi", "6": "Samedi", "7": "Dimanche" }; cause = 'mois'; $.ajax({ url:'check.php', data:{cause:cause}, type:'POST', success: function(res){ tab = res.split('.').filter(item => item.trim() !== ''); console.log('Tab Mois') console.log(tab) const donnees = tab.map(item => { const [mois, marriages] = item.split(','); return { mois: nomsMois[mois], marriages: parseInt(marriages, 10) }; }); const labels = donnees.map(d => d.mois); const data = donnees.map(d => d.marriages); const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [{ label: 'Mariages par mois en 2021', data: data, backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor: 'rgba(54, 162, 235, 1)', borderWidth: 1 }] } }); } }) cause = 'jour'; $.ajax({ url:'check.php', data:{cause:cause}, type:'POST', success: function(res){ tab = res.split('.').filter(item => item.trim() !== ''); console.log('Tab jours') console.log(tab) const donnees2 = tab.map(item => { const [jours, marriages] = item.split(','); return { jours: nomsJours[jours], marriages: parseInt(marriages, 10) }; }); const labels = donnees2.map(d => d.jours); const data2 = donnees2.map(d => d.marriages); const ctx2 = document.getElementById('myChart2').getContext('2d'); const myChart2 = new Chart(ctx2, { type: 'bar', data: { labels: labels, datasets: [{ label: 'Mariages par jour en 2021', data: data2, backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor: 'rgba(54, 162, 235, 1)', borderWidth: 1 }] } }); } }) </script> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <script> // Initialiser la carte var map = L.map('map', { center: [46.603354, 1.888334], zoom: 6, zoomControl: false, scrollWheelZoom: false, dragging: false, touchZoom: true,//sur mobil ca doubleClickZoom: false, boxZoom: false, }); const populationData = {}; function getColor(population) { return population > 900 ? '#800026' : // Rouge foncé pour > 900 population > 800 ? '#BD0026' : // Rouge pour > 800 population > 700 ? '#E31A1C' : // Rouge clair pour > 700 population > 600 ? '#FC4E2A' : // Orange foncé pour > 600 population > 500 ? '#FD8D3C' : // Orange pour > 500 population > 400 ? '#FEB24C' : // Jaune orange pour > 400 population > 300 ? '#FED976' : // Jaune clair pour > 300 population > 200 ? '#FFEDA0' : // Jaune très clair pour > 200 '#FFFAE5'; // La couleur la plus claire pour les valeurs < 200 } function style(feature) { const deptCode = feature.properties.code; // On suppose que le code du département est dans la propriété "code" const population = populationData[deptCode] || 0; // On récupère la population du département, ou 0 si non trouvée console.log(population) return { color: 'white', // Bordure blanche weight: 1, // Poids de la bordure fillOpacity: 0.7, // Opacité du remplissage fillColor: getColor(population) // Couleur de remplissage en fonction de la population }; } setTimeout(function(){ fetch('departements.geojson') .then(response => response.json()) .then(data => { L.geoJSON(data, { style: style }).addTo(map); }) .catch(error => console.error('Erreur de chargement du fichier GeoJSON:', error)); },1000) fetch('departements.geojson') .then(response => response.json()) .then(data => { // Créer un objet vide pour stocker les codes et valeurs aléatoires // Parcourir chaque feature dans les données GeoJSON data.features.forEach(index => { // Récupérer le code du département const code = index.properties.code; // Générer une valeur aléatoire entre 100 et 1000 const randomPopulation = Math.floor(Math.random() * (1000 - 100 + 1)) + 100; // Associer le code à la population aléatoire dans l'objet populationData populationData[code] = randomPopulation; // Afficher l'association code => population console.log(`Code: ${code}, Population: ${randomPopulation}`); }); // Afficher l'objet populationData complet }) .catch(error => console.error('Erreur de chargement du fichier GeoJSON:', error)); console.log(populationData); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 8.0.30 | Генерация страницы: 0 |
proxy
|
phpinfo
|
Настройка