DataViz, Dashboard, Observable Ambassador and Notion Certified
xls=FileAttachment("TABLE_ETAT-EVOLUTIONS_2010_2019_NIV2_DEPARTEMENTS@2.xlsx").xlsx({typed:true})
InputData
InputData.slice(1)
Plot.plot({
width: 1000,
height: 350,
marginLeft: 200,
color: {
range: [
"#934fd3",
"#c9d30e",
"#ffd37f",
"#ef79c8",
"#917376",
"#e4dbd3",
"#9ac243",
"#46a101",
"#34c924",
"#f8f4bc",
"#e85444",
"#a6a6a6",
"#00cc99",
"#7bd6ff",
"#ffef44"
],
type: "categorical",
legend: true
},
marks: [
Plot.barX‹(InputData.slice(1), { x: "C", y: "A", fill: "E", title: "C" }),
Plot.ruleX([0])
]
})
chart = {
const height = 800;
const GroupedMax = d3.max(csv, (row) =>
d3.max(subgroups.map((col) => row[col]))
);
const Stacked = d3.max(data, (y) => d3.max(y, (d) => d[1]));
const margin = { left: 30, rigth: 0, top: 0, bottom: 20 };
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const subgroup = svg
.selectAll(".subgroup")
.data(data)
.join("g")
.attr("class", "subgroup")
.attr("fill", (d, i) => color(i));
const rect = subgroup
.selectAll("rect")
.data((d) => d)
.join("rect")
.attr("x", (d, i) => x(i))
.attr("y", height - margin.bottom)
.attr("width", x.bandwidth())
.attr("height", 0);
subgroup.on("mouseenter", function () {
svg.selectAll(".subgroup").transition().style("fill-opacity", 0.15);
d3.select(this).transition().style("fill-opacity", 1);
});
subgroup.on("mouseleave", function () {
svg.selectAll(".subgroup").transition().style("fill-opacity", 1);
});
svg
.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.style("font-size", "13px")
.call(xAxis);
const yAxisContainer = svg
.append("g")
.attr("transform", `translate(${margin.left},0)`)
.style("font-size", "13px")
.call(yAxis);
/*
svg
.append("g")
.attr("transform", `translate(${width + margin.left - 175},0)`)
.call(legend);
*/
function transitionGrouped() {
y.domain([0, groupedMax]);
yAxisContainer.transition().duration(500).delay(500).call(yAxis);
rect
.transition()
.duration(500)
.delay((d, i) => i * 20)
.attr("x", (d, i) => x(i) + (x.bandwidth() / subgroups.length) * d[2])
.attr("width", x.bandwidth() / subgroups.length)
.transition()
.attr("y", (d) => y(d[1] - d[0]))
.attr("height", (d) => y(0) - y(d[1] - d[0]));
}
function transitionStacked() {
y.domain([0, stackedMax]);
yAxisContainer.transition().duration(500).call(yAxis);
rect
.transition()
.duration(500)
.delay((d, i) => i * 20)
.attr("y", (d) => y(d[1]))
.attr("height", (d) => y(d[0]) - y(d[1]))
.transition()
.attr("x", (d, i) => x(i))
.attr("width", x.bandwidth());
}
function update(layout) {
if (layout === "stacked") transitionStacked();
else transitionGrouped();
}
return Object.assign(svg.node(), { update });
}
url = "https://www.datagrandest.fr/data4citizen/d4c/api/records/1.0/search/?dataset=fr-200052264-gge-ocs-2010-d08&facet=lib_n1"
api = d3.json(url)
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.
