Public
Edited
Feb 11, 2023
geodata_fr = await d3.json("https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements-version-simplifiee.geojson");
// https://github.com/d3/d3-geo-projection
projection = d3.geoConicConformal()
.center([2.454071, 46.279229])
.scale(2800)
geomap(geodata_fr)
geomap = (data, width = 800, height= 500) => {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
const path = d3.geoPath()
.projection(projection);
svg.selectAll("path")
.data(data.features)
.join("path")
.attr("d", path)
.attr("fill", "#000")
.attr("stroke", "#eee")
return svg.node()
}
datacovid = {
let raw = await FileAttachment("covid-06-11-2021.csv").csv();
let utcParse = d3.utcParse("%Y-%m-%d");
let r = []
raw.forEach(d=>{
let res ={}
res.dep = +d.dep
res.sexe = d.sexe;
res.jour = utcParse(d.jour);
res.hosp = parseInt(d.hosp);
res.rea = +d.rea
res.HospConv = +d.HospConv
res.SSR_USLD = +d.SSR_USLD
res.autres = +d.autres
res.rad = +d.rad
res.dc= +d.dc
r.push(res)
})
return r
}
data1 = d3.filter(datacovid, d => d.sexe == "0")
data1_extent = d3.extent(data1, d => d.jour)
data1_dates = {
let data1_dates = d3.map(datacovid, d=> d3.utcFormat("%Y-%m-%d")(d.jour))
let set = new Set(data1_dates)
return d3.map(set, d => {
return d3.utcParse("%Y-%m-%d")(d);
});
}
deparements_description = {
return {
extent : d3.extent(data1, d => d.dep),
total : [...new Set(d3.map(data1, d => d.dep))].length
}
}
geomap_covid(data1, geodata_fr, jourChoisi)
geomap_covid = (data, json, jourChoisi, width = 800, height= 500) => {
// const definitions
const margin = {top: 25, right: 35, bottom: 35, left: 45},
legend = { x : 0, y : 0, step: 25,
sym:{
x: 0, y: 0, size: 8
}, cap:{
x: 0, height: 0, size: 13.5
}},
svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]),
// Geo Path
path = d3.geoPath()
.projection(projection),
// Color scale
color = d3.scaleQuantize()
.range(["#edf8e9", "#bae4b3", "#74c476", "#31a354", "#006d2c"]);
// Fill each region nb. of hosps according to the color scale on a given date.
// Covid data has been parsed earlier in the notebook.
const cleanData = data;
let length = json.features.length
let dep_data;
let day_data = d3.group(cleanData, d => d.jour).get(jourChoisi);
for (var j = 0; j < length; j++) {
var departement = +json.features[j].properties.code
if ([undefined, NaN, null].includes(departement))
continue;
dep_data = d3.filter(day_data, d =>{return d.dep == departement})[0]
json.features[j].properties.value = dep_data.hosp;
}
color.domain(
d3.extent(day_data, d => d.hosp)
);
// on dessine
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", (d,i) => {
var value = d.properties.value;
return value ? color(value) : color(0+i*50);
})
.attr("stroke", "#eee");
return svg.node();
}
geomap_ttip(data1, geodata_fr, jourChoisi2)
geomap_ttip = (data, json, jourChoisi, width = 800, height= 500) => {
// const definitions
const margin = {top: 25, right: 35, bottom: 35, left: 45},
legend = { x : 0, y : 0, step: 25,
sym:{
x: 0, y: 0, size: 8
}, cap:{
x: 0, height: 0, size: 13.5
}},
div = d3.create('div'),
svg = div.append("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]),
// Geo Path
path = d3.geoPath()
.projection(projection),
// Color scale
color = d3.scaleQuantize()
.range(["#edf8e9", "#bae4b3", "#74c476", "#31a354", "#006d2c"]);
// Fill each region nb. of hosps according to the color scale on a given date.
// Covid data has been parsed earlier in the notebook.
const cleanData = data;
let length = json.features.length
let dep_data;
let day_data = d3.group(cleanData, d => d.jour).get(jourChoisi);
for (var j = 0; j < length; j++) {
var departement = +json.features[j].properties.code
if ([undefined, NaN, null].includes(departement))
continue;
dep_data = d3.filter(day_data, d =>{return d.dep == departement})[0]
json.features[j].properties.value = dep_data.hosp;
}
color.domain(
d3.extent(day_data, d => d.hosp)
);
// Tooltip
const tooltip = d3.select("body")
.append("div")
.attr("class", "ttip")
.style("position", "absolute")
.style("padding", "1%")
.style("visibility", "hidden")
.style("z-index", "8")
.style("border", "1px solid black")
.style("border-radius", "5%")
.style("font-family", "arial");
// on dessine
svg.selectAll("g")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", (d,i) => {
var value = d.properties.value;
return value ? color(value) : color(0);
})
.attr("stroke", "#eee")
.on('mouseover', function(event,d) {
tooltip.style("visibility", "visible")
.html(`${d.properties.nom}:${d.properties.value}`)
.style("left", (event.pageX + 20) + "px")
.style("top", (event.pageY - 20) + "px")
.style("background", color(d3.max([0, d.properties.value])));
})
.on('mouseout', function(e){tooltip.style("visibility", "hidden")});
return div.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
