md`
# Alignment.js example in ObservableHQ
`
html`<div id='thediv'>`
document.getElementById('thediv')
{
ReactDOM.render(
React.createElement(
a.default,
{fasta: a.fastaParser(fasta), centerOnSite: 500},
null
),
document.getElementById('thediv'));
}
a = require('https://stephenshank.com/bundle.js')
r = require.alias({
react: "react@16/umd/react.production.min.js",
"react-dom": "react-dom@16/umd/react-dom.production.min.js"
})
React = r('react')
ReactDOM = r('react-dom')
html`<link type="text/css" href="https://stephenshank.com/alignment.css" rel="stylesheet">`
fasta = `>Human
AAAGAGATTACGAATGCCTTGGAAACCTGGGGTGCCTTGGGTCAGGACATCAACTTGGACATTCCTAGTTTTCAAATGAGTGATGATATTGACGATATAAAATGGGAAAAAACTTCAGACAAGAAAAAGATTGCACAATTCAGAAAAGAGAAAGAGACTTTCAAGGAAAAAGATACATATAAGCTATTTAAAAATGGAACTCTGAAAATTAAGCAT---CTGAAGACCGATGATCAGGATATCTACAAGGTATCAATATATGATACAAAAGGAAAAAATGTGTTGGAAAAAATATTTGATTTGAAGATTCAAGAGAGGGTCTCAAAACCAAAGATCTCCTGGACTTGTATCAACACAACCCTGACCTGTGAGGTAATGAATGGAACTGACCCCGAATTAAACCTGTATCAAGATGGGAAACATCTAAAA---CTTTCTCAGAGGGTCATCACACACAAGTGGACCACCAGCCTGAGTGCAAAATTCAAGTGCACAGCAGGGAACAAAGTCAGCAAGGAATCCAGTGTCGAGCCTGTCAGCTGTCCAGAGAAAGGTCTGGAC
>Chimp
GAAGAGATTACGAATGCCTTGGAAACCTGGGGTGCCTTGGGTCAGGACATCAACTTGGACATTCCTAGTTTTCAAATGAGTGATGATATTGACGATATAAAATGGGAAAAAACTTCAGACAAGAAAAAGATTGCACAATTCAGAAAAGAGAAAGAGACTTTCAAGGAAAAAGATACATATAAGCTATTTAAAAATGGAACTCTGAAAATTAAGCAT---CTGAAGACCGATGATCAGGATATCTACAAGGTATCAATATATGATACAAAAGGAAAAAATGTGTTGGAAAAAATATTTGATTTGAAGATTCAAGAGAGGGTCTCAAAACCAAAGATCTCCTGGACTTGTATCAACACAACCCTGACCTGTGAGGTAATGAATGGAACTGACCCCGAATTAAACCTGTATCAAGATGGGAAACATCTAAAA---CTTTCTCAGAGGGTCATCACACACAAGTGGACCACCAGCCTGAGTGCAAAATTCAAGTGCACAGCAGGGAACAAAGTCAGCAAGGAATCCAGTGTCGAGCCTGTCAGCTGTCCAGAGAAAGGTCTGGAC
>Baboon
AAAGAGATTAGGAATGCTTTGGAAACCTGGGGAGCGCTGGGTCAGGACATCGACTTGGACATTCCTAGTTTTCAAATGAGTGATGATATTGATGATATAAAATGGGAGAAAACTTCAGACAAGAAAAAGATTGCACAATTCAGAAAAGAGAAGGAGACTTTCGAGGAAAAAGATGCATATAAGCTATTTAAAAACGGAACTCTGAAAATTAAGCAT---CTGAAGATCCATGATCAGGATAGCTACAAGGTATCAATATACGATACAAAAGGAAAAAATGTGTTGGAAAAAACATTTGATTTGAAGATTCAAGAGAGGGTCTCAGAACCAAAGATCTCCTGGACTTGTATCAACACAACCCTGACCTGTGAAGTAATGAATGGAACTGACCCCGAATTAAACCTGTATCAAGATGGGAAACATCTAAAA---CTTTCTCAGAGGGTCATCACACACAAGTGGACCACCAGCCTGAGTGCGAAATTCAAGTGCACAGCAGGGAACAAAGTCAGCAAGGAATCCAGGATGGAGACTGTCAGCTGTCCAGAGAAAGGTCTGGAC
>RhMonkey
AAAGAGATTAGGAATGCTTTGGAAACCTGGGGAGCGCTGGGTCAGGACATCGACTTGGACATTCCTAGTTTTCAAATGAGTGATGATATTGATGATATAAGATGGGAAAAAACTTCAGACAAGAAAAAGATTGCACAATTCAGAAAAGAGAAGGAGACTTTCGAGGAAAAAGATGCATATAAGCTATTTAAAAACGGAACTCTGAAAAYTAAGCAT---CTGAAGATCCATGATCAGGATAGCTACAAGGTATCAATATACGATACAAAAGGAAAAAATGTGTTGGAAAAAACATTTGATTTGAAGATTCAAGAGAGGGTCTCAGAACCAAAGATCTCCTGGACTTGTATCAACACAACCCTGACCTGTGAAGTAATGAATGGAACTGRCCCCGAATTAAACCTGTATCAAGATGGGAAACATGTAAAA---CTTTCTCAGAGGGTCATCACACACAAGTGGACCACCAGCCTGAGTGCGAAATTCAAGTGCACAGCAGGGAACAAAGTCAGCAAGGAATCCAGGATGGAGACTGTCAGCTGTCCAGAGAAAGGTCTGGAC
>Cow
------------GAAAGCATTGTCGTCTGGGGTGCCCTGGATCATGACCTCAACCTGGACATTCCTGGTTTTCCAAGAAGTGATATAGTGGCAGATATAAAATGGAACAGA------AACAAAAACAAGATTGCACGAATAAAGAAAGATATGCCACTTCACAATGAAATGGACAAATATGATATGTTTACAAATGGAACTCTGAAAATTAAAACT---CTGATGAGAAACGATAGTGGTCTCTATGAGGTAGAGGTTTATGATTCAAATGGAGTAAACCTACTGAGCAAAAAATTTGATTTGAAGATTCAAGAGATGCTCTCAGGACCTGAAATTAACTGGATCTGTACCAACAGAACTGTGAGCTGCAAGGTAGAAAATGGAAGTAATCCTAAATTACAACTGTTTTTAAATACGACCCGTGTCAAACAAGATCATGGGAAGCTCATCACCTACACGTGGAACACCAGATGGAATAAAACATTCAAGTGCGTGGCGAGTAACCATGTCGATAGCAAAGTCAGCATAGAGATCGCCGTGTGTCCAGATGAAGGTCTGGAT
>Pig
---------------ACTGAGGTTGTCTGGGGCATCGTGGATCAAGACATCAACCTGGACATTCCTGAACTTTCAAAACATGATAACGTAGATCATATACGATGGCAGAAG------AATGAAAACAAGATCGCAGAATTTAAAAAAAACAAAGAAACTCACCCTGTGAAAGACACATACATGATGTTACCAAATGGAACTCTGAGAATTAAAGAT---CTGAAGAGAGATGATGAGGGTATCTACAAGGTAACTGTCTATGCTACGGATGGAAAACACATGCTGGAGAGAAAATTTGATTTGCCGATTCTAGATGGGGTCTCAAAACCTGTAATCTCCTGGAGCTGTGCCGACAAAACGGTGACCTGTGAGGTAGCAGAAGGAAGTGACCCTAAGTTAAAACTGTATGTAAATAAGTCCACTGCCAGAGAAGGTCGTCAGAAGGTCATCCTGTGGAAGTGGAACACCAAATGGAGCACATTATTCAAGTGTGTGGCCAGTAACAACGCCAGTGAGCAAATCAGCATGGTGACCATCAGTTGTACGGGGCAAGGTCTGGAT
>Horse
------------AAGAATATCACCATCTTGGGTGCCCTGGAACGTGATATCAACCTGGACATTCCTGCTTTTCAAATGAGTGAGCATGTAGAAGATATACAATGGAGCAAA------GGAAAAACCAAGATTGCAAAATTCAAAAATGGCAGTATGACTTTCCAGAAAGATAAAACATACGAGGTATTAAAAAATGGAACTCTGAAAATTAAACAT---CTGGAGAGAATTCATGAAGGTACCTACAAGGTAGACGCATATGATAGTGATGGAAAAAATGTGTTGGAGGAAACATTTCATTTGAGCCTTCTAGAGATGGTCTCAAAACCTAATATCTCCTGGAGCTGCACCAACACCACCCTGACCTGCGAGGTGACAAAAGGAACTGACTTTGAGTTAAAACTCTATCTAAATGGGAGAATGATCCAAAAAAGTCCTCGCAAAGTCATCGTATACAAGCGGGCCAGCAACCAAATTGCGTCCTTCAAGTGCACAGCCAATAACACAGTCAGCGAGGAAAGCAGCTCTGTGGTCATCAGGTGTACAGAGAAAGGTCTGGAT
>Cat
---------GCAAATGATGATATCGTCTGGGGTACCCTGGGTCAGGACATCAACCTGGACATTCCTGATTCTCAA---GGGATTAATATAGATGATATACACTGGGAAAAA------GGCAAGAAGAAGGTGGCGAGGTTCCAAATTAGCAACAAGCCTAAGAATCCAGATGAAAAATATAATGTGTCAATGAATGGAACTCTGAAAATTAAACAT---CTGATGCTAGAAGACTGCGATACCTACAAGGTTGTTATATACGATAAGGATGGAAAGAATGTGTTGGATAAAACATTTCAGCTGAAGATTCAAGAGAAGGTCTCAACGCCTAACATCGACTGGAATTGTATCAACAAAACCCTGGTCTGTAAGGTATCAAATGGAACAGACCCTGAATTAAAACTGTACGTAAATGGGACCAGTATCAAGCCCGTTTCTTCGAAGTTCAGCACATACAGGTTTATAAACAAGCAGAAGATATTAGTCAACTGCACGGCAGAAAACAAAGTCAGCAAGGAAAGCGACGTGAAGATGATCACTTGTTCAGAGAAGGGTCTGGAC
>Mouse
---------AGAGACAATGAGACCATCTGGGGTGTCTTGGGTCATGGCATCACCCTGAACATCCCCAACTTTCAAATGACTGATGATATTGATGAGGTGCGATGGGTAAGG------AGGGGCACCCTGGTCGCAGAGTTTAAAAGGAAGAAGCCACCTTTTTTGATATCAGAAACGTATGAGGTCTTAGCAAACGGATCCCTGAAGATAAAGAAGCCGATGATGAGAAACGACAGTGGCACCTATAATGTAATGGTGTATGGCACAAATGGGATGACTAGGCTGGAGAAGGACCTGGACGTGAGGATTCTGGAGAGGGTCTCAAAGCCCATGATCCACTGGGAATGCCCCAACACAACCCTGACCTGTGCGGTCTTGCAAGGGACAGATTTTGAACTGAAGCTGTATCAAGGGGAAACACTACTCAATAGTCTCCCCCAGAAGAACATGAGTTACCAGTGG---ACCAACCTGAACGCACCATTCAAGTGTGAGGCGATAAACCCGGTCAGCAAGGAGTCTAAGATGGAAGTTGTTAACTGTCCAGAGAAAGGTCTGTCC
>Rat
---------AGAGACAGTGGGACCGTCTGGGGTGCCCTGGGTCATGGCATCAACCTGAACATCCCTAACTTTCAAATGACTGATGATATTGATGAGGTGCGATGGGAGAGG------GGGAGCACCCTGGTTGCCGAGTTTAAAAGGAAGATGAAGCCTTTTTTGAAATCGGGAGCATTTGAGATCTTAGCAAATGGAGACTTGAAGATAAAGAAT---CTGACAAGAGATGACAGTGGCACCTATAATGTAACGGTATACAGCACAAATGGGACACGTATCCTGGACAAGGCACTGGACTTGAGGATTCTAGAGATGGTCTCAAAGCCGATGATCTACTGGGAGTGCAGCAACGCAACCCTGACCTGTGAGGTCTTGGAAGGAACAGATGTTGAACTAAAGCTGTACCAAGGAAAGGAGCATCTCAGGAGCCTCCGTCAGAAGACCATGAGTTACCAGTGG---ACCAACCTGAGAGCACCGTTTAAGTGCAAGGCGGTAAACAGGGTCAGCCAGGAGTCTGAGATGGAAGTTGTCAACTGTCCAGAGAAAGGTCTGCCC`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
