| 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/public_html/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>
</head>
<style>
body{
all:initial;
margin:0;
padding:0;
width:100%;
height:auto;
background:url('mariage.jpg');
background-size:cover;
background-attachment:fixed;
display:block;
}
canvas{
width:100%;
height:100%;
}
#map {
margin:0;
padding:0;
height: 100%;
width:auto;
}
.leaflet-control-attribution{
display:none;
}
#contain1{
width:100%;
height:100vh;
}
#contain2{
background:white;
width:100%;
height:100vh;
}
#contain3{
background:white;
width:100%;
height:100vh;
}
#contain4{
background:white;
width:100%;
height:100vh;
}
</style>
<body>
<div id='contain1'></div>
<div id='contain2'>
<h1>Nombre de mariages en France par mois</h1>
<canvas id="myChart" width="400" height="200"></canvas>
</div>
<div id='contain3'>
<h1>Nombre de mariages en France par jours</h1>
<canvas id="myChart2" width="400" height="200"></canvas>
</div>
<div id='contain4'>
<h1>Nombre de mariages en fonction des départements</h1>
<div id="map"></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: 'Marriages 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: 'Marriages 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>