Public
Edited
Feb 5, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
files = FileAttachment("departements-version-simplifiee.geojson.json").json()



Insert cell
{
const width = 1000,
height = 500;

let svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height]);
let projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800);
let path = d3.geoPath().projection(projection);


let g = svg.append("g");
g.selectAll("path")
.data(files.features)
.join("path")
.attr("d", path)
.attr("fill", "black")
.attr("stroke", "white")
return svg.node()
}
Insert cell
Insert cell
data = FileAttachment("covid-06-11-2021.csv").csv()
Insert cell
Inputs.table(data)
Insert cell
parse = d3.timeParse("%Y-%m-%d")
Insert cell
parse_covid = data.map((d) => {
d.date_parsed = parse(d.jour);
return d;
})
Insert cell
map1= {
const height = 500;
const width = 950;

var jourChoisi = "2021-09-12";
var cleanData = data.filter((d) => d.sexe == 0)
var datanest = d3.group(cleanData, (d) => d.jour)
var cleanData2 = datanest.get(jourChoisi)
const projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800);
const path = d3.geoPath().projection(projection);

const min = d3.min(cleanData, (d) => parseInt(d.hosp));
const max = d3.max(cleanData, (d) => parseInt(d.hosp));
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const colors = d3.scaleSequential([0, 100], d3.interpolateViridis).domain([min, max]);

for (var j = 0; j < files.features.length; j++) {
var dep = files.features[j].properties.code;
var index = cleanData2.findIndex((d) => d.dep == dep)
files.features[j].properties.value = cleanData2[index].hosp;
}

// Paint the map
svg
.selectAll("path")
.data(files.features)
.enter()
.append("path")
.style("stroke", "black")
.style("fill", (d) => {
const value = d.properties.value;
if (value) {
return colors(value);
} else {
return "black";
}
})
.attr("d", path);

return svg.node();
}
Insert cell
Insert cell
import {slider} from "@lorenries/inputs"
Insert cell
dates = Array.from(
d3.rollup(data,
v => [],
d => d.jour
)
).map(d=> d[0])
Insert cell
dates_parsed = dates.map((d)=> {
return parse(d)
})
Insert cell
viewof timeSlider = slider({
min : 0, max : dates_parsed.length - 1, step:1, title: "Time Slider"
})
Insert cell
dates_parsed[timeSlider]
Insert cell
map2 = map(parse_covid, {ind: timeSlider})
Insert cell
function map(data,{ind} = {})
{

var width = 950,
height = 580;
var deffFillv,
defRb = "1.5px",
defFillb = "black",
defFillgL = "rgb(209, 209, 209)",
defFillgR = "grey",
defOpv = "0.4",
defFillbR = "none";

var div = d3.create('div')
const projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800);
var path = d3.geoPath().projection(projection);
var svg = div.append("svg").attr("width", width).attr("height", height);

var jourChoisi = dates_parsed[ind]
var cleanData = data.filter((d) => d.sexe == "0");
var datanest = d3.group(cleanData, (d) => d.date_parsed)
var cleanData2 = datanest.get(jourChoisi)

for (var j = 0; j < files.features.length; j++) {
var dep = files.features[j].properties.code;
var index = cleanData2.findIndex((d) => d.dep == dep)
files.features[j].properties.value = cleanData2[index].hosp;
}


var color = d3.scaleSequentialSqrt([0, 1], d3.interpolateTurbo);
color.domain([
d3.min(cleanData2, function (d) {
return +d.hosp;
}),
d3.max(cleanData2, function (d) {
return +d.hosp;
})
]);

var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.attr("class", "tooltip")
.style("font-family", "Lato")

var path = d3.geoPath().projection(projection);
svg.selectAll('g')
.data(files.features)
.enter().append("path")
.attr("d", path)
.attr("stroke", "white")
.attr("id", function(d,i) { return `l${d.properties.code}`})
.style("fill",function (d) {
var value = d.properties.value;

if (value) {
return color(value);
}
else { return "black"}
})
.on('mouseover', function(e, d) {
tooltip.style("visibility", "visible").html(`${d.properties.nom} : ${d.properties.value}`).style("background",'#FFFFFF');;
})
.on("mousemove", function(e, d){return tooltip.style("top", (e.pageY-20)+"px").style("left",(e.pageX+20)+"px");})
.on('mouseout', function(e, d) {
tooltip.style("visibility", "hidden");
});

return div.node()
}
Insert cell

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.
Learn more