chart = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font-family", "sans-serif")
.style("font-size", "10px");
yield svg.node();
svg
.append("g")
.attr("transform", `translate(${[0, scaleY(" ")]})`)
.call(d3.axisBottom(scaleX));
svg
.append("g")
.attr("transform", `translate(${scaleX(0)},0)`)
.call(d3.axisLeft(scaleY));
svg
.append("text")
.attr("transform", `translate(${scaleX.range()[1]},${scaleY(" ") - 4})`)
.attr("text-anchor", "end")
.text("Unemployment rate (%)");
svg
.selectAll(".gender")
.data(["M", "F"])
.join("g")
.style("fill", genderColor)
.attr("transform", (gender, i) => `translate(0, ${i ? -3 : 3})`)
.attr("id", gender => gender)
.selectAll("path")
.data(gender =>
rawdata.map(d => ({
Country: d.Country,
_1905: d[`${gender}1905`],
_2005: d[`${gender}2005`]
}))
)
.join("path")
.attr("transform", d => `translate(0, ${scaleY(d.Country)})`)
.attr("d", d => tr([d["_1905"] || NaN, d["_2005"] || NaN]));
svg
.append("g")
.attr("id", "legend")
.call(legend);
}
import { trail } from "@fil/trail-marks"
tr = trail()
.y(0)
.x(scaleX)
.size((d, i) => 3 + 7 * i)
function legend(g) {
g.attr("transform", "translate(0, 15)")
.selectAll("g")
.data([
{ min: 6, max: 8, l: "M", name: "Men" },
{ min: 10, max: 12, l: "F", name: "Women" }
])
.join("g")
.call(g => {
g.append("path")
.attr("d", d => tr([d.min, d.max]))
.style("fill", d => genderColor(d.l));
g.append("text")
.text(d => d.name)
.attr("text-anchor", "middle")
.attr(
"transform",
d => `translate(${(scaleX(d.min) + scaleX(d.max)) / 2}, -5)`
);
g.append("text")
.text("05.19")
.attr("transform", d => `translate(${scaleX(d.min) - 10}, 10)`);
g.append("text")
.text("05.20")
.attr("transform", d => `translate(${scaleX(d.max) - 10}, 10)`);
});
}
scaleX = d3.scaleLinear([0, 18], [80, width - 20])
scaleY = d3.scalePoint(
rawdata
.map(
d => (
(d.max = d3.max(
rawdata.columns.filter(d => d !== "Country").map(f => d[f])
)),
d
)
)
.sort((a, b) => d3.descending(a.max, b.max))
.filter(d => d["F1905"] && d["F2005"])
.map(d => d.Country)
.concat(" "),
[50, height - 30]
)
genderColor = d3.scaleOrdinal(d3.schemePastel2)
height = 700
rawdata = d3.csvParse(
`Country,M1905,M2002,M2003,M2004,M2005,F1905,F2002,F2003,F2004,F2005
EA,7.3,6.8,6.8,7,7,7.9,7.6,7.5,7.7,7.9
EU,6.5,6.2,6.1,6.4,6.4,7,6.8,6.7,6.9,7.2
Belgium,5.8,5,5.1,5.4,5.6,5.1,4.9,5,5.2,5.2
Bulgaria,4.4,4.5,4.3,5,4.8,3.8,3.8,3.9,4.6,4.4
Czechia,1.7,1.7,1.8,2,2.2,2.5,2.3,2.4,2.5,2.6
Denmark,4.9,4.7,4.5,4.5,4.5,5,5.1,5,5.2,5.6
Germany,3.4,3.8,3.9,4,4.1,2.7,3.2,3.4,3.6,3.7
Estonia,4.5,5.2,5.2,6,,5.5,4.2,4.4,6.1,
Ireland,5.3,5,5.3,5.4,5.5,5.1,4.5,5.2,5.4,5.7
Greece,14,12.9,12.6,,,21.5,19.6,16.8,,
Spain,12.6,12,12.7,13.1,12.7,15.9,15.5,15.9,16.3,16.5
France,8.5,7.5,7.5,8.5,7.7,8.4,7.8,7.8,8.9,8.5
Croatia,6.1,6,6.4,7.7,8.3,7.4,6.6,7.2,8.7,9.6
Italy,9.2,8.2,7.4,6.4,6.9,11,10.1,9.3,7,9
Cyprus,6.9,6.1,6.6,8.5,9.7,7.8,5.9,6.7,9.4,10.8
Latvia,7.8,7.9,8.3,9.5,10.3,4.9,6,6.6,8.4,9.2
Lithuania,6.7,7.1,7.3,9.5,10.2,5.5,5.5,5.8,7.7,8.4
Luxembourg,5.7,5.8,6.8,7.7,7.9,5.6,5.8,6.2,7.2,7.5
Hungary,3.5,3.4,3.5,4,,3.4,3.7,3.9,4.3,
Malta,3.4,3.5,3.5,3.9,3.9,3.4,3.2,3.3,4.4,4.7
Netherlands,3.3,2.9,2.9,3.6,3.6,3.3,3,2.9,3.3,3.6
Austria,4.5,4.7,4.9,5.4,5.7,4.4,4.3,4.5,4.9,5.1
Poland,3.1,3,2.8,2.9,2.9,3.5,3.1,2.9,2.9,3
Portugal,6.1,5.9,5.5,5.2,5.4,7.1,6.9,6.9,7.4,5.5
Romania,4.2,4.9,5.3,5.4,6.1,3.5,3.4,3.6,3.9,4
Slovenia,3.8,3.7,3.8,4.2,4.1,4.9,4.8,4.8,5.4,5.6
Slovakia,5.7,5.8,5.5,6,6.3,5.8,6.5,6.3,6.9,6.8
Finland,7.1,7,7.1,7.3,7.4,6.3,6.4,6.5,6.6,6.7
Sweden,6.6,7,7.1,8.1,8.1,6.9,7.2,7.5,7.8,7.9
United Kingdom,4.1,4.1,4,,,3.5,3.6,3.6,,
Iceland,3.8,3.7,3.4,3.8,4.4,3,4,3.6,4,4.6
Norway,3.6,3.7,3.7,4.2,,3.2,3.3,3.5,4.1,
Switzerland,4.2,4.1,4,,,4.6,4.4,4.7,,
`,
d3.autoType
)
d3 = require("d3@5", "d3-array@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.
