Skip to main content
SimilarExport ZIP
100%

Number of intermolecular contacts

✓ Published0🌍 Public
BBoris Gomaz
Last edited Feb 28, 2023
Created on Feb 22, 2023

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.

AI-generated description

Stacked bar chart showing estimated religion breakdown.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3.js Circle with Dots and Names

This example visualizes protein contact data by arranging 233 dots in a circular layout around a central point, representing residues from a PDB structure. Each dot is positioned using trigonometric calculations with fixed angle increments, and amino acid names are labeled when the dot index matches the residue number from the JSON input. The visualization uses D3.js v4 with SVG elements, appending circles and text nodes via the `d3.json` callback, `.selectAll()`, and `.enter()` patterns. Data originates from a `data.json` file containing interaction pairs with residue identifiers and symmetry operators.

BBoris Gomaz
62% 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
60% match
Loading thumbnail…

Histogram

This interactive histogram visualizes the distribution of one numeric variable using data loaded from a CSV file. Built with D3 v7, it renders bars as SVG rectangles, with the x-axis scaled linearly and the y-axis representing bin counts. The chart updates responsively on window resize, recalculating the histogram with 40 thresholds to accommodate the new width. Data is fetched from the `data_to_viz` GitHub repository.

Aarjun-lab663
58% match
Loading thumbnail…

Untitled

This interactive histogram displays the distribution of a single numeric variable from a CSV dataset of prices. A slider dynamically adjusts the number of bins from 1 to 100, with smooth 1000ms transitions updating both the bar widths and the y-axis scale. The visualization uses d3.histogram to compute bin values, d3.scaleLinear for axes, and d3.axisBottom/axisLeft for rendering scales. Bars are drawn as SVG rectangles with a teal fill, while d3’s data join pattern handles entering and exiting elements during updates.

AAbhishek Kumar
57% match
Loading thumbnail…

Scatter Plot: Average Balance vs. Number of Contacts

This scatter plot shows the relationship between the number of contacts and the average account balance, with each point colored by marital status and tooltips revealing exact values. The visualization is rendered as an SVG using D3.js v5, with data loaded from a CSV file. The chart computes average balance per contact count using `d3.nest` and `d3.mean`, scales axes with `d3.scaleLinear`, and uses `d3-tip` for interactive hover details. A legend is generated via `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding.

Ssrikkanth05
57% match
Loading thumbnail…

Interactions

A horizontal bar chart displays weight data for five people, loaded from a local CSV file with d3.csv. Bars are colored blue by default; hovering turns a bar red, and clicking updates a details panel with the person’s name. A vertical red line follows the mouse position using d3.mouse on the SVG container. The chart uses d3.scaleLinear for bar widths, d3.scaleBand for positioning, and d3.axisLeft for the y-axis, with SVG rectangles and animated transitions for rendering.

DDasbach.EJ
56% match
Loading thumbnail…

Gist 6568151

A histogram displays a randomly generated Irwin–Hall distribution of 50 values, showing the count of scores binned into twenty uniform intervals. The chart uses D3’s histogram layout and linear scales to position bars, with axis ticks placed between bars to clarify bin boundaries. Bar counts are labeled above each rectangle, and mouseover events log the original data objects and associated names filtered from the source array. Rendered as SVG using d3.v2, the example demonstrates binning and interactive data binding.

11wheel
56% match
Loading thumbnail…

Untitled

This interactive histogram displays the distribution of a single numeric variable (price) from a CSV dataset loaded from GitHub. Users adjust the number of bins via a numeric input, triggering a smooth animated transition of the bars. The visualization uses D3.js v5 with `d3.histogram`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to compute bin counts and render SVG rectangles. The `transition().duration(1000)` API animates updates to the y-axis and bars, while enter/exit transitions add or remove rectangles as bin count changes.

AAbhishek Kumar
56% match