Palindromic Sequence illustration draft v 0.2

**** Update *****
This illustration is complete.
See it here

Second draft of the Palindromic Sequence illustration.

Most of the changes from v0.1 are invisible. I started working on this earlier in the week and discovered that the code I wrote for the first version was quite fragile and had be almost completely rewritten.

The major change between v0.1 and 0.2 is

  1. The addition of a repeat button to go along with the new sequence option that was already available in v0.1
  2. A change in the way the palindromic matches and complements are highlighted.
In v0.1 matching and compliment sequences highlighted on hover. change on hover made the previous draft very responsive but was not compatible with touch devices.

In this version I replaced the on-hover with an on-click listener. Now the related bases are highlighted briefly when clicked.

Status of V0.1:

  • The illustration starts with an animated series of steps that show how an eight base palindromic sequence can be created from any four bases.
  • Size the container has been adjusted to to fit better with the size of the illustration.
  • Once the entire 6 base sequence and its complement are visible, clicking on any base highlights the related bases. The selected base and its match on the opposite strand turn blue. The two complementary bases turn gold. One complementary base is on the complementary strand and the other is on the same strand as the selected base
  • Redo animation and new sequence buttons allow the animation to be restarted with the same or a new sequence.

Next Steps: (most next steps have been brought over directly from v0.1)

  • Add some dialogue boxes that appear along with the animation to describe the steps
    1. Generate the rest of the forward sequence by determining its reverse complement, switching its order and placing it after the initial set of bases
    2. Use the now complete eight base forward strand to determine the reverse complement by matching Gs to Cs, Cs to Gs, As to Ts and Ts to As.
  • The base highlighting now works on touch devices but is much more subtle than the hover from v0.1. Continue to think about ways to make the illustration work well on both mobile and desktop.

Barycenter illustration draft V 0.1 Next >