Published
Edited
Apr 13, 2021
4 stars
Insert cell
Insert cell
labels = [{ x: 100, y: 50, text: "Tempor labore est qui reprehenderit non consequat elit nisi."},
{ x: 100, y: 250, text: "TEMPOR LABORE EST QUI REPREHENDERIT NON CONSEQUAT ELIT NISI."},
{ x: 450, y: 150, text: "Amet nostrud reprehenderit voluptate Lorem."},
{ x: 450, y: 350, text: "Eiusmod adipisicing voluptate labore excepteur enim esse."}]
Insert cell
Insert cell
Insert cell
svg_v1 = {
const svg = d3.select(DOM.svg(width, 500));
// draw a number of text elements
svg.selectAll("text")
.data(labels).enter()
.append("text")
.attr("id", (d, i) => `node${i}`)
.attr("x", d => d.x)
.attr("y", d => d.y)
.style("font-size", "1em")
.style("text-anchor", "start")
.text(d => d.text);
svg.selectAll("text")
.each(function(d, i) { wrap_text_nchar(d3.select(this), n_char) });
return svg.node();
}
Insert cell
wrap_text_nchar = (text_element, max_width, line_height, unit = "em") => {
// use a default line_height if not provided
if (!line_height) line_height = 1.1;
// wrap the text based on how many characters per line
const text_array = wrap_text_array(text_element.text(), max_width);
// append a tspan element for each line of text_array
text_element.text(null)
.selectAll("tspan")
.data(text_array).enter()
.append("tspan")
.attr("x", text_element.attr("x"))
.attr("y", text_element.attr("y"))
.attr("dy", (d, i) => `${i * line_height}${unit}`)
.text(d => d);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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