Public
Edited
Feb 9
file = (await fetch("https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements-version-simplifiee.geojson")).json()
first_map = {
let projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800);
const height = 600;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var g = svg.append("g");
var path = d3.geoPath().projection(projection);
g.selectAll("path")
.data(file.features)
.join("path")
.attr("d", path)
.style("stroke", "white")
.style("fill", "black");
return svg.node();
}
covid = FileAttachment("covid-06-11-2021.csv").csv()
second_map = {
let projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800);
const height = 600;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var g = svg.append("g");
const path = d3.geoPath().projection(projection);
var jourChoisi = "2021-06-15"; // pour demarrer on code en dur un jour a afficher
// Color scale
var color = d3
.scaleQuantize()
.range(["#edf8e9", "#bae4b3", "#74c476", "#31a354", "#006d2c"]);
color.domain([0, 2000]);
var cleanData = covid.filter(d => d.sexe == 0);
for (var j = 0; j < file.features.length; j++) {
var departement = file.features[j].properties.code
var jourDepChoisi = cleanData.find(function(row) {
return row.jour == jourChoisi && row.dep == departement;
})
file.features[j].properties.value = jourDepChoisi.hosp;
};
g.selectAll("path")
.data(file.features)
.join("path")
.attr("d", path)
.style("stroke", "white")
.style("fill", function (d) {
var value = d.properties.value;
if (value) {
return color(value);
} else {
// gris si pas de valeur
return "#ccc";
}
});
return svg.node();
}
dates = Array.from(
d3.rollup(covid,
v => [],
d => d.jour
)
).map(d=> d[0])
viewof date_selected = Inputs.select(dates, {value: dates[0], label: "Date"})
third_map = {
let projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800);
const height = 600;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var tooltip = d3.select('body').append('div')
.attr("class", "svg-tooltip")
.style("position", "absolute")
.style("visibility", "hidden")
.style("background-color", "#ccc")
.style("border-radius", "2px")
.style("padding", "0.5em")
.text("test");
var g = svg.append("g");
const path = d3.geoPath().projection(projection);
var jourChoisi = date_selected// pour demarrer on code en dur un jour a afficher
// Color scale
var color = d3
.scaleLinear()
.range(["#edf8e9", "#bae4b3", "#74c476", "#31a354", "#006d2c"]);
var cleanData = covid.filter(d => d.sexe == 0);
color.domain([0, d3.max(cleanData, d=> d.hosp)]);
for (var j = 0; j < file.features.length; j++) {
var departement = file.features[j].properties.code
var jourDepChoisi = cleanData.find(function(row) {
return row.jour == jourChoisi && row.dep == departement;
})
file.features[j].properties.value = jourDepChoisi.hosp;
}
g.selectAll("path").data(file.features)
.join("path")
.attr("d", path)
.style("stroke", "black")
.style("fill", function (d) {
var value = d.properties.value;
if (value) {
return color(value);
} else {
// gris si pas de valeur
return "#ccc";
}
})
.on('mouseover', function(e, d) {
tooltip.style("visibility", "visible");
tooltip.text(d.properties.nom + ' Hospitalisations : ' + d.properties.value)
})
.on('mousemove', function(e, d) {
tooltip.style("top", (e.pageY - 10) + "px")
.style("left", (e.pageX + 10) + "px");
})
.on('mouseout', function(e, d) {
tooltip.style('visibility', 'hidden');
})
return svg.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.
