tRNA alignment

Samee Mushtak's MSDS Capstone project, https://ds5500.github.io/project-Samee-Mushtak-25/, tells the story of tRNA evolution from 4 billion years ago to the present day. We created the animation below to help tell that story. In particular, we used Observable Framework, Observable Plot and D3. The code snippets below the animation reveal the conciseness and beauty of the underlying APIs.

Credits: Samee Mushtak & Jennifer Spillane (data science), Fil (Plot: transitions)

const newPlot = Plot.plot({
    padding: 0,
    marginLeft: 100,
    width: 2000,
    height: 1500,
    grid: true,
    x: { axis: "top", label: "" },
    y: {label: ""},
    color: {
        domain: [0, 1, 2, 3, 4],
        range: ["#177E89", "#DB3A34", "#FFC857", "#BBDBB4", "#FF00FF"]
    },
    marks: [
       Plot.cell(aln, {
           x: "base_num", 
           y: "seq_label",
           fill: "base_color", inset: 0.5,
           render: render,
       }),
    ],
})

const render = (index, scales, values, dimensions, context, next) => {
    const {x} = scales;
    const cells = next(index, scales, values, dimensions, context);
    const svg = context.ownerSVGElement;

    svg.update = (isAligned) => {
      d3.select(cells)
          .selectAll("rect")
        .transition().duration(2000)
          .attr("x", i => x(aln[i][isAligned]))
    };

    return cells;
}

newPlot.update(isAligned);