Sequence Logos / Fil

Vocateur.

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]]

}))

)

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.