Public
Edited
Dec 21, 2022
1 fork
addChartFurniture = function (
plot,
width,
localHeight,
localMargin,
title,
subtitle,
source
) {
title = title || "This is a title telling you what the chart shows";
subtitle = subtitle || "This is a subtitle explaining the units";
source = source || "FT Data Science Modelling";
const bgRect = plot
.append("rect")
.attr("width", width)
.attr("height", localHeight)
.attr("fill", "#fff1e5");
const titleG = plot
.append("g")
.classed("titleG", true)
.attr("transform", `translate(${localMargin.left / 2},${45})`);
// append subtitle group to title group and offset it further down
const subtitleG = titleG
.append("g")
.classed("subtitleG", true)
.attr("transform", `translate(${0},${24})`);
// append title
const plotTitle = titleG
.append("text")
.text(title)
.style("font-size", 26)
.style("font-weight", 600)
.style("font-family", "metric, sans-serif")
.style("color", "#000000");
// append subtitle
const plotSubtitle = subtitleG
.append("text")
.text(subtitle)
.style("font-size", 18)
.style("font-weight", 400)
.style("font-family", "metric, sans-serif")
.style("color", "#000000");
const littleBlackRect = plot
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 50)
.attr("height", 10)
.style("fill", "#000000");
const sourceG = plot
.append("g")
.classed("sourceG", true)
.attr(
"transform",
`translate(${localMargin.left / 2},${localHeight - 20})`
);
const sourceText = sourceG
.append("text")
.classed("source-text", true)
.attr("x", 0)
.attr("y", 0)
.style("font-size", 12)
.style("font-weight", 400)
.style("font-family", "metric, sans-serif")
.text("Source: " + source);
}
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.
