| Server IP : 109.234.162.214 / Your IP : 216.73.216.222 Web Server : Apache System : Linux servd162214.srv.odns.fr 4.18.0-372.26.1.lve.1.el8.x86_64 #1 SMP Fri Sep 16 14:08:19 EDT 2022 x86_64 User : carpe ( 1178) PHP Version : 8.0.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/carpe/www/dataviz/ |
Upload File : |
<!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>