### Start Local Development Server

Source: https://github.com/bv-brc/bv-brc-web/blob/master/README.md

Starts the local development server for the BV-BRC web application. The application will typically be accessible at `http://localhost:3000/` after running this command.

```Shell
npm start
```

--------------------------------

### Clone Repository and Install Dependencies (Git)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/README.md

Clones the BV-BRC-Web repository using Git, navigates into the directory, and installs the project's Node.js dependencies using npm.

```Shell
git clone https://github.com/BV-BRC/BV-BRC-Web.git
cd BV-BRC-Web
npm install
```

--------------------------------

### Clone Repository and Install Dependencies (GitHub CLI)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/README.md

Clones the BV-BRC-Web repository using the GitHub CLI, navigates into the directory, and installs the project's Node.js dependencies using npm. This is an alternative to using standard Git commands.

```Shell
gh repo clone BV-BRC/BV-BRC-Web
cd BV-BRC-Web
npm install
```

--------------------------------

### Install Node.js using Homebrew (MacOS)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/README.md

Installs Node.js and NPM on MacOS using the Homebrew package manager. This is an alternative installation method to the official Node.js downloads.

```Shell
brew install node
```

--------------------------------

### Copy Sample Configuration File

Source: https://github.com/bv-brc/bv-brc-web/blob/master/README.md

Copies the sample configuration file `p3-web.conf.sample` to `p3-web.conf`. The `p3-web.conf` file is used for initial setup and configuration and must be edited with correct information.

```Shell
cp p3-web.conf.sample p3-web.conf
```

--------------------------------

### Setting up MSA - Clone and Install (Bash)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Provides the necessary Bash commands to clone the MSA repository from GitHub, navigate into the directory, and install project dependencies using npm.

```Bash
git clone https://github.com/wilzbach/msa
cd msa
npm install
```

--------------------------------

### Initialize Git Submodules

Source: https://github.com/bv-brc/bv-brc-web/blob/master/README.md

Initializes and updates the Git submodules within the cloned repository. This step is required after running `npm install` to fetch necessary modules located in the `node_modules` directory.

```Shell
git submodule update --init
```

--------------------------------

### Install Node.js Dependencies (npm)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/BVBRC_build.txt

This command installs all necessary project dependencies listed in the package.json file. It's the standard first step after cloning a Node.js project.

```Shell
npm install
```

--------------------------------

### Developing MSA - Start Snippets Server (Bash)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Describes the `npm run sniper` command, which starts a local server to browse and view code snippets at a specified address (localhost:9090/snippets).

```Bash
npm run sniper
```

--------------------------------

### Developing MSA - Start Watcher (Bash)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Introduces a shortcut command `./w` in the project root directory that automatically executes common development tasks like watching and recompiling.

```Bash
./w
```

--------------------------------

### Testing MSA - Run Gulp Tests (Bash)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Shows how to execute all unit tests using the `gulp test` command, assuming gulp is installed globally.

```Bash
gulp test
```

--------------------------------

### Compiling Project Assets with Gulp (Shell)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

This command uses Gulp to regenerate the CSS and JavaScript files, including minimization. While this is typically handled automatically by Travis CI and `npm install`, you might need to run it manually if you encounter issues or cannot install Gulp globally. Minimization is performed by Browserify.

```Shell
gulp build
```

--------------------------------

### HTML Skeleton for jsPhyloSVG Installation

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/jsphylosvg-1.55/readme.txt

Provides a basic HTML structure including the necessary script tags to include the Raphael and jsPhyloSVG libraries, and a div element where the phylogenetic tree will be rendered as an SVG canvas.

```HTML
<html>
<head>				
	<script type="text/javascript" src="js/raphael/raphael-min.js"></script> 
	<script type="text/javascript" src="js/jsphylosvg-min.js"></script> 				
</head>
<body>
	<div id="svgCanvas"> </div>
</body>
</html>
```

--------------------------------

### Creating Repeating D3 Transition with d3.active (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Selects a circle element and starts a transition. Uses the on("start", ...) event listener to trigger a function (repeat) when the transition begins. Inside repeat, d3.active(this) gets the current transition, applies a style, chains another transition, and then calls repeat again on the start of the next transition, creating an infinite loop between red and blue fill colors.

```JavaScript
d3.select("circle")
  .transition()
    .on("start", function repeat() {
        d3.active(this)
            .style("fill", "red")
          .transition()
            .style("fill", "blue")
          .transition()
            .on("start", repeat);
      });
```

--------------------------------

### Listen to Residue Mouse Events in MSA.js (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Provides examples of listening to mouse interaction events specifically on individual residues within the alignment, such as click, mousein, and mouseout. Requires setting the `conf.registerMouseHover` flag.

```JavaScript
msa.g.on("residue:click", function(data){ ... }):
msa.g.on("residue:mousein", function(data){ ... }):
msa.g.on("residue:mouseout", function(data){ ... }):
```

--------------------------------

### Query and Manipulate Selections/User Settings in MSA.js (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Provides examples for querying selected blocks, inverting selections, resetting the entire selection, and setting user-specific attributes like search text. Interacts with the selection collection (`m.g.selcol`) and user settings (`m.g.user`).

```JavaScript
m.g.selcol.getBlocksForRow() // array of all selected residues for a row
m.g.selcol.getAllColumnBlocks() // array with all selected columns
m.g.selcol.invertRow(@model.pluck "id")
m.g.selcol.invertCol([0,1,2])
m.g.selcol.reset() // remove the entire selection
m.g.user.set("searchText", search) // search 
```

--------------------------------

### Git Pre-commit Hook for ESLint (Shell)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/docs/pre-commit-linting.md

A shell script intended to be placed in `.git/hooks/pre-commit`. It iterates through staged `.js`, `.jsx`, and `.html` files, runs ESLint on each staged version, and prevents the commit if any linting errors are found. Requires ESLint installed in `node_modules`.

```shell
#!/bin/bash

for file in $(git diff --cached --name-only | grep -E '\.(js|jsx|html)$')
do
  git show ":$file" | node_modules/.bin/eslint --stdin --stdin-filename "$file" # we only want to lint the staged changes, not any un-staged changes
  if [ $? -ne 0 ]; then
    echo "ESLint failed on staged file '$file'. Please check your code and try again. You can run ESLint manually via npm run eslint."
    exit 1 # exit with failure status
  fi
done
```

--------------------------------

### Count Hour of Week (D3 v4)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Provides a more general example of the D3.js v4 `interval.count` method, calculating the hour of the week. It counts the number of `d3.timeHour` intervals between the start of the current week (`d3.timeWeek(now)`) and the current date (`now`).

```javascript
d3.timeHour.count(d3.timeWeek(now), now); // 64
```

--------------------------------

### Example D3 Stack Generator Output (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

This snippet illustrates the structure of the output generated by the d3.stack function. It is an array where each element represents a stacked series. Each series is an array of points, and each point is a two-element array [lower, upper] defining the baseline and topline for that point in the stack.

```JavaScript
[
  [[   0, 3840], [   0, 1600], [   0,  640], [   0,  320]], // apples
  [[3840, 5760], [1600, 3040], [ 640, 1600], [ 320,  800]], // bananas
  [[5760, 6720], [3040, 4000], [1600, 2240], [ 800, 1440]], // cherries
  [[6720, 7120], [4000, 4400], [2240, 2640], [1440, 1840]], // dates
]
```

--------------------------------

### Manipulate Sequence Collection in MSA.js (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Provides various examples for interacting with the sequence collection (`m.seqs`), including hiding, getting/setting sequence data, adding/removing sequences, sorting, and managing features. Uses Backbone.js collection methods.

```JavaScript
m.seqs.at(0).set("hidden", true) // hides the first seq
m.seqs.at(0).get("seq") // get raw seq
m.seqs.at(0).get("seqId") // get seqid
m.seqs.at(0).set("seq", "AAAA") // sets seq
m.seqs.add({seq: "AAA"});  // we add a new seq at the end
m.seqs.unshift({seq: "AAA"});  // we add a new seq at the beginning
m.seqs.pop() // remove and return last seq
m.seqs.shift() // remove and return first seq 
m.seqs.length // nr
m.seqs.pluck("seqId") // ["id1", "id2", ..]
m.seqs.remove(m.seqs.at(2)) // remove seq2
m.seqs.getMaxLength() // 200
m.seqs.addFeatures()
m.seqs.removeAllFeatures()
m.seqs.setRef(m.seqs.at(1)) // sets the second seq as reference (default: first)
m.seqs.comparator = "seqId" // sort after seqId
m.seqs.sort() // apply our new comparator
m.seqs.comparator =  function(a,b){ return - a.get("seq").localeCompare(b.get("seq"))} // sort after the seq itself in descending order
m.seqs.sort()
```

--------------------------------

### Styling D3 Brush Extent (CSS)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

This CSS snippet provides example styles for the brush extent element in D3 brush visualizations. These styles were previously necessary for a reasonable appearance but are now often applied by default as attributes in newer D3 versions.

```css
.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}
```

--------------------------------

### Count Week of Year (D3 v4)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Shows another application of the D3.js v4 `interval.count` method to calculate the week of the year. It counts the number of `d3.timeWeek` intervals between the start of the year and the current date.

```javascript
d3.timeWeek.count(d3.timeYear(now), now); // 24
```

--------------------------------

### Interpolating Objects with d3.interpolateObject (v3.x)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Demonstrates the behavior of d3.interpolateObject in D3 version 3.x. Properties present in the start object ('a') but not the end object ('b') were included in the interpolated result, maintaining the property from 'a'.

```js
d3.interpolateObject({foo: 2, bar: 1}, {foo: 3})(0.5); // {bar: 1, foo: 2.5} in 3.x
```

--------------------------------

### Problematic Interval with D3 Transition (D3 3.x) - JavaScript

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

An example of using `setInterval` to repeatedly schedule D3 transitions. This pattern is problematic in D3 3.x as it can cause the browser to hang when the page is backgrounded and then foregrounded due to accumulated queued transitions.

```javascript
setInterval(function() {
  d3.selectAll("div").transition().call(someAnimation); // BAD
}, 1000);
```

--------------------------------

### Applying Gamma Correction to RGB Interpolation in D3

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Shows how to apply gamma correction to a color interpolator using the .gamma() method. This example creates an RGB interpolator between 'purple' and 'orange' with a gamma value of 2.2.

```js
var interpolate = d3.interpolateRgb.gamma(2.2)("purple", "orange");
```

--------------------------------

### Count Day of Year (D3 v4)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Demonstrates how to calculate the day of the year in D3.js v4 using the new general `interval.count` method. This replaces the v3 `d3.time.dayOfYear` by counting the number of `d3.timeDay` intervals between the start of the year (`d3.timeYear(now)`) and the current date (`now`).

```javascript
var now = new Date;
d3.timeDay.count(d3.timeYear(now), now); // 165
```

--------------------------------

### Interpolating Objects with d3.interpolateObject (v4.0)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Illustrates the updated behavior of d3.interpolateObject in D3 version 4.0. Properties present in the start object ('a') but not the end object ('b') are now ignored, ensuring the interpolated result only contains properties from 'b'.

```js
d3.interpolateObject({foo: 2, bar: 1}, {foo: 3})(0.5); // {foo: 2.5} in 4.0
```

--------------------------------

### Generate Date Range with Step (D3 v4)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Demonstrates the behavior of `d3.timeDays` in D3.js v4 when a step greater than one is provided. In v4, the `range` method behaves like `d3.range`, simply skipping every `step`th date from the start date, rather than filtering.

```javascript
d3.timeDays(new Date(2016, 4, 28), new Date(2016, 5, 5), 2);
// [Sat May 28 2016 00:00:00 GMT-0700 (PDT),
//  Mon May 30 2016 00:00:00 GMT-0700 (PDT),
//  Wed Jun 01 2016 00:00:00 GMT-0700 (PDT),
//  Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)]
```

--------------------------------

### Generate Filtered Date Range with Step (D3 v4)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Shows how to achieve the D3.js v3 filtering behavior for time intervals in v4 using the new `interval.every` method combined with `range`. This returns dates that are exactly `step` intervals apart, starting from the first date in the range that aligns with the step.

```javascript
d3.timeDay.every(2).range(new Date(2016, 4, 28), new Date(2016, 5, 5));
// [Sun May 29 2016 00:00:00 GMT-0700 (PDT),
//  Tue May 31 2016 00:00:00 GMT-0700 (PDT),
//  Wed Jun 01 2016 00:00:00 GMT-0700 (PDT),
//  Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)]
```

--------------------------------

### Generate Date Range with Step (D3 v3)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Demonstrates the behavior of `d3.time.days` in D3.js v3 when a step greater than one is provided. In v3, the `range` method filters the dates based on the interval's field number, returning only dates where the day of the month is odd in this example.

```javascript
d3.time.days(new Date(2016, 4, 28), new Date(2016, 5, 5), 2);
// [Sun May 29 2016 00:00:00 GMT-0700 (PDT),
//  Tue May 31 2016 00:00:00 GMT-0700 (PDT),
//  Wed Jun 01 2016 00:00:00 GMT-0700 (PDT),
//  Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)]
```

--------------------------------

### Prepare and Commit Release Build (Shell)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/CONTRIBUTING-old.md

Outlines the steps to prepare a release build. It involves editing the package.json file to increment the version, staging all changes, committing the changes with a specific message, and pushing the commit.

```Shell
edit ./package.json   // increment "version"
git add --all
git commit -m 'release js'
git push
```

--------------------------------

### Run Build Script (npm)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/BVBRC_build.txt

This command executes the build script defined in the package.json file. This typically compiles source code, bundles assets, or performs other tasks necessary to prepare the module for use.

```Shell
npm run build
```

--------------------------------

### Initialize MSA.js with Colorscheme (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Initializes the msa.js viewer with basic options, including the container element, data import URL, and a predefined colorscheme ('hydro'). Requires the msa library.

```JavaScript
var msa = require("msa");
var opts = {
  el: rootDiv,
  importURL: "./data/fer1.clustal",
  colorscheme: {"scheme": "hydro"}
};
var m = new msa(opts);
```

--------------------------------

### Testing MSA - Run CLI Tests (Bash)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Provides the standard `npm test` command for running unit tests from the command line interface.

```Bash
npm test
```

--------------------------------

### Configuring MSA - Core Parameters (JSON)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Describes the main configuration object `g` for the MSA viewer, including settings for mouse events, import proxy, visualization components, and zoom behavior.

```JSON
conf: {
 	registerMouseHover: false,
    registerMouseClicks: true,
    importProxy: "https://cors-anywhere.herokuapp.com/",
    eventBus: true,
    alphabetSize: 20,
    dropImport: false,
    debug: false,
    hasRef: false // hasReference,
    manualRendering: false // manually control the render (not recommened)
},
colorscheme: {
    scheme: "taylor", // name of your color scheme
    colorBackground: true, // otherwise only the text will be colored
    showLowerCase: true, // used to hide and show lowercase chars in the overviewbox
    opacity: 0.6 //opacity for the residues
},
columns: {
	hidden: [] // hidden columns
},
vis: {
    sequences: true,
    markers: true,
    metacell: false,
    conserv: false,
    overviewbox: false,
    seqlogo: false,
    gapHeader: false,
    leftHeader: true,

    // about the labels
    labels: true,
    labelName: true,
    labelId: true,
    labelPartition: false,
    labelCheckbox: false,

    // meta stuff
    metaGaps: true,
    metaIdentity: true,
    metaLinks: true
},
zoomer: {
    // general
    alignmentWidth: "auto",
    alignmentHeight: 225,
    columnWidth: 15,
    rowHeight: 15,
    autoResize: true // only for the width

    // labels
    textVisible: true,
    labelIdLength: 30,
    labelNameLength: 100,
    labelPartLength: 15,
    labelCheckLength: 15,
    labelFontsize: 13,
    labelLineHeight: "13px",

    // marker
    markerFontsize: "10px",
    stepSize: 1,
    markerStepSize: 2,
    markerHeight: 20,

    // canvas
    residueFont: "13", //in px
    canvasEventScale: 1,

    // overview box
    boxRectHeight: 2,
    boxRectWidth: 2,
    overviewboxPaddingTop: 10,

    // meta cell
    metaGapWidth: 35,
    metaIdentWidth: 40,
    metaLinksWidth: 25
}
```

--------------------------------

### Running ESLint on Directory (Shell)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/docs/pre-commit-linting.md

Demonstrates how to execute the ESLint command from `node_modules/.bin` to lint all JavaScript/JSX/HTML files within a specified directory. Useful for checking code style across a module or component.

```shell
./node_modules/.bin/eslint public/js/p3
```

--------------------------------

### Running ESLint on Specific File (Shell)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/docs/pre-commit-linting.md

Shows how to run the ESLint command on a single file. This is useful for checking the style and linting rules for a particular file before committing changes.

```shell
./node_modules/.bin/eslint public/js/p3/widget/ProteinFamiliesContainer.js
```

--------------------------------

### Asynchronously Import Sequences JavaScript

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Initializes the MSA viewer and then uses the `biojs-io-clustal` library to asynchronously read sequence data from a URL, resetting the viewer's sequences and rendering it upon completion.

```JavaScript
var msa = require("msa");
var clustal = require("biojs-io-clustal");
var m = new msa({
	el: rootDiv
});
clustal.read("https://raw.githubusercontent.com/wilzbach/msa/master/test/dummy/samples/p53.clustalo.clustal", function(err, seqs){
	m.seqs.reset(seqs);
	m.render();
});
```

--------------------------------

### Import Custom Sequences JavaScript

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Initializes the MSA viewer with a root DOM element and provides an array of sequences directly using the `seqs` option, then renders the viewer.

```JavaScript
var msa = require("msa");
var m = new msa({
	el: rootDiv,
	seqs: msa.utils.seqgen.genConservedSequences(10,30, "ACGT-") // an array of seq files
});
m.render()
```

--------------------------------

### Import Sequences from URL JavaScript

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Initializes the MSA viewer with a root DOM element and imports sequence data directly from a specified URL upon creation.

```JavaScript
var msa = require("msa");
var opts = {
  el: rootDiv,
  importURL: "./data/fer1.clustal"
};
var m = new msa(opts);
```

--------------------------------

### Load D3 v4 Bundle with Plugin (HTML)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Shows how to load the default D3 v4 bundle along with an optional plugin, such as d3-scale-chromatic, by including multiple script tags in the HTML document. This allows extending the default functionality.

```HTML
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v0.3.js"></script>
```

--------------------------------

### Configuring MSA - Menu Properties (JSON)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Details the configuration properties specifically for the MSA menu, controlling font sizes, line heights, margins, and padding.

```JSON
menu: {
    menuFontsize: "14px",
    menuItemFontsize: "14px",
    menuItemLineHeight: "14px",
    menuMarginLeft: "3px",
    menuPadding: "3px 4px 3px 4px",
}
```

--------------------------------

### Load D3.js via CDN (Standard)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/README.md

Loads the standard, unminified version of the D3.js library directly from the official CDN using a script tag in HTML.

```html
<script src="https://d3js.org/d3.v5.js"></script>
```

--------------------------------

### Include MSA Viewer via CDN HTML

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Includes the minified, gzipped version of the MSA viewer library directly from the BioJS CDN using a script tag.

```HTML
<script src=//cdn.biojs.net/msa/0.4/msa.min.gz.js></script>
```

--------------------------------

### Load D3.js via CDN (Minified)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/README.md

Loads the minified version of the D3.js library directly from the official CDN using a script tag in HTML, suitable for production environments.

```html
<script src="https://d3js.org/d3.v5.min.js"></script>
```

--------------------------------

### Load D3.js Microlibrary via CDN

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/README.md

Loads a specific standalone D3 microlibrary, d3-selection, directly from the official CDN using a script tag in HTML. This is useful for including only necessary modules.

```html
<script src="https://d3js.org/d3-selection.v1.js"></script>
```

--------------------------------

### Developing MSA - Watch and Recompile (Bash)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Explains the `npm run watch` command, which uses watchify to automatically recompile JavaScript files into the build folder whenever changes are detected during development.

```Bash
npm run watch
```

--------------------------------

### Load Default D3 v4 Bundle (HTML)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Demonstrates how to include the standard, default bundle of D3 version 4 using a simple HTML script tag. This method provides access to the most commonly used D3 modules.

```HTML
<script src="https://d3js.org/d3.v4.js"></script>
```

--------------------------------

### Creating and Applying D3 Stack Generator (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

This code demonstrates how to create a d3.stack generator and apply it to the input data. The .keys() method specifies which properties from the input objects represent the series to be stacked. .order() and .offset() configure the stacking behavior.

```JavaScript
var stack = d3.stack()
    .keys(["apples", "bananas", "cherries", "dates"])
    .order(d3.stackOrderNone)
    .offset(d3.stackOffsetNone);

var series = stack(data);
```

--------------------------------

### Making Git Hook Executable (Shell)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/docs/pre-commit-linting.md

Command to change the file permissions of the pre-commit hook script. This makes the script executable, allowing Git to run it automatically before each commit.

```shell
chmod +x pre-commit
```

--------------------------------

### Testing Pre-commit Hook with Git Commit (Shell)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/docs/pre-commit-linting.md

Demonstrates attempting a git commit after setting up the pre-commit hook. If linting errors exist in staged files, the hook will run ESLint, report the errors, and prevent the commit, showing the hook is active.

```shell
git commit public/js/p3/widget/ProteinFamiliesContainer.js -m 'test'
```

--------------------------------

### Load Specific D3 v4 Microlibrary (HTML)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Illustrates how to load a single D3 v4 microlibrary, like d3-selection, independently using a script tag. This is useful when only a specific part of D3's functionality is required, reducing the overall file size.

```HTML
<script src="https://d3js.org/d3-selection.v1.js"></script>
```

--------------------------------

### Sync Local Git Fork with Upstream Develop Branch (Shell)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/CONTRIBUTING-old.md

Synchronizes the local 'develop' branch of a Git fork with the 'develop' branch of the upstream repository. It checks out 'develop', fetches updates from 'upstream', and pulls the changes into the local branch.

```Shell
git checkout develop
git fetch upstream
git pull upstream develop
```

--------------------------------

### Add and Set Custom Colorscheme in MSA.js (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Demonstrates how to add a custom static colorscheme ('own') with specific color mappings for residues and then set the viewer to use this new scheme. Requires an initialized msa instance.

```JavaScript
var msa = require("msa");
var opts = {
  el: rootDiv,
  importURL: "./data/fer1.clustal",
  colorscheme: {"scheme": "hydro"}
};
var m = new msa(opts);
m.g.colorscheme.addStaticScheme("own",{A: "orange", C: "red", G: "green", T: "blue"});
m.g.colorscheme.set("scheme", "own");
```

--------------------------------

### Apply Patch to stat.seqs Module (Shell)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/BVBRC_build.txt

This command applies a specific patch file (stat.seqs.patch) to the index.js file within the stat.seqs dependency. This step is required to modify the behavior of the dependency.

```Shell
patch -p 1 node_modules/stat.seqs/lib/index.js < stat.seqs.patch
```

--------------------------------

### Synchronizing D3 Transitions with Shared Instance (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Creates a D3 transition instance with specific duration and easing. Applies this shared instance to multiple selections (.apple and .orange) to ensure they transition simultaneously with the same timing properties.

```JavaScript
var t = d3.transition()
    .duration(750)
    .ease(d3.easeLinear);

d3.selectAll(".apple").transition(t)
    .style("fill", "red");

d3.selectAll(".orange").transition(t)
    .style("fill", "orange");
```

--------------------------------

### Promoting Value to Function Using Constant Helper (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Shows how to use the `constant` helper function to ensure a variable `x` is treated as a function. If `x` is already a function, it is used directly; otherwise, `constant(x)` is called to create a function that returns `x`.

```javascript
var fx = typeof x === "function" ? x : constant(x);
```

--------------------------------

### Listen to Row/Column/Meta Click Events in MSA.js (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Shows how to listen for click events on higher-level components of the alignment viewer, such as entire rows, columns, or meta-information areas. Requires setting the appropriate configuration flags for mouse events.

```JavaScript
msa.g.on("row:click", function(data){ ... }):
msa.g.on("column:click", function(data){ ... }):
msa.g.on("meta:click", function(data){ ... }):
```

--------------------------------

### Import All D3 Modules into Namespace (ESM)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/README.md

Imports the entire D3 library into a namespace object (d3) using ES2015 module syntax. Requires a module bundler like Rollup or Webpack.

```js
import * as d3 from "d3";
```

--------------------------------

### Loading XML with d3.xml and mimeType in JavaScript

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

This snippet demonstrates how to load an XML file (specifically an SVG) using d3.xml in D3 v4. It shows the updated method of setting the MIME type using the .mimeType() method on the request object, rather than passing it as a second argument to d3.xml. The .get() method initiates the request, and the callback function handles the response or any errors.

```javascript
d3.xml("file.svg").mimeType("image/svg+xml").get(function(error, svg) {
  …
});
```

--------------------------------

### Fixing ESLint Issues Automatically (Shell)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/docs/pre-commit-linting.md

Illustrates how to use the `--fix` option with the ESLint command. This attempts to automatically fix common linting and code style issues detected by ESLint in the specified file.

```shell
./node_modules/.bin/eslint public/js/p3/widget/ProteinFamiliesContainer.js --fix
```

--------------------------------

### Rendering D3 v4 Axis with New API

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Shows the simplified syntax for rendering a D3 v4 axis using the new `d3.axisBottom()` constructor. D3 v4 provides default styles, reducing the need for explicit CSS in basic cases and simplifying the JavaScript call.

```HTML
<script>

d3.select(".axis")
    .call(d3.axisBottom(x));

</script>
```

--------------------------------

### Listen to Specific Attribute Change Events in MSA.js (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Shows how to listen for changes to a specific attribute (e.g., 'alignmentWidth') on a component (e.g., `m.g.vis`) using the 'change:attributeName' event syntax. Uses Backbone.js event syntax.

```JavaScript
m.g.vis.on("change:alignmentWidth", function(prev, new){

})
```

--------------------------------

### Add Selections in MSA.js (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Shows how to add different types of selections to the selection collection (`m.g.selcol`), including row-based, column-wise, and position-specific selections, and how to reset the selection. Requires msa.selection types.

```JavaScript
m.g.selcol.add(new msa.selection.rowsel({seqId: "f1"})); // row-based
m.g.selcol.add(new msa.selection.columnsel({xStart: 10, xEnd: 12})); // column-wise
m.g.selcol.add(new msa.selection.possel({xStart: 10, xEnd: 12, seqId: "f1"})); // union of row and column
m.g.selcol.reset([new msa.selection.rowsel({seqId: "f1"})]); // reset
```

--------------------------------

### Listen to Collection Change Events in MSA.js (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Demonstrates how to attach a listener to the generic 'change' event on a collection (e.g., `m.g.selcol`) to react whenever the collection's contents or attributes change. Uses Backbone.js event syntax.

```JavaScript
m.g.selcol.on("change", function(prev, new){

})
```

--------------------------------

### Require Specific D3 Modules and Combine (Node.js)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/README.md

Imports specific D3 microlibraries using CommonJS require and combines them into a single d3 object using Object.assign, useful for creating custom bundles in Node.js.

```js
var d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection"));
```

--------------------------------

### Require D3 in Node.js (CommonJS)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/README.md

Imports the entire D3 library using the CommonJS require syntax, typically used in Node.js environments.

```js
var d3 = require("d3");
```

--------------------------------

### Export and Save Data from MSA.js (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Provides methods for exporting the alignment data, selected sequences, annotations, or the viewer as an image file. Also includes functions for sharing the alignment via a public link or opening it in Jalview.

```JavaScript
m.utils.export.saveAsFile(m, "all.fasta") // export seqs
m.utils.export.saveSelection(m, "selection.fasta")
m.utils.export.saveAnnots(m, "features.gff3")
m.utils.export.saveAsImg(m,"biojs-msa.png")

// share the seqs with the public = get a public link
m.utils.export.shareLink(m, function(link){
	window.open(link, '_blank')
})

// share via jalview
var url =  m.g.config.get('url')
if url.indexOf("localhost") || url === "dragimport"
    m.utils.export.publishWeb(m, function(link){
    	m.utils.export.openInJalview(link, m.g.colorscheme.get("scheme"))
    });
}else{
    m.utils.export.openInJalview(url, m.g.colorscheme.get("scheme"))
}
```

--------------------------------

### Using D3 Easing with Parameters in 3.x

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Demonstrates how to create an easing function with parameters using the d3.ease method in D3 version 3.x, passing the easing type string and parameter value as arguments.

```JavaScript
var e = d3.ease("elastic-out-in", 1.2);
```

--------------------------------

### Recommended Interval with D3 Transition (D3 4.0) - JavaScript

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Shows the recommended way to schedule recurring D3 transitions in D3 4.0 using `d3.interval`. This method avoids the issues encountered with `setInterval` in D3 3.x by freezing time when the page is backgrounded, preventing the accumulation of queued transitions.

```javascript
d3.interval(function() {
  d3.selectAll("div").transition().call(someAnimation); // GOOD
}, 1000);
```

--------------------------------

### Using D3 Easing with Named Parameters in 4.0

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Shows the equivalent way to create a parameterizable elastic easing function in D3 version 4.0, utilizing the new named parameter approach via chained methods like d3.easeElastic.amplitude.

```JavaScript
var e = d3.easeElastic.amplitude(1.2);
```

--------------------------------

### D3 3.x General Update Pattern (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Shows the standard D3 v3 pattern for handling data joins, where the enter().append() operation implicitly merges new elements into the update selection. Includes update, exit, and enter phases.

```JavaScript
var circle = svg.selectAll("circle").data(data) // UPDATE
    .style("fill", "blue");

circle.exit().remove(); // EXIT

circle.enter().append("circle") // ENTER; modifies UPDATE! 🌶
    .style("fill", "green");

circle // ENTER + UPDATE
    .style("stroke", "black");
```

--------------------------------

### Add Upstream Remote for Git Fork (Shell)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/CONTRIBUTING-old.md

Configures a new remote named 'upstream' for a local Git repository fork, pointing to the original repository URL. This is used to synchronize the fork with the main project.

```Shell
git remote add upstream https://github.com/BV-BRC/bvbrc_website.git
```

--------------------------------

### D3v4 Point Scale Equivalent to v3 rangePoints

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Shows the equivalent D3v4 syntax for creating a point scale, which replaces the D3v3 ordinal scale with .rangePoints(). It uses the new d3.scalePoint() constructor.

```JavaScript
var x = d3.scalePoint()
    .domain(["a", "b", "c"])
    .range([0, width]);
```

--------------------------------

### Defining MSA - Sequence Model (JSON)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Defines the structure of a sequence object used within the MSA library, including properties for name, ID, sequence string, height, and reference status.

```JSON
{
  name: "",
  id: "",
  seq: "",
  height: 1,
  ref: false // reference: the sequence used in BLAST or the consensus seq
}
```

--------------------------------

### D3 4.0 General Update Pattern (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Illustrates the D3 v4 pattern for data joins, highlighting the use of the .merge() method to explicitly combine the enter and update selections after appending new elements. This replaces the implicit merge behavior of v3.

```JavaScript
var circle = svg.selectAll("circle").data(data) // UPDATE
    .style("fill", "blue");

circle.exit().remove(); // EXIT

circle.enter().append("circle") // ENTER
    .style("fill", "green")
  .merge(circle) // ENTER + UPDATE
    .style("stroke", "black");
```

--------------------------------

### Creating Time Parser (D3 v4) - JavaScript

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Shows the modern way to create a time parser function in D3 version 4 using the `d3.timeParse` constructor. This replaces the older `d3.time.format(...).parse` method.

```javascript
var parseTime = d3.timeParse("%c");
```

--------------------------------

### Add Features from GFF Data in MSA.js (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Fetches GFF3 and GFF_jalview data using XHR, parses it using biojs-io-gff, and adds the extracted features to the sequence collection of the msa instance. Requires msa, xhr, and biojs-io-gff libraries.

```JavaScript
var msa = require("msa");
var xhr = require("xhr");
var gffParser = require("biojs-io-gff");
var m = msa({el: rootDiv, importURL: "https://raw.githubusercontent.com/wilzbach/msa/master/test/dummy/samples/p53.clustalo.clustal");

// add features
xhr("./data/fer1.gff3", function(err, request, body) {
  var features = gffParser.parseSeqs(body);
  m.seqs.addFeatures(features);
});

// or even more
xhr("./data/fer1.gff_jalview", function(err, request, body) {
  var features = gffParser.parseSeqs(body);
  m.seqs.addFeatures(features);
});
```

--------------------------------

### Styling and Rendering D3 v3 Axis

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Demonstrates the required CSS styling for D3 v3 axes to render correctly and the JavaScript code using `d3.svg.axis` and `.orient("bottom")` to attach the axis to an element. This approach required explicit styling.

```HTML
<style>

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis text {
  font: 10px sans-serif;
}

</style>
<script>

d3.select(".axis")
    .call(d3.svg.axis()
        .scale(x)
        .orient("bottom"));

</script>
```

--------------------------------

### Dispatching Event (D3 3.x) - JavaScript

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Demonstrates the D3 3.x method for dispatching a specific event type ('foo') using a direct property access on the dispatcher object, followed by .call().

```JavaScript
dispatcher.foo.call(that, "Hello, Foo!");
```

--------------------------------

### Replacing d3.rebind with Custom Wrapper (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Demonstrates how to replace the removed d3.rebind method by implementing a custom wrapper function around a getter-setter method, such as dispatch.on, checking the return value to maintain chaining.

```javascript
component.on = function() {
  var value = dispatch.on.apply(dispatch, arguments);
  return value === dispatch ? component : value;
};
```

--------------------------------

### Creating a D3 Set with Accessor Function (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Demonstrates how to use the d3.set constructor with an array and an accessor function. The accessor function is used to extract a specific property (like 'site') from each object in the array, creating a set of unique values for that property.

```javascript
var yields = [
  {yield: 22.13333, variety: "Manchuria",        year: 1932, site: "Grand Rapids"},
  {yield: 26.76667, variety: "Peatland",         year: 1932, site: "Grand Rapids"},
  {yield: 28.10000, variety: "No. 462",          year: 1931, site: "Duluth"},
  {yield: 38.50000, variety: "Svansota",         year: 1932, site: "Waseca"},
  {yield: 40.46667, variety: "Svansota",         year: 1931, site: "Crookston"},
  {yield: 36.03333, variety: "Peatland",         year: 1932, site: "Waseca"},
  {yield: 34.46667, variety: "Wisconsin No. 38", year: 1931, site: "Grand Rapids"}
];

var sites = d3.set(yields, function(d) { return d.site; }); // Grand Rapids, Duluth, Waseca, Crookston
```

--------------------------------

### Registering Multiple Event Listeners (D3 4.0) - JavaScript

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Illustrates how the D3 4.0 dispatch.on method allows registering a single listener function for multiple event types ('foo' and 'bar') by providing a space-separated string of typenames.

```JavaScript
dispatcher.on("foo bar", function(message) {
  console.log(message);
});
```

--------------------------------

### Jump to Specific Column in MSA.js (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/msa/README.md

Sets the left offset of the zoomer component to a specific column index, effectively making the viewer jump to that position in the alignment. Uses the zoomer instance (`m.g.zoomer`).

```JavaScript
m.g.zoomer.setLeftOffset(10) // jumps to column 10
```

--------------------------------

### Import Specific D3 Module (ESM)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/README.md

Imports a specific symbol (scaleLinear) from a D3 microlibrary (d3-scale) using ES2015 module syntax. Requires a module bundler like Rollup or Webpack.

```js
import {scaleLinear} from "d3-scale";
```

--------------------------------

### D3v3 Ordinal Scale with rangePoints

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Illustrates the syntax used in D3v3 to create an ordinal scale that maps domain values to discrete points within a specified range using the .rangePoints() method.

```JavaScript
var x = d3.scale.ordinal()
    .domain(["a", "b", "c"])
    .rangePoints([0, width]);
```

--------------------------------

### Adding Multiple Event Listeners to D3 Selection (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Demonstrates how the selection.on method in D3 v4 accepts multiple whitespace-separated typenames, allowing the addition or removal of several event listeners simultaneously with a single call.

```javascript
selection.on("mousedown touchstart", function() {
  console.log(d3.event.type);
});
```

--------------------------------

### Creating Time Parser (D3 v3) - JavaScript

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Demonstrates how to create a time parser function using the deprecated `d3.time.format(...).parse` method in D3 version 3. This method is replaced by `d3.timeParse` in D3 v4.

```javascript
var parseTime = d3.time.format("%c").parse;
```

--------------------------------

### Implementing a Constant Function Helper (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Provides a helper function `constant` that takes a value `x` and returns a new function that, when called, always returns `x`. This pattern replaces the removed d3.functor method for promoting constant values to functions.

```javascript
function constant(x) {
  return function() {
    return x;
  };
}
```

--------------------------------

### D3v3 Ordinal Scale with rangeBands

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Illustrates the syntax used in D3v3 to create an ordinal scale that maps domain values to discrete bands within a specified range using the .rangeBands() method.

```JavaScript
var x = d3.scale.ordinal()
    .domain(["a", "b", "c"])
    .rangeBands([0, width]);
```

--------------------------------

### D3v4 Band Scale Equivalent to v3 rangeBands

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Shows the equivalent D3v4 syntax for creating a band scale, which replaces the D3v3 ordinal scale with .rangeBands(). It uses the new d3.scaleBand() constructor.

```JavaScript
var x = d3.scaleBand()
    .domain(["a", "b", "c"])
    .range([0, width]);
```

--------------------------------

### Render CanvasPathMethods Drawing to SVG using d3.path - JavaScript

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Demonstrates how to use the d3.path serializer as a context object for a function written using CanvasPathMethods. The drawing commands are captured by d3.path and then serialized into an SVG path data string ('d' attribute) for rendering in an SVG element.

```JavaScript
var context = d3.path();
drawCircle(context, 40);
pathElement.setAttribute("d", context.toString());
```

--------------------------------

### Chaining D3 Transitions with Relative Delay (JavaScript)

Source: https://github.com/bv-brc/bv-brc-web/blob/master/public/js/d3.v5/CHANGES.md

Demonstrates chaining multiple transitions on the same selection (.apple). The delay(1000) on the third transition is relative to the completion of the previous transition (the one changing fill to red), allowing for interstitial pauses in the chain.

```JavaScript
d3.selectAll(".apple")
  .transition() // First fade to green.
    .style("fill", "green")
  .transition() // Then red.
    .style("fill", "red")
  .transition() // Wait one second. Then brown, and remove.
    .delay(1000)
    .style("fill", "brown")
    .remove();
```