D3 4.0 Sequential Scales Explorer

100%

D3 4.0 Sequential Scales Explorer

✓ Published0🌍 Public

Last edited Jun 28, 2016

Created on Jun 19, 2016

This interactive heatmap visualizes a 2D histogram of date and value data, with cell colors encoding counts. A dropdown menu and auto-cycling animation let users switch among sequential color interpolators from D3 4.0’s `d3.scaleSequential` and the `d3-scale-chromatic` library, including Viridis, Inferno, and ColorBrewer schemes. Built with D3 4.0, it renders SVG rects and axes, loading data from a CSV file.

AI-generated description

An upgrade of <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3202354'>Heatmap (2D Histogram, CSV)</a> to D3 4.0, with the addition of a select menu for D3 Sequential Scale Interpolators. Inspired by d3-scale issue: sequential.interpolate? #67. Draws the idea of trying out color schemes from colorbrewer2.org.

Also includes scales from d3-scale-chromatic.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/5cfe9f49387cc64996cbaa9ede87d861'>Heatmap (2D Histogram, CSV) 4.0</a>

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=2123678&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

D3 4.0 Sequential Scales Explorer

This interactive D3 v4 heatmap displays a two-dimensional histogram of date and value buckets, with tile colors encoding count data. Users select from a menu of sequential color interpolators, including Viridis, Inferno, and colorbrewer schemes, to recolor the visualization. The chart updates dynamically using `d3.scaleSequential`, and an animation cycles through interpolators every second until manual selection. The SVG rendering includes axes, a color legend, and labels for the count, date, and value dimensions.

TThanaporn-sk

94% match

Loading thumbnail…

4.0 Color Scales - Sequential

This example showcases 27 sequential color scales, comparing those built into D3 v4 with those from the d3-scale-chromatic library. The visualization renders a full-width set of thin vertical bars, initially colored using the Inferno scale, with each bar’s fill mapped to its x-position via a `d3.scaleSequential` interpolator. Clicking a button above the chart triggers a transition that smoothly recolors the bars using the selected interpolator, such as Viridis, Blues, or YlGnBu. The interface uses SVG rectangles and D3’s transition API for animated updates, with the code leveraging `d3.range` and data-driven styling.

TThanaporn-sk

85% match

Loading thumbnail…

D3 Scale - ScaleSequential - Different Interpolators

This example demonstrates eight different D3 color interpolators applied to sequential scales, each rendered as a horizontal band of colored rectangles. The visualization shows how the viridis, inferno, magma, plasma, warm, cool, rainbow, and cubehelixDefault colormaps transition across a 0–100 domain, with each interpolator labeled above its corresponding row. The code uses `d3.scaleSequential()` with each interpolator to map data values to fill colors, while `d3.scaleLinear()` positions the rectangles along the x-axis. The SVG output is generated from range data via `d3.range()` and rendered with D3's data join pattern.

SSubhendu Karmakar

81% match

Loading thumbnail…

Untitled

This interactive heatmap displays hourly activity counts for each date, using a color gradient to show intensity variations. The visualization renders a grid of tiles positioned by date and hour bucket, with color encoding count values via a sequential scale. It cycles through multiple color interpolators automatically, including Viridis, Inferno, and sequential schemes from d3-scale-chromatic, while allowing manual selection. The code uses d3.csv for data loading, d3.scaleTime, d3.scaleLinear, and d3.scaleSequential to map values, with SVG rectangles and d3.axisBottom/d3.axisLeft for the chart’s axes.

Mmkt-ds

79% match

Loading thumbnail…

A6 - Color Scales in D3

This example demonstrates four distinct D3.js visualizations, each employing a different color scale type: a bar chart using a sequential color scale, a diverging bar chart with a diverging scale, a scatterplot with a qualitative scale, and a line chart. The code uses D3’s `scaleSequential`, `scaleDiverging`, and `scaleOrdinal` APIs to map data values to colors. Each chart is rendered using SVG elements created via D3’s `select` and `append` methods. The visualizations are embedded as standalone pages, with the bar chart and diverging chart showing categorical comparisons, while the scatterplot and line chart reveal patterns across continuous variables.

DDuc Pham

77% match

Loading thumbnail…

D3 color experiments

This example showcases color scales by displaying a series of color swatches as text labels, each filled with a distinct color derived from a linear scale spanning green, purple, and teal. It also renders the minimum temperature from a San Francisco weekly temperature CSV dataset. Built with React and D3 v7, the visualization uses `d3.scaleLinear` for color mapping, `d3.csv` for data loading, and SVG text elements to render the colors against a black background.

JJames Rhodes

77% match

Loading thumbnail…

Sequential scale

This example visualizes a color scale applied to a series of circles along a horizontal axis, showing how a sequential color interpolator maps numeric values to colors. The circles are positioned using a linear scale, while their fill colors are determined by `d3.scaleSequential` with the `d3.interpolatePlasma` interpolator. The code uses D3 v4 to bind an array of data values to SVG circles, rendering them within an SVG container. The visualization demonstrates the smooth gradient transitions of the plasma color scheme across the range of input values.

Pphlppchrtn

77% match

Loading thumbnail…

Heat Map

This heat map visualizes a sequential color scale transitioning from purple to orange across a continuous spectrum. The view fills the browser window with 100 vertical rectangular bands, each colored via the `d3.scaleSequential` interpolator. The code uses `d3.interpolate` to blend the two colors, `d3.scaleLinear` for positioning, and SVG `<rect>` elements rendered with D3 v7. The example demonstrates how to construct a full-viewport gradient bar for quantitative data mapping.

KKhanAzmat

77% match