Public
Edited
Mar 28, 2024
6 stars
// Plot plugin (kinda)
function stretch(text) {
const render = text.render;
text.render = function () {
const g = render.apply(this, arguments);
d3.select(g)
.selectAll("text")
.each(function () {
const l = d3.select(this);
const tr = l.attr("transform");
const [, x, y] = String(tr).match(/(\d+).*,(\d+)/) || [];
const ky = +l.attr("font-size") * 5.6; // manual twiddling, depends on the plot's height
l.attr("font-size", "100"); // 30% more than the width of a column
l.attr("dy", "-0.025em");
l.attr("transform", `translate(${x},${y}) scale(1,${ky})`);
});
return g;
};
return text;
}
// autodetect csv vs tsv, fix french comma for decimal dot
raw = dtext.match(/\t.*\t.*\t/)
? d3.tsvParse(dtext.replace(/,/g, "."), d3.autoType)
: d3.csvParse(dtext, d3.autoType)
// flatten to tabular data
data = raw.flatMap(d =>
Object.entries(d)
.slice(1)
.map(([key, frequency]) => ({
key,
frequency,
position: d[raw.columns[0]]
}))
)
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.
