tRNA alignment

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);