31:T880,viewof dashboard = { const brush = vl.selectInterval().encodings('x').init({x: [0, 40]}); const hover = vl.selectSingle('hover').on('mouseover').encodings("x").nearest(true).clear("mouseout"); const proteinList = Array.from(new Set(data_viz.heatmap.map(d => d.n))); const scale = { domain: Array.from(new Set(data_viz.heatmap.map(d => d.v))), range: d3.schemeSet3.concat(d3.schemeSet2).concat(['#ddd']) } const heatmap = vl .data(data_viz.heatmap) .layer( vl.markRect() .params(hover) .encode( vl.y().fieldN('n').axis({title:null}), vl.x().fieldN('k').axis({domain: false, title: null, values: d3.range(0, data.total_len, 20), labelAngle: 0, orient: 'top'}), vl.color().fieldN('v').scale(scale).legend(null), ), vl.markText({align: 'center'}) .encode( vl.y().fieldN('n'), vl.x().fieldN('k'), vl.text().fieldN('v'), vl.tooltip([ {field:'n', title: 'Protein'}, {field: 'k', title: 'Position'}, {field: 'v', title: 'Sequence'}, {field: 'mode', title: 'Mode'}]) ), ) .width(810) .height(600) .transform(vl.filter(brush)) const miniMap = vl.markTick() .data(data_viz.heatmap) .encode( vl.x().fieldQ('k').axis(false), vl.y().fieldN('n').axis(false), vl.color().fieldN('v').legend(null), vl.color().value('lightgray') .if(brush, vl.color().fieldN('v').scale(scale).legend(null)), ) .height(150) .params(brush) .width(250) const barChart = vl.markBar() .data(data_viz.bar) .encode( vl.x().fieldO('k').axis({ title: null, values: d3.range(0, data.total_len, 20), labelAngle: 0}), vl.y().fieldQ('Conversion Rate'), vl.color().fieldQ('Conversion Rate').scale({scheme: 'yellowgreenblue'}).legend(null), vl.tooltip([ {field: 'Conversion Rate', format: '.2f'}, {field: 'k', title: 'Position'}]) ) .height(150) .width(500) .transform(vl.filter(brush)) return vl.vconcat(vl.hconcat(miniMap, barChart), heatmap) .config({view:{stroke:'transparent'}}) .render(); }32:T4cf,// Pill button design: https://observablehq.com/@kentdi808/the-pill pillCss = { return html ` pillCSS ` }33:[] 2f:{"title":"Sequence Alignment Dashboard","cells":[{"id":0,"value":"# Sequence Alignment Dashboard","pinned":false,"hidden":false,"mode":"md"},{"id":677,"value":"pills = {\n const pillData = ['d3-Array', 'd3-rollup', 'd3-group', 'Vega-lite', 'vl.selectInterval', 'vl.selectSingle'];\n return html `\n

\n ${pillData.map(d => '

'+d+'

')}\n

\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"html`

Protein sequences alignment dynamic dashboard. The idea of this visualization is borrowed from Plotly Dash Bio. The fasta file parser is from stephenshank.com. The mini-map can be used as a brush selector to choose a region of the alignment chart to show the details of protein sequences and corresponding conversion rates. Concensus is comprised of the mode of Amino Acids from different proteins on each position (column) and the conversion rate is the count of model over the count of total number of proteins (${Array.from(new Set(data_viz.heatmap.map(d => d.n))).length - 1} in the demo dataset).

fasta data file: https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/alignment_viewer_p53.fasta`","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"viewof file = Inputs.file({label: 'Import fasta file', accept: '.fasta'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"data = {\n const url = 'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/alignment_viewer_p53.fasta' \n const raw = (\n file === null \n ? a.fastaParser(await d3.text(url)) \n : a.fastaParser(await file.text())\n )\n .map(d => ({...d, \n 'seq_len': d.seq.length,\n 'seq_name': d.header.split('|')[2].split(' ')[0] \n }));\n \n const max_len = d3.max(raw, d => d.seq_len);\n \n const raw1 = raw.map(d => ({...d, \n 'seq_full_str': d.seq + '-'.repeat(max_len - d.seq_len),\n 'seq_full': [...(d.seq + '-'.repeat(max_len - d.seq_len))].map((n,i) => ({'k': i, 'v': n, 'n': d.seq_name})) \n }));\n\n const derive = raw1.map(k => k.seq_full.map(j => ({'n': j.n, 'k': j.k, 'v': j.v }))).flat()\n\n return {'raw': raw1, 'derive': derive, 'total_len': max_len}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"data_viz = {\n const raw_len = data.raw.length\n const countCol = d3.flatRollup(data.derive, v => v.length, d => d.k, d => d.v)\n .map(([k, v, cnt]) => ({k, v, cnt}))\n\n const conversion = d3.groups(countCol, d=>d.k)\n .map(n => d3.greatest(n[1], a=>a.cnt))\n .map(d => ({...d, 'Conversion Rate': d.cnt / raw_len}))\n\n const derive2 = data.derive.map(d => ({...d, 'mode': conversion.filter(j => j.k === d.k )[0].v}))\n\n const data_viz = derive2.concat(conversion.map(d => ({'n': 'Concensus', 'k': d.k, 'v': d.v, 'mode': d.v})))\n\n return {'heatmap': data_viz, 'bar' : conversion}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"a = require('https://stephenshank.com/bundle.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"import {Plot, d3} from \"@observablehq/plot\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}