Skip to content

Instantly share code, notes, and snippets.

@Cynnexis

Cynnexis/.block

Created November 28, 2019 10:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Cynnexis/ef9e72d5b32637dc93a971dd608f652a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Cynnexis/ef9e72d5b32637dc93a971dd608f652a to your computer and use it in GitHub Desktop.
Download ZIP
TP3 - Cartographie
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap" rel="stylesheet">
<style lang="css">
.mini text {
font: 9px sans-serif;
}
div.tooltip {
position: absolute;
text-align: center;
width: 100px;
height: 50px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0;
border-radius: 8px;
pointer-events: none;
}
.navbar + .container {
margin-top: 100px;
}
.row > h1 {
margin-bottom: 30px;
}
</style>
<title>Introduction to D3</title>
</head>
<body>
<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
<div class="container">
<h1 class="navbar-brand">TP3 - Dataviz</h1>
</div>
</div>
<div class="container">
<div class="row">
<h1 class="col-12">Carte représentant le nombre de personnes malade de la grippe en France 2014, classé par mois.</h1>
<input type="range" value="1" min="1" max="12" step="1" class="custom-range col-10" id="month-slider" />
<span class="col-2" id="month-name">Month</span>
<div id="map-placeholder" class="col-12"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<script type="text/javascript">
let months = ["Janvier", "Février", "Mars", "Avril", "Mais", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
$(document).ready(function() {
$("#month-name").text(months[0]);
let w = 960;
let h = 580;
let defaultFonts = "'Raleway', monospace, sans-serif";
let defaultTransition = "easeQuad";
let defaultTransitionDuration = 200;
// Define the div for the tooltip
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// chart
let svg = d3
.select("#map-placeholder")
.append("svg")
.attr("width", w)
.attr("height", h);
let colors = d3.scaleQuantize()
.range(["#f7fbff", "#e3eef9", "#cfe1f2", "#b5d4e9", "#93c3df", "#6daed5", "#4b97c9", "#2f7ebc", "#1864aa", "#0a4a90", "#08306b"]);
const projection = d3.geoConicConformal()
.center([2.454071, 46.279229])
.scale(2800)
.translate([w/2, h/2]);
let path = d3.geoPath().projection(projection);
let regs = svg.append("g");
let monthlyFlu = null;
function drawMap(month) {
let valueRange = [
d3.min(Object.values(monthlyFlu), d => parseFloat(d[month])),
d3.max(Object.values(monthlyFlu), d => parseFloat(d[month]))
];
colors.domain(valueRange);
d3.json("https://lyondataviz.github.io/teaching/lyon1-m2/2019/data/regions.json")
.then(json => {
for (let regionName in monthlyFlu) {
if (monthlyFlu.hasOwnProperty(regionName)) {
let regionValue = monthlyFlu[regionName][month];
for (let j = 0; j < json.features.length; j++) {
let jsonRegion = json.features[j].properties.nom.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
if (regionName === jsonRegion) {
json.features[j].properties.value = regionValue;
break;
}
}
}
}
regs.selectAll("*").remove();
regs.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", d => {
let value = d.properties.value;
if (value)
return colors(value);
else
return "#ccc";
})
.on("mouseover", function(region) {
tooltip
.transition(defaultTransition)
.duration(defaultTransitionDuration)
.style("opacity", .9);
tooltip.html(`${region.properties.nom}: ${region.properties.value}`)
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY + "px")
})
.on("mouseout", function(_) {
tooltip
.transition(defaultTransition)
.duration(defaultTransitionDuration)
.style("opacity", 0);
});
});
}
d3.csv("https://lyondataviz.github.io/teaching/lyon1-m2/2019/data/GrippeFrance2014.csv")
.then(data => {
monthlyFlu = {};
for (let i = 0; i < data.length; i++) {
for (let mnt = 1; mnt <= 12; mnt++) {
let mntValue = 0;
for (let day = 1; day <= 31; day++) {
let date = '';
if (day < 10)
date += '0' + day.toString();
else
date += day.toString();
date += '/';
if (mnt < 10)
date += '0' + mnt.toString();
else
date += mnt.toString();
date += "/14";
if (data[i][date] !== undefined && data[i][date] !== null) {
mntValue += parseFloat(data[i][date]);
}
}
if (monthlyFlu[data[i].region] === undefined || monthlyFlu[data[i].region] === null)
monthlyFlu[data[i].region] = {};
monthlyFlu[data[i].region][mnt] = mntValue;
}
}
console.log(monthlyFlu);
drawMap(1)
});
d3.select("#month-slider").on("input", () => {
let m = $("#month-slider").val();
$("#month-name").text(months[m-1]);
drawMap(m);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment