Skip to main content
SimilarExport ZIP
100%

Zoomable Volcano Plot with Tooltips in D3 v4

✓ Published0🌍 Public
Lluavabo
Last edited May 9, 2020
Created on May 9, 2020

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.

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 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.

Lluavabo
96% 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…

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…

Fork of Volcano

This interactive visualization animates contour lines of the volcano dataset, showing a smooth morphing effect as the contour thresholds transition between successive intervals. The display uses a plasma color scale to differentiate elevation bands, with white strokes delineating each path. The code constructs GeoJSON MultiPolygons from the gridded `volcano.json` data using `d3.contours` and projects them with `d3.geoNaturalEarth1` and `d3.geoPath`. A continuous loop drives a `transition` of 2000ms duration, interpolating threshold values and updating both the path shapes and fill colors to create a perpetual pulsing animation.

DDonald Bagwell
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…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes daily metrics from a CSV file, letting users map any numeric column to the X, Y, and size channels and a categorical column to color. Built with D3 v7, the visualization uses `d3.zoom` for pan-and-zoom with scale extent bounds, `d3.scaleLinear` and `d3.scaleSqrt` for axes and point sizing, and `d3.scaleOrdinal` with the `schemeSet2` palette for coloring. Hovering a point triggers a tooltip with the row’s values, while the axis labels update dynamically based on selected column names. The chart resets to its original view when the user clicks the "Reset Zoom" button.

Mmaddulanagasanjana@gmail.com
70% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive zoomable sunburst displays hierarchical data from a JSON file, showing nested categories and values. The visualization updates its arcs and labels with smooth, 750-millisecond transitions, allowing users to click any arc to zoom in and focus on a sub-branch. Built with D3 v5, it uses the `d3.partition` layout, `d3.arc` for geometry, and `d3.scaleOrdinal` with `d3.interpolateRainbow` for color coding. The code employs `transition.attrTween` for animated path and label updates, with SVG rendering and hover tooltips showing the full path and value.

MMarc-André Barbeau
69% 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
69% match