Trying to be a social data researcher. Kallio, Helsinki, Finland. I like to data, but been mostly doing raw communications so far.
md`by Núria Altimir`
data = FileAttachment("pivoted_votes_2023.csv").csv()
pivoted_votes_2023.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
dendrogram = {
const root = cluster(data);
const width= 900;
const height= 400;
// var ymax = d3.max(root.descendants(), function(d) { return d.y; });
// var ymin = d3.min(root.descendants(), function(d) { return d.y; });
// var fx = d3.scaleLinear().domain([ymax, ymin]).range([0, width]);
function elbow(d) { return "M" + d.source.y/2 + "," + d.source.x + "V" + d.target.x + "H" + d.target.y/2; }
let x0 = 50;
let x1 = -x0;
root.each(d => {
if (d.x > x1) x1 = d.x;
if (d.x < x0) x0 = d.x;
});
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, x1 - x0 + root.dx * 2]);
const g = svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("transform", `translate(${root.dy / 3},${root.dx - x0})`);
const link = g.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1)
.selectAll("path")
.data(root.links())
.join("path")
.attr("d", elbow);
const node = g.append("g")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.selectAll("g")
.data(root.descendants())
.join("g")
.attr("transform", d => `translate(${d.y/2},${d.x})`);
node.append("circle")
.attr("fill", d => d.children ? "grey " : "black")
.attr("r", d => d.children ? 0 : 1);
node.append("text")
.attr("dy", "0.31em")
.attr("x", d => d.children ? -6 : 6)
.attr("text-anchor", d => d.children ? "end" : "start")
.attr("font-size", d => d.children ? "0.8em" : "0.3em")
.text(d => d.children ? " " : d.data.name)
.clone(true).lower()
.attr("fill", "black")
.attr("outline", "red")
return svg.node();
}
d3 = require("d3@6");
height=500;
width= 800;
html`<style>
/* required styles */
* { font-family: Arial, sans-serif;
margin: 0;
}
select { font-size: 16px;
}
</style`
cluster = data => {
const root = d3.hierarchy(data);
root.dx = 1.5;
root.dy = width / (root.height + 1);
return d3.cluster().nodeSize([root.dx, root.dy])(root);
}
path = d3.geoPath(projection)
projection = d3.geoNaturalEarth1()
.center([40,0])
.rotate([0, 0])
.scale(150);//(width / (2 * Math.PI));
x = d3.scaleTime()
.domain(d3.extent(myData, d => d.date))
.range([margin.left, width - margin.right]);
y = d3.scaleLinear()
.domain([0, d3.max(myData, d => d.deaths)]).nice()
.range([height - margin.bottom, margin.top]);
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain"))
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 6)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Total deaths per million inhabitants"));
lineMultiCases = d3.line()
.x(d => x(d.date))
.y(d => y(d.deaths));
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.
