Public
Edited
Jan 13, 2024
function renderSVG(commits) {
const svg = d3.create("svg");
svg.attr("height", 500);
svg.attr("width", 700);
const circleRadius = 15;
const margin = 30;
const columnWidth = 200;
const rowHeight = 50;
// Create lines connecting commits to their parents
const lines = svg
.selectAll("line")
.data(commits)
.enter().append("g") // Use a group to contain multiple lines for each commit
.selectAll("line")
.data(d => d.parentPositions.map(parent => ({ commit: d, parent }))) // Create data for each line
.enter().append("line")
.attr("x1", d => d.commit.column * columnWidth + margin)
.attr("y1", d => d.commit.height * rowHeight + margin)
.attr("x2", d => d.parent.column * columnWidth + margin)
.attr("y2", d => d.parent.height * rowHeight + margin)
.attr("stroke", "gray");
// Create circles for each commit
const circles = svg
.selectAll("circle")
.data(commits)
.enter()
.append("circle")
.attr("cx", (d) => d.column * columnWidth + margin)
.attr("cy", (d) => d.height * rowHeight + margin)
.attr("r", circleRadius)
.attr("fill", "white")
.attr("stroke", "black")
.attr("stroke-width", "2px");
// Add text for author's initials
svg
.selectAll("text.author")
.data(commits)
.enter()
.append("text")
.attr("class", "author")
.attr("x", (d) => d.column * columnWidth + margin - circleRadius / 2 - 1)
.attr("y", (d) => d.height * rowHeight + margin)
.attr("dy", "0.35em")
.text((d) => d.author.split(" ").map((x) => x[0]).join(""))
.attr("font-family", "Inconsolata");
// Add text for commit messages
svg
.selectAll("text.message")
.data(commits)
.enter()
.append("text")
.attr("class", "message")
.attr("x", (d) => d.column * columnWidth + margin + circleRadius + 5)
.attr("y", (d) => d.height * rowHeight + margin)
.attr("dy", "0.35em")
.text((d) => d.message);
return svg.node();
}
viewof index = html`<input type="range" min="0" max="${history.length - 1}" value="9" step="1"></input>`
renderSVG(history[history.length-1-index])
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.
