Skip to main content
SimilarExport ZIP
100%

Zoomable Volcano Plot with Tooltips in D3 v4

✓ Published1🌍 Public
Lluavabo
Last edited May 9, 2020
Created on May 9, 2020
Forked from Untitled

This D3 v4 zoomable volcano plot visualizes gene expression data from a TSV file, plotting log2 fold-change against -log10 false discovery rate. Users can pan and zoom by dragging within the SVG chart, with a reset button to restore the original view. The chart encodes significance with colored dots: red for significant fold changes, blue for down-regulated genes, and gray for others. Hovering over a dot reveals a tooltip displaying gene-specific information. The implementation uses `d3.scaleLinear` for the x-axis, `d3.scaleLog` for the y-axis, and a custom `d3.zoom` function to handle interactive navigation.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Zoomable Volcano Plot with Tooltips in D3 v4

This zoomable volcano plot visualizes differential gene expression from a tab-separated data file, plotting log2 fold-change on the x-axis against -log10 q-values on the y-axis. Gene names appear in tooltips on hover, and points are colored by significance and fold-change thresholds. Built with D3 v4, it uses d3.scaleLinear and d3.scaleLog for axes, d3.zoom() for panning and zooming via brush, and a clip path to constrain rendering. A reset button restores the original view. Data comes from a .diff file parsed with d3.tsv.

Lluavabo
96% match
Loading thumbnail…

D3 Zoom

This example demonstrates interactive zooming and panning on a scatterplot of 100 randomly positioned points. Users can scroll to zoom in and out within a scale extent of 0.5x to 4x, or click and drag to pan across the full-window SVG canvas. The visualization uses d3.zoom to attach zoom behavior to the root SVG element and applies the transform directly to that element’s `transform` attribute during the zoom event. Data is generated randomly with the `makeData` utility, and circles are bound and updated using D3’s data join pattern.

KKhanin Sisaengsuwanchai
71% match
Loading thumbnail…

Volcano

This visualization animates contour lines of volcano elevation data, smoothly interpolating between threshold boundaries to create a flowing, morphing effect over a geographic projection. The contours are generated using `d3.contours` from a grid of elevation values in `volcano.json`, projected with `d3.geoNaturalEarth1` and rendered as SVG paths via `d3.geoPath`. A sequential plasma color scale encodes elevation values, while an infinite loop transitions path shapes and fills every 200 milliseconds using `d3.transition`. The animation cycles through paired thresholds, creating continuous, fluid distortions of the terrain.

Vvivianaaai@qq.com
71% match
Loading thumbnail…

Zoomable #4

This interactive scatter plot visualizes the Iris dataset, encoding multiple quantitative attributes via dropdown menus that switch the X and Y axes. D3 v6 scales (scaleLinear and scalePoint) map values to positions, while categorical variables use point scales. The reusable chart pattern uses selection.join with transitions, animating circles and axes over 1 second when data mappings change. SVG rendering displays semi-transparent circles that grow on entry, with axes drawn using d3.axisLeft and d3.axisBottom.

Aamnicpo
71% match
Loading thumbnail…

D3 Zoom

A D3 zoom interface demonstrates interactive panning and scaling within an SVG coordinate system. A single green circle, positioned through linear scales, responds to mouse wheel and drag gestures that trigger the `d3.zoom` behavior. The example simultaneously updates axis tick marks via `transform.rescaleX` and `rescaleY`, while displaying the current translation values and zoom multiplier in separate HTML divs. The visualization renders with SVG elements, using `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear` to maintain spatial mapping during the zoom transform.

WWRCIECH
70% match
Loading thumbnail…

Contour Plot

A contour plot visualizes the volcano dataset from R, showing elevation values through filled isolines. The map uses a sequential color scale with a custom terrain interpolation, transitioning from green to yellow to white across the elevation range. Implemented with d3-contour and rendered as SVG paths, the code applies d3.geoPath with a geoIdentity projection to scale the contours, while d3.hsv and d3.interpolateHsvLong define the color transitions for the 5-unit threshold intervals.

Mmbostock
70% match
Loading thumbnail…

Pan & Zoom Axes

This example demonstrates a zoomable scatterplot where panning and zooming are controlled by the d3-zoom library. The visualization shows a colorful gradient rectangle as the data view, with axes that rescale dynamically through `transform.rescaleX` and `transform.rescaleY`. Users can drag to pan and scroll to zoom, with a button to reset the view via `d3.zoomIdentity`. The SVG rendering uses d3-scaleLinear for axes and a text gradient inspired by Nadieh Bremer.

Mmbostock
70% match
Loading thumbnail…

Zoom + Pan

A D3.js line chart with grid-like axes supports interactive panning and zooming, controlled by dragging and mouse-wheel gestures. The view resets via a button, triggering a smooth animated transition back to the default domain using `d3.behavior.zoom`, `d3.scale.linear`, and `d3.transition().tween`. The SVG rendering showcases the axis updates, while the button click remaps the scales programmatically and rebinds them to the zoom behavior.

FFrissAnalytics
69% match