Dataviz at Office for National Statistics (UK)
chart = {
const width = 928; // uncomment for responsive width
const height = 600;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
let g = svg
.selectAll("g")
.data(dots)
.join("g")
.attr("fill-rule", "evenodd")
.attr("transform", (d, i) => `translate(${100 + i * 150} 400)`);
g.selectAll("path.house")
.data((d) => d.dots)
.join("path")
.classed("house", "true")
.attr(
"d",
"M 8 18 L 12 18 L 12 14 L 14 14 L 14 18 L 20 18 L 20 10 L 22 10 L 14 4 L 6 10 L 8 10 Z"
)
.attr("transform", (d) => `translate(${d.y * 22}, ${-d.x * 22})`)
.attr("fill", (d) => colours[d.colour]);
g.append("text")
.text((d) => d.place)
.style("fill", "black")
.attr("y", 40);
return svg.node();
}
tallChart = {
const width = 928; // uncomment for responsive width
const height = 900;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
let g = svg
.selectAll("g")
.data(tallDots)
.join("g")
.attr("fill-rule", "evenodd")
.attr("transform", (d, i) => `translate(${100 + i * 150} 800)`);
g.selectAll("path.house")
.data((d) => d.dots)
.join("path")
.classed("house", "true")
.attr(
"d",
"M 8 18 L 12 18 L 12 14 L 14 14 L 14 18 L 20 18 L 20 10 L 22 10 L 14 4 L 6 10 L 8 10 Z"
)
.attr("transform", (d) => `translate(${d.y * 22}, ${-d.x * 22})`)
.attr("fill", (d) => colours[d.colour]);
g.append("text")
.text((d) => d.place)
.style("fill", "black")
.attr("y", 40);
return svg.node();
}
ourChart = {
const width = 928; // uncomment for responsive width
const height = 600;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
let boxes = svg
.selectAll("path")
.data(ourMethodDots.boxes)
.join("path")
.attr("transform", `translate(100 420)`)
.attr("d", (d) => boxPath(d))
.style("fill", "none")
.style("stroke", "#444")
.attr("stroke-dasharray", "4 2");
let g = svg
.selectAll("g")
.data([ourMethodDots.dots])
.join("g")
.attr("fill-rule", "evenodd")
.attr("transform", (d, i) => `translate(${100 + i * 150} 400)`);
g.selectAll("path.house")
.data((d) => d)
.join("path")
.classed("house", "true")
.attr(
"d",
"M 8 18 L 12 18 L 12 14 L 14 14 L 14 18 L 20 18 L 20 10 L 22 10 L 14 4 L 6 10 L 8 10 Z"
)
.attr("transform", (d) => `translate(${d.y * 22}, ${-d.x * 22})`)
.attr("fill", (d) => colours[d.colour]);
g.append("text")
.text((d) => d.place)
.style("fill", "black")
.attr("y", 40);
return svg.node();
}
function boxPath({ start, end }) {
let x0 = start.row * 22 + 2,
y0 = -start.column * 22,
x1 = end.row * 22,
y1 = -end.column * 22 + 4;
let path = `M ${x0 + 4} ${y0} L ${x0 + 22} ${y0} L ${x0 + 22} 0 L ${
x1 + 22
} 0 L ${x1 + 22} ${y1} L ${x1} ${y1} L ${x1} -218 L ${x0 + 4} -218 Z`;
console.log(path);
return path;
}
PER_DOT = 10
d3.schemeSet3
colours = ({
red: d3.schemeTableau10[2],
yellow: d3.schemeTableau10[5],
blue: d3.schemeTableau10[0]
})
tallDots = counts.map((place) => {
let d = { place: place.place, dots: [] };
let row = 0;
for (let cat of cats) {
let column = 0;
for (let i = 0; i < place[cat]; i++) {
d.dots.push({ colour: cat, x: column, y: row });
++column;
}
row++;
}
return d;
})
dots = counts.map((place) => {
let d = { place: place.place, dots: [] };
let row = 0;
for (let cat of cats) {
let column = 0;
for (let i = 0; i < place[cat]; i++) {
if (column === PER_DOT) {
column = 0;
++row;
}
d.dots.push({ colour: cat, x: column, y: row });
++column;
}
row++;
}
return d;
})
ourMethodDots = {
let dots = [];
let boxes = [];
let row = 0;
let column = 0;
counts.forEach((place) => {
let start = { row, column };
for (let cat of cats) {
for (let i = 0; i < place[cat]; i++) {
if (column === PER_DOT) {
column = 0;
++row;
}
dots.push({ colour: cat, x: column, y: row });
++column;
}
}
let end = { row, column };
boxes.push({ start, end });
});
return { dots, boxes };
}
cats = ["red", "yellow", "blue"]
counts = FileAttachment("sample.csv").csv()
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.
