Skip to main content
100%

Color in Data Visualization

✓ Published0🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Jul 24, 2025
Forked from Circles with D3

This gallery example visualizes five fundamental color-scale patterns—sequential, diverging, categorical, highlight, and alert—through a grid of annotated mini bar charts. Each pattern shows how color encodes quantitative or categorical data, using palettes like blues for sequential, diverging browns and greens, and gray tints with accent colors for highlighting. The D3 v7 code uses `scaleLinear` and `scaleBand` to compute bar heights, while custom wrapping logic measures text via `getComputedTextLength`. The layout is fixed with responsive container sizing, and the visualization is based on concepts from "The Big Book of Dashboards."

AI-generated description

A re-creation / reimagining of a classic graphic on color from "The Big Book of Dashboards" by Steve Wexler, Jeffrey Shaffer, and Andy Cotgreave.

Color Scale Patterns in Data Visualization

This infographic demonstrates the five basic color-scale patterns used in data visualization:

Color Scale Types

  1. Sequential - Color is ordered from low to high, typically encoding quantitative or ordinal data
  2. Diverging - Two sequential colors with a neutral midpoint, used for scales showing two different outcomes
  3. Categorical - Contrasting colors for individual comparisons, each representing a specific category
  4. Highlight - Color used to call attention to specific data points, used with gray tints
  5. Alert - Color used to get user attention, using attention-grabbing colors like red or orange

Each pattern is illustrated with a mini bar chart, color swatches, and descriptive text to demonstrate the appropriate use case and visual encoding.

MIT Licensed

Similar vizzes

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
81% match
Loading thumbnail…

D3 Colors

This example demonstrates how D3’s color utilities can define and manipulate colors, then apply them to a simple bar chart. It first creates a color value using d3.rgb, d3.hsl, d3.hcl, and d3.lab, and uses it to set the page’s background. The main visualization renders 20 vertical bars across the full window width, with each bar’s fill assigned from the built-in d3.scale.category20c color palette. The code relies on D3 v3’s SVG selection and data-join methods, mapping a d3.range dataset to rect elements.

WWilliamQLiu
80% match
Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the distribution of colors in a sample dataset, with each bar representing a color percentage and labeled with its value. The D3.js v5 example uses an SVG rendering approach with interactive hover effects that highlight the selected bar, display a red dashed threshold line, and show divergence percentages between the hovered color and others. Built with `d3.scaleBand` and `d3.scaleLinear` for axes, the chart includes grid lines, a title, and axis labels, with animations driven by `transition` for bar highlighting and opacity changes on mouse events.

GGogineni44
79% match
Loading thumbnail…

Diverging Color Scale

This diverging bar chart displays positive and negative values for seven categories using a diverging color scale. The visualization encodes value magnitude through bar height, while direction is shown by bars extending above or below a central zero axis, with the PiYG interpolator assigning distinct colors to positive and negative values. Built with D3 v6, the example uses `scaleDiverging`, `scaleBand`, and `scaleLinear` to position and color rectangles, alongside the d3-legend library to render a horizontal color legend. Data comes from a local CSV file containing category-value pairs.

KKwasi Acquaye
79% match
Loading thumbnail…

Bar Graph Vizualization

This bar chart visualizes the distribution of CSS levels across a dataset of colors, showing how many colors correspond to each specification level. The chart uses a vertical bar layout with hover effects that change bar color from steelblue to orange. Built with D3 v7, the visualization loads CSV data from a GitHub gist, aggregates counts with `d3.rollup`, and renders the chart as an SVG using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Axis labels and rotated x-axis tick text clarify the categorical and numeric values.

Ssdarsi2404@gmail.com
78% match
Loading thumbnail…

Bar Plot with different colors

This bar plot example uses D3 to render a small set of circles on a light green background, each with a distinct neon color and varying size based on the provided data. The chart emphasizes simplicity, showing how categorical or positional data can be mapped to visual properties like x, y, radius, and fill using D3’s data join. The code leverages `select` and `join` to bind the array of objects to circle elements, setting attributes directly. The visualization demonstrates a straightforward, color-coded scatterplot-style layout without axes or interactivity, focusing on raw data encoding.

SSubhendu Karmakar
77% match
Loading thumbnail…

colored bar chart

A colored bar chart displays a dataset of numeric values as vertical bars, with color mapping from green through orange to red via a `d3.scaleLinear` domain of 0 to 110. React state management allows the user to increment, filter (values ≤ 50), or randomly append data through buttons, triggering `useEffect` updates. The SVG is rendered using `scaleBand` for x-positioning, `scaleLinear` for y-scaling, and D3 v5 axes. Bars animate on transitions, and mouseenter events create tooltips with D3 text elements that fade in.

JJunyanL
77% match
Loading thumbnail…

A6 - Sequential Color Scale Bar Chart

This example visualizes average temperatures across cities using a horizontal bar chart with a sequential blue color scale. It shows how temperature values map to color intensity, with a legend on the right providing the quantitative scale. The visualization uses D3.js v6 with d3.scaleSequential and d3.interpolateBlues for the color encoding, along with d3.scaleLinear and d3.scaleBand for the axes. A linear gradient legend displays the temperature-to-color mapping, and the data comes from a CSV file hosted on GitHub Gist. The chart includes axis labels and a title, with the bars' color intensity reflecting the average temperature for each city.

RRiya Mathur
76% match