// Source: https://observablehq.com/@mbostock/dashboard
grid = html`<div style="
background: #fff;
margin: 0;
border: none ;
display: grid;
width: ${screen.width};
grid-template-areas:
'd d'
'a b'
'a b'
'a b'
'c c';
grid-gap: 10px;
">
<div name="d" style="grid-area: d; position: relative;">${viewof current_date}</div>
<div name="b" style="grid-area: b; position: relative;">${dep}</div>
<div name="c" style="grid-area: c; position: relative;">${variable}</div>
<div name="a" style="grid-area: a; position: relative;">${chart}</div>
</div>`
viewof current_date = Scrubber(dates,
{
autoplay: false,
loop: false,
delay: 100,
format: current_date => current_date.toLocaleString("fr", {month: "long", year: "numeric"})
})
projection = d3.geoMercator().fitExtent([[0, 0], [975, 610]], communes)
max_pop = Math.log(Math.max(...communes.features.map(d => d.properties.POPULATION)))
min_pop = Math.log(Math.min(...communes.features.map(d => d.properties.POPULATION)))
min_value = Math.min(...data_filtered.map(d => d.value))
max_value = Math.max(...data_filtered.map(d => d.value))
viewof extrait = {
return Inputs.table(data_filtered, {height: 200, layout: "auto", maxWidth: 500})
}
import {Legend} from "@d3/color-legend"
import {Choropleth} from "271261860678801f"
import {Scrubber} from "@mbostock/scrubber"
N = d3.map(data_filtered, d => d.id);
V = d3.map(data_filtered, d => d.value).map(d => d == null ? NaN : +d);
Im = new d3.InternMap(N.map((id, i) => [id, i]));
communes.features
If = communes.features.map(d => d.id);
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.
