Skip to main content
100%

Monoisotopic mass table

✓ Published0🌍 Public
TTipTopCoder
Last edited May 12, 2016
Created on May 12, 2016

A static table maps each of the 20 standard amino acid one-letter codes to its monoisotopic mass in daltons, with values drawn from a hardcoded Python dictionary. The display lists the codes alphabetically and pairs each with the corresponding numeric mass, making the data directly readable. The example uses Matplotlib to render the text-based table as a figure, with no interactive elements. The source file defines the mass values explicitly rather than reading from an external dataset, and the visualization simply presents the dictionary contents in a clear, tabular layout.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist f0d047bd1b55bcd4f98416acd33ce078

This example visualizes a DNA sequence by translating each codon into its corresponding amino acid and displaying the resulting protein sequence. The code stores the nucleotide string in an array of three-base codons, then uses a switch statement to map each codon to its amino acid abbreviation, including ambiguous codes like Asx and Glx. The visualization relies on standard JavaScript array methods and string manipulation rather than external libraries, processing the sequence data directly in the browser to reveal the encoded amino acid chain.

WWanagram
48% match
Loading thumbnail…

Periodic Table Scatter Plot

This visualization uses D3.js v4 to render a scatter plot of the periodic table, with each element positioned by atomic number and atomic mass. The SVG-based chart includes a color legend built with d3-legend, coloring each element by its group block (e.g., nonmetal, alkali metal, noble gas) and encoding atomic mass on the y-axis. The dataset is sourced from the UCI Machine Learning Repository and includes properties like electronegativity and atomic radius, though the example focuses on the relationship between atomic number and atomic mass. The visualization is part of a D3.js video course and is available under an MIT license.

Aapratt2003
48% match
Loading thumbnail…

Multiple sequence alignment

A multiple sequence alignment heatmap displays amino acid residues across aligned protein sequences, with rows representing individual chains by PDB code and columns indicating alignment positions. Each cell is colored according to its amino acid type using a custom d3.scaleOrdinal palette. The visualization uses d3.csv to load data, d3.scaleBand for axes, and d3-tip to show tooltips detailing the residue number and chain information on hover. Rendered as SVG rectangles with mouseover interactions, the chart includes a title and axis labels.

BBoris Gomaz
46% match
Loading thumbnail…

Number of intermolecular contacts

This interactive histogram displays the number of intermolecular contacts for each amino acid position in a protein, using data from a CSV file containing contact details. The chart uses fixed bin widths along the x-axis, with bar heights representing contact counts. Hovering over a bar reveals a tooltip with the exact contact number, amino acid position, and a list of amino acids involved. The visualization is built with D3 v6, using `d3.histogram` to bin the data, `d3.scaleLinear` for axes, and SVG rectangles rendered via `join` with mouse event handlers for interaction.

BBoris Gomaz
46% match
Loading thumbnail…

Amino Chain

Amino Chain displays gene sequences as colored rectangular blocks, with each block representing a translated amino acid derived from DNA codons in the loaded JSON data. The visualization maps start and stop positions from the `genes.json.txt` file onto horizontal bars, using D3.js and jQuery to fetch and parse the data. D3 selections append SVG rectangles to the page, while a switch statement converts nucleotide triplets into amino acid names for the block styling.

WWanagram
46% match
Loading thumbnail…

Periodic Table Scatter Plot

This visualization plots elements from the periodic table as a scatter plot, with atomic number on the x-axis and atomic mass on the y-axis. Each element is represented by a circle colored according to its CPK hex color value, with a legend explaining the color mapping. The code uses D3 v4 with SVG rendering, employing `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.legendColor` from the d3-legend plugin to display the color scale. Data is loaded from a CSV file via `d3.csv`.

Aapratt2003
46% match
Loading thumbnail…

Gist 45db9d716671d0e53ccdd33370f72d69

This example displays a reference table for ANSI escape sequences, organizing text attributes, foreground colors, and background colors into three separate sections. The data originates from a Markdown file that lists each escape code alongside its corresponding visual effect, such as bold, underline, or specific color values like Light Cyan. The rendering relies on standard HTML tables, with no JavaScript libraries or visualization APIs involved, presenting the information as static, readable documentation rather than an interactive graphic.

Aamazingandyyy
46% match
Loading thumbnail…

Periodic Table Scatter Plot

This visualization presents a periodic table as an interactive scatter plot, with each chemical element positioned by atomic number along the x-axis and atomic mass along the y-axis. Element symbols are plotted as text labels colored by their CPK hex color, providing an immediate visual grouping of element categories. The chart uses D3 v4 with SVG rendering to place elements, and supports interactive features such as mouseover tooltips that display detailed properties like electronegativity, atomic radius, melting point, and year discovered. This unconventional layout lets users explore periodic trends and compare elemental characteristics through spatial relationships rather than the traditional grid structure.

Aapratt2003
46% match