dms-view

Sarah Hilton*, John Huddleston*, Allison Black, Khrystyna North, Adam Dingens, Trevor Bedford, and Jesse Bloom.
(* equal contribution)

dms-view is an interactive visualization tool for deep mutational scanning experiments. You can find the tool at dms-view.github.io.

This repo contains the JavaScript and D3 code to run the tool itself. For information on how to use the tool, please see the documentation.

Please raise issues with the tool at github.com/dms-view/dms-view.github.io/issues.

Organization

There are two categories of files in this repo: code to run the website and default data.

(1) code to run the website

website skeleton and styles

• index.html: The HTML skeleton of the tool.
• styles.css: CSS styles for the website.

JavaScript / D3 for the plots

• main.js: Control script for data processing and JavaScript code for the three panels.
• line_plot_zoom.js: JavaScript and D3 code for the site dot plot panel.
• logoplot.js: JavaScript and D3 code for the mutation logoplot panel.
• prot_struct.js: JavaScript and NGL code for the protein structure panel.

external packages and files

• DejaVuSansMonoBold_SeqLogo.ttf: font for the mutation logoplot panel. More info on the font HERE.
• node_modules/: External JavaScript modules.
• ngl.js: NGL module code.

(2) default data

If dms-view.github.io is loaded without datafiles specified in the URL, influenza serum mapping data from Lee et al., 2019 is loaded by default. For more information on how to create the data files, see dms-view.github.io/docs/dataupload.

• flu_dms-view.csv: data file
• 4O5N_trimer.pdb: protein structure file
• lee2019mapping.md: metadata file

External dependencies

• d3 v5
• d3 array v2
• underscore v1.9.1
• opentype v1.1.0
• min v0.8.2
• bootstrap v4.3.1

The other dependencies are hosted within the repo.

Testing

As described above, dms-view uses a default dataset from Lee et al., 2019. Below are two descriptions of different combinations of dropdown menus and selected sites, as well as pictures of what the tool should look like.

View 1 (default view)

When dms-view.github.io is loaded, the default view of the data section should look as follows:

Load view 1 to explore this example.

View 2

The data section should look as follows when you change

• condition to "2009-age-65"
• mutation metric to "Natural Frequencies"
• selected sites 144, 159, 192, 193, 222, 224

Load view 2 to explore this example.

Other views

In the documentation, we use dms-view to recreate paper figures for two different studies. Please see dms-view.github.io/docs/casestudies to see these examples