Basic codon alignment example.

src/app.jsx

@@ -57,6 +57,7 @@ function FASTALinks(props) {
       <Link to="/fasta-viewer" header="Viewer" />
       <Divider header="Examples" />
       <Link to="/fasta-aminoacid" header="Amino acid alignment" />
+      <Link to="/fasta-codon" header="Codon alignment" />
       <Link to="/fasta-highlight" header="Highlight individual sites" />
       <Link to="/fasta-start" header="Start at a given sequence and site" />
       <Link to="/fasta-lowercase" header="Lower case alignment" />
@@ -127,6 +128,7 @@ class App extends Component {
 
           <Route path="/fasta-viewer" render={props => <FASTA.FASTAViewer />} />
           <Route path="/fasta-aminoacid" component={FASTA.AminoAcid} />
+          <Route path="/fasta-codon" component={FASTA.Codon} />
           <Route path="/fasta-highlight" component={FASTA.Highlight} />
           <Route path="/fasta-start" component={FASTA.StartAtSiteAndSequence} />
           <Route path="/fasta-lowercase" component={FASTA.Lowercase} />

src/app/FASTA.jsx

@@ -11,6 +11,7 @@ import Modal from "./Modal.jsx";
 import SVGAlignment from "../SVGAlignment.jsx";
 import { nucleotide_color, nucleotide_difference } from "../helpers/colors";
 import AminoAcid from "./FASTA/amino_acid.jsx";
+import Codon from "./FASTA/codon.jsx";
 import Highlight from "./FASTA/highlight.jsx";
 import SVGAlignmentExample from "./FASTA/svg_example.jsx";
 import StartAtSiteAndSequence from "./FASTA/start_at_site_and_sequence.jsx";
@@ -188,6 +189,7 @@ class FASTAViewer extends Component {
 export {
   FASTAViewer,
   AminoAcid,
+  Codon,
   Highlight,
   StartAtSiteAndSequence,
   Lowercase,

src/app/FASTA/codon.jsx

@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+import { text } from "d3";
+
+import Alignment from "../../Alignment.jsx";
+import fastaParser from "../../helpers/fasta.js";
+import { codon_colorer } from "../../helpers/colors.js";
+
+class Codon extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      sequence_data: null
+    };
+  }
+  componentDidMount() {
+    text("data/CD2.fasta").then(data => {
+      const sequence_data = fastaParser(data);
+      this.setState({ sequence_data });
+    });
+  }
+  render() {
+    const { sequence_data } = this.state;
+    if (!sequence_data) return <div />;
+    return (
+      <div>
+        <div>
+          <h1>Codon Alignment</h1>
+        </div>
+        <Alignment
+          fasta={sequence_data}
+          site_color={codon_colorer(sequence_data)}
+        />
+      </div>
+    );
+  }
+}
+
+export default Codon;

src/components/BaseAlignment.jsx

@@ -78,7 +78,7 @@ class BaseAlignment extends Component {
         y = site_size * (d.i - 1),
         mol = molecule(d.mol, d.j, d.header);
       context.beginPath();
-      context.fillStyle = site_color(d.mol, d.j, d.header);
+      context.fillStyle = site_color(d.mol, d.j, d.header, d.i);
       context.rect(x, y, site_size, site_size);
       context.fill();
       context.fillStyle = text_color(d.mol, d.j, d.header);

src/helpers/colors.js

@@ -1,3 +1,5 @@
+import translation from "./translation.js";
+
 const ambiguous_color = "DarkGrey",
   ambiguous_text_color = "black";
 
@@ -137,6 +139,20 @@ const nucleotide_colors = {
       if (header == desired_header) return desired_color;
       return mol == desired_sequence[site - 1] ? "white" : desired_color;
     };
+  },
+  codon_colorer = (sequence_data, site_color) => {
+    site_color = site_color || amino_acid_color;
+    return (character, position, header, seq_index) => {
+      if (character == "-") return amino_acid_colors["-"];
+      const codon_start = 3 * Math.floor((position - 1) / 3),
+        sequence = sequence_data[seq_index - 1].seq,
+        first_nuc = sequence[codon_start],
+        second_nuc = sequence[codon_start + 1],
+        third_nuc = sequence[codon_start + 2],
+        codon = first_nuc + second_nuc + third_nuc,
+        amino_acid = translation[codon];
+      return site_color(amino_acid);
+    };
   };
 
 export {
@@ -146,5 +162,6 @@ export {
   nucleotide_difference,
   amino_acid_color,
   amino_acid_colors,
-  amino_acid_text_color
+  amino_acid_text_color,
+  codon_colorer
 };

src/helpers/translation.js

@@ -0,0 +1,66 @@
+export default {
+  AAA: "K",
+  AAC: "N",
+  AAG: "K",
+  AAT: "N",
+  ACA: "T",
+  ACC: "T",
+  ACG: "T",
+  ACT: "T",
+  AGA: "R",
+  AGC: "S",
+  AGG: "R",
+  AGT: "S",
+  ATA: "I",
+  ATC: "I",
+  ATG: "M",
+  ATT: "I",
+  CAA: "Q",
+  CAC: "H",
+  CAG: "Q",
+  CAT: "H",
+  CCA: "P",
+  CCC: "P",
+  CCG: "P",
+  CCT: "P",
+  CGA: "R",
+  CGC: "R",
+  CGG: "R",
+  CGT: "R",
+  CTA: "L",
+  CTC: "L",
+  CTG: "L",
+  CTT: "L",
+  GAA: "E",
+  GAC: "D",
+  GAG: "E",
+  GAT: "D",
+  GCA: "A",
+  GCC: "A",
+  GCG: "A",
+  GCT: "A",
+  GGA: "G",
+  GGC: "G",
+  GGG: "G",
+  GGT: "G",
+  GTA: "V",
+  GTC: "V",
+  GTG: "V",
+  GTT: "V",
+  TAA: "*",
+  TAC: "Y",
+  TAG: "*",
+  TAT: "Y",
+  TCA: "S",
+  TCC: "S",
+  TCG: "S",
+  TCT: "S",
+  TGA: "*",
+  TGC: "C",
+  TGG: "W",
+  TGT: "C",
+  TTA: "L",
+  TTC: "F",
+  TTG: "L",
+  TTT: "F"
+};