Public
Edited
Dec 15, 2024
1 fork
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
gh_data_hours_.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
viewof select = Inputs.select(["Size (MB)", "Total PRs", "Contributors"], {
label: "Sort by"
})
gh_data = updated_repository_data
slack_data = graphicacy2024DataSlack_2
Graphicacy 2024 data - Slack_2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
hierarchical_slack_data = FileAttachment(
"hierarchical_slack_data_with_dates@1.json"
).json()
slack = {
const width = 800;
const height = 800;
const root = d3
.hierarchy(hierarchical_slack_data)
.sum((d) => d.messages_posted || 0)
.sort((a, b) => b.value - a.value);
const pack = d3.pack().size([width, height]).padding(3);
const rootNode = pack(root);
const dateExtent = d3.extent(rootNode.descendants(), (d) => {
if (d.data.created) {
return new Date(d.data.created);
}
return null;
});
const colorScale = d3
.scaleTime()
.domain(dateExtent)
.range(["#9e42f5", "#65BDCD"]);
const svg = d3
.create("svg")
.attr("width", width + 200)
.attr("height", height);
const circle = svg
.selectAll("g.circle")
.data(rootNode.descendants())
.join("g")
.attr("class", "circle")
.attr("transform", (d) => `translate(${d.x}, ${d.y})`);
circle
.append("circle")
.attr("r", (d) => d.r)
.attr("fill", (d) => {
if (d.data.created) {
return colorScale(new Date(d.data.created));
}
return "#eee";
})
.attr("stroke", "#5c5c5c");
circle
.filter((d) => !d.children)
.append("text")
.attr("text-anchor", "middle")
.attr("dy", "0.3em")
.attr("font-size", "10px")
.style("fill", "black")
.text((d) => `${d.data.name}\n${d.value} messages`);
const legendWidth = 150;
const legendHeight = 20;
const legendGroup = svg
.append("g")
.attr("transform", `translate(${width + 20}, ${height / 2 - 50})`);
const defs = svg.append("defs");
const linearGradient = defs
.append("linearGradient")
.attr("id", "legend-gradient")
.attr("x1", "0%")
.attr("x2", "100%")
.attr("y1", "0%")
.attr("y2", "0%");
linearGradient
.append("stop")
.attr("offset", "0%")
.attr("stop-color", "#65BDCD");
linearGradient
.append("stop")
.attr("offset", "100%")
.attr("stop-color", "#9e42f5");
legendGroup
.append("rect")
.attr("width", legendWidth)
.attr("height", legendHeight)
.style("fill", "url(#legend-gradient)");
legendGroup
.append("text")
.attr("x", 0)
.attr("y", -10)
.attr("text-anchor", "start")
.attr("font-size", "12px")
.text("Newest");
legendGroup
.append("text")
.attr("x", legendWidth)
.attr("y", -10)
.attr("text-anchor", "end")
.attr("font-size", "12px")
.text("Oldest");
legendGroup
.append("text")
.attr("x", legendWidth / 2)
.attr("y", 40)
.attr("text-anchor", "middle")
.attr("font-size", "12px")
.text(`Creation Date`);
return svg.node();
}
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.
