Public
Edited
Apr 1, 2024
Inputs.table(table1)
{
const color = d3.scaleQuantize([1, 10], d3.schemeBuPu[9]) ;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("width", "100%")
.style("height", "auto");
let path = d3.geoPath(laea);
svg
.append("g")
.append("path")
.datum(d3.geoGraticule10())
.attr("class", "graticule")
.attr("d", path)
.style("fill", "none")
.style("stroke", "#4e658a")
.style("stroke-width", 0.8)
.style("stroke-opacity", 0.5)
.style("stroke-dasharray", 2);
svg
.append("path")
.datum(toto)
.attr("fill", "#ebe6e6")
.attr("stroke", "none")
.attr("d", path);
svg
.append("g")
.selectAll("path")
.data(toto.features)
.join("path")
.attr("stroke", "white")
.attr("stroke-width", 0.5)
.attr("fill", d => color(mapping_values.get(d.id)))
.attr("d", path);
return svg.node();
}
viewof k = Inputs.range([1, 100], { label: "radius max", step: 1, value: 35 })
mapping_values = new Map(table1.map(({id, share}) => [id, share]))
europe = geo.filter(toto, (d) => d.SVRG_UN == "UN Member State")
height=450
lambertAzimuthalEqualArea = d3.geoAzimuthalEqualArea()
.rotate([-20.0, -52.0])
.translate([width / 2, height / 2])
.scale(700)
.precision(.1)
quantile = d3
.scaleQuantile()
.domain(table1.map((d) => d.share))
.range(d3.schemeReds[6])
toto.features
colbyid = new Map(table1.map((d) => [d.id, quantile(d.share)]))
import { Legend, Swatches } from "@d3/color-legend"
import {laea} from "@neocartocnrs/tuto"
Plot.plot({
projection: lambertAzimuthalEqualArea,
marks: [
Plot.geo(toto, {
fill: (d) => mapping_values.get(d.id),
title: (d) =>
`${d.properties.name}}`
}),
Plot.geo(toto, { stroke: "#fff", strokeWidth: 0.5 })
],
color: {
scheme: "BuPu", // Change color scheme
unknown: "#ddd", // Polygons with unknown broadband values are gray
type: "quantile", // Linear scale for color progression
legend: true, // Add the legend
label: "% of county population with home broadband", // Update legend label
//percent: true, // Convert value to a percent (from a proportion)
//domain: [0, 100] // Update the value domain to span 0 to 100% access
}
})
table1 = db.query(`
WITH pipe AS (
WITH TotalData AS (
SELECT geo, TIME_PERIOD, sex, CAST(SUM(OBS_VALUE) AS INTEGER) as TotalValue
FROM custom
WHERE c_birth = 'TOTAL'
GROUP BY geo, TIME_PERIOD, sex
)
SELECT a.geo, a.TIME_PERIOD, a.sex, CAST(a.OBS_VALUE AS INTEGER) AS OBS_VALUE, b.TotalValue
FROM custom a
LEFT JOIN TotalData b ON a.geo = b.geo AND a.sex = b.sex
WHERE a.c_birth = 'EU27_2007_FOR'
ORDER BY a.geo, a.TIME_PERIOD, a.sex, a.c_birth
)
SELECT *, 100*CAST(OBS_VALUE AS double)/CAST(TotalValue AS double) AS share, geo AS id FROM pipe
`)
Inputs.table(
all_data
)
all_data = db.query(
`SELECT * from custom WHERE geo = 'FR' AND sex = 'T' AND TIME_PERIOD='2013' AND c_birth IN ('TOTAL', 'EU27_2007_FOR') ORDER BY geo, c_birth, TIME_PERIOD, sex `
)
Inputs.table(db.query(`SELECT * from custom WHERE geo = 'FR' AND sex = 'T' AND TIME_PERIOD='2013' ORDER BY geo, c_birth, TIME_PERIOD, sex ` ))
Données brutes
Inputs.table(
db.query(`SELECT * FROM custom`)
)
db = DuckDBClient.of({
custom: FileAttachment("migr_pop3ctb__custom_9527379_linear.csv")
})
countries = d3.json(
"https://gisco-services.ec.europa.eu/distribution/v2/countries/geojson/CNTR_RG_60M_2020_4326.geojson"
)
toto = merge(countries, table1.filter(d=> d.TIME_PERIOD==2013), {on: "id", how: "right"})
data = bertin.merge(countries, "id", table1, "countrycode").features.filter(d => d.id == "FR")
bertin = require("bertin@1.6.5")
d3 = require("d3@7", "d3-geo-projection@4")
sm = require("spatialmerge")
merge = sm.merge
geo = require("geotoolbox@2")
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.
