Published
Edited
May 3, 2021
Insert cell
Insert cell
Insert cell
{
/* general setup of the svg */
const height = 20;
const width = 100;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
/* add a path setting the string directly*/
svg.append("path")
.attr("d", "M 0 0 L 20 20 L40 0 L60 20 L80 0 L100 20")// zig zag line
.attr("stroke", "black")
.attr("fill", "none");

/* prepare a d3.line function */
const line = d3.line()
.x(d => d[0]) // define where to find the x coordinate in the given data item
.y(d => d[1]); // define where to find the y coordinate in the given data item

/* adding a path and setting the string with the line function */
svg.append("path")
.attr("d", line([[0,0], [20,20], [40,0], [60,20], [80, 0], [100,20]]))// same zig zag line
.attr("stroke", "red")
.attr("stroke-width", 0.25)
.attr("fill", "none");
return svg.node();
}
Insert cell
/* Function to illustrate title elements
*/
{
/* step 1: general setup of the svg */
const height = 50;
const width = 700;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
/* step 2: use join pattern to insert elements*/
svg.selectAll("circle")
.data(["a", "b", "c", "d"])
.join("circle")
.attr("cy", height/2)
.attr("r", height/2)
.attr("cx", (d, i) => i*2*height + height/2)
.append("title")
.text(d => d);

return svg.node();
}
Insert cell
Insert cell
titanic = d3.csvParse(await FileAttachment("titanic.csv").text(), d3.autoType);
Insert cell
Insert cell
Insert cell
Insert cell
graph(attributeHierarchy)
Insert cell
Insert cell
function graph(root, {
label = d => d.data.name,
marginLeft = 40
} = {}) {
let dx = 12;
let dy = 120;
root = d3.tree().nodeSize([dx, dy])(root);
let treeLink = d3.linkHorizontal().x(d => d.y).y(d => d.x)

let x0 = Infinity;
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 + dx * 2])
.style("overflow", "visible");
const g = svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("transform", `translate(${marginLeft},${dx - x0})`);
const link = g.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll("path")
.data(root.links())
.join("path")
.attr("stroke", null)
.attr("stroke-opacity", null)
.attr("d", treeLink);
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},${d.x})`);

node.append("circle")
.attr("fill", d => d.children ? "#555" : "#999")
.attr("r", 2.5);

node.append("text")
.attr("fill", d => null)
.attr("dy", "0.31em")
.attr("x", d => d.children ? -6 : 6)
.attr("text-anchor", d => d.children ? "end" : "start")
.text(label)
.clone(true).lower()
.attr("stroke", "white");
return svg.node();
}
Insert cell
d3 = require("d3@6")
Insert cell

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.
Learn more