Trying to be a social data researcher. Kallio, Helsinki, Finland. I like to data, but been mostly doing raw communications so far.
pivoted_votes_2023@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
2023_votes_numerical.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
import { SummaryTable } from "@observablehq/summary-table"
SummaryTable(_votes_numerical)
dist_mat = dist(asMatrix(_votes_numerical), distance.euclidean)
hclust_avg = new hclust(dist_mat, {
method: "average",
isDistanceMatrix: true
})
dendrogram(hclust_avg)
cut_avg = hclust_avg.group(10)
viewof color = Inputs.select(cut_avg, {value: "1", label: "Favorite color"})
clustered_groups
Type Table, then Shift-Enter. Ctrl-space for more options.
plot_dendrogram_10 = dendrogram(cut_avg, {
h: 500,
marginTop: 0,
marginRight: 20,
marginBottom: 30,
marginLeft: 40,
})
clustered_groups = Object.entries(
hclust_avg.children.reduce((lookup, group, groupIndex) => {
group.traverse((child) => {
if (child.index > -1) lookup[child.index] = groupIndex + 1;
});
return lookup;
}, {})
).map((arr) => arr[1])
dendrogram(hclust_avg_simple, { h: 2989 })
seeds_df_sc_simple = _votes_numerical.filter((r, i) => i % 10 == 0)
hclust_avg_simple = new hclust(dist_mat_simple, {
method: "average",
isDistanceMatrix: true
})
dist_mat_simple = dist(asMatrix(seeds_df_sc_simple), distance.euclidean)
function dendrogram(data, options = {}) {
const {
width: width = 900,
height: height = 400,
hideLabels: hideLabels = false,
paddingBottom: paddingBottom = hideLabels ? 20 : 80,
innerHeight = height - paddingBottom,
innerWidth = width - 10,
paddingLeft = 0,
h: cutHeight = 500,
yLabel: yLabel = "↑ Height",
colors: colors = d3.schemeTableau10,
fontFamily: fontFamily = "Inter, sans-serif",
linkColor: linkColor = "grey",
fontSize: fontSize = 8,
strokeWidth: strokeWidth = 1,
} = options;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, innerHeight])
.attr("style", "max-width: 300%; height: auto; height: intrinsic;")
.attr("transform", `translate(0, 0) rotate(-90)`);
var clusterLayout = d3.cluster().size([width - paddingLeft * 2, innerHeight]);
const root = d3.hierarchy(data);
const maxHeight = root.data.height;
const yScaleLinear = d3
.scaleLinear()
.domain([0, maxHeight])
.range([hideLabels ? innerHeight - 35 : innerHeight, 0]);
const yAxisLinear = d3.axisLeft(yScaleLinear).tickSize(5);
function transformY(data) {
const height = hideLabels ? innerHeight - 15 : innerHeight;
return height - (data.data.height / maxHeight) * height;
}
// traverse through first order children and assign colors
if (cutHeight) {
let curIndex = -1;
root.each((child) => {
if (
child.data.height <= cutHeight &&
child.data.height > 0 &&
child.parent &&
!child.parent.color
) {
curIndex++;
child.color = colors[curIndex];
} else if (child.parent && child.parent.color) {
child.color = child.parent.color;
}
});
}
clusterLayout(root);
// y-axis
svg
.append("g")
.attr("transform", `translate(0, ${hideLabels ? 20 : 0})`)
.append("g")
.attr("class", "axis")
.attr("transform", `translate(${paddingLeft},${hideLabels ? 20 : 0})`)
.call(yAxisLinear)
.call((g) => g.select(".domain").remove())
.call((g) =>
g
.append("text")
.attr("x", -paddingLeft)
.attr("y", -20)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.style("font-family", fontFamily)
.text(yLabel)
)
.selectAll(".tick")
.classed("baseline", (d) => d == 0)
.style("font-size", `${fontSize}px`)
.style("font-family", fontFamily);
// Links
root.links().forEach((link) => {
svg
.append("path")
.attr("class", "link")
.attr("stroke", link.source.color || linkColor)
.attr("stroke-width", `${strokeWidth}px`)
.attr("fill", "none")
.attr("transform", `translate(${paddingLeft}, ${hideLabels ? 20 : 0})`)
.attr("d", elbow(link));
});
// Nodes
root.descendants().forEach((desc) => {
/*
svg
.append("circle")
.classed("node", true)
.attr("fill", desc.color)
.attr("cx", desc.x)
.attr("cy", transformY(desc))
.attr("transform", `translate(${paddingLeft})`);
.attr("r", 4);
*/
if (desc.data.isLeaf && !hideLabels) {
svg
.append("text")
//.attr("x", desc.x)
.attr("dx", -5)
.attr("dy", 3)
.attr("text-anchor", "end")
.style("font-size", `${fontSize}px`)
.style("font-family", fontFamily)
.attr(
"transform",
`translate(${desc.x + paddingLeft},${transformY(desc)}) rotate(0)`
)
.text(desc.data.name || desc.data.index);
}
});
// Custom path generator
function elbow(d) {
return (
"M" +
d.source.x +
"," +
transformY(d.source) +
"H" +
d.target.x +
"V" +
transformY(d.target)
);
}
return svg.node();
}
dist = require("https://bundle.run/ml-distance-matrix@2.0.1")
distance = (await import("https://cdn.skypack.dev/ml-distance@3.0.0?min"))
.distance
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.
