logarithmic colour scale

100%

logarithmic colour scale

✓ Published0🌍 Public

Last edited Dec 17, 2016

Created on Dec 17, 2016

This example shows how a logarithmic color scale maps changing data values to colors, compared to a linear mapping. It renders a horizontal strip of rectangles, each colored according to its position on a log scale, with an axis below using `d3.axisBottom` for reference. Using D3 v4 with SVG, the code defines a log scale with `d3.scaleLog()`, inverts data values to create color stops, and assigns fills to the rectangles via the custom `logColour_scale`.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Scale - ScaleLog

This example demonstrates how a logarithmic scale maps data values across an SVG canvas. It places six text labels at positions calculated by a `d3.scaleLog()` function, with a domain spanning from 10 to 100,000 and a range of 0 to 700 pixels. The visualization highlights how log scales compress large numerical ranges, showing labels for 0, 10, 100, 1,000, 10,000, and 100,000 at increasing intervals. The code uses D3 v7’s `scaleLog`, `scaleLinear`, and `scaleSqrt` definitions, rendering the output as SVG text elements.

SSubhendu Karmakar

78% match

Loading thumbnail…

Scales

This example demonstrates three different D3 scales rendered as horizontal axes: an ordinal scale with six categorical bands, a single-band ordinal scale, and a log scale spanning 1 to 100. The code uses `d3.scale.ordinal().rangeRoundBands()` and `d3.scale.log()` alongside `d3.svg.axis()` to position tick marks, while text labels such as “top,” “bottom,” and “middle” illustrate the offset values returned by `rangeBand()` and the scale function. The SVG canvas is 500 by 500 pixels, with axes translated to different vertical positions.

RRobinL

76% match

Loading thumbnail…

HTML Starter

This example demonstrates a color gradient mapped onto a series of rectangles using a logarithmic scale. It uses D3.js to create an SVG visualization, with `d3.scaleLog` and `d3.scaleLinear` defining the value-to-position mapping, while a custom log-based color scale assigns a range of three colors across the domain. The visualization also includes a bottom axis with `d3.axisBottom` and tick formatting, all rendered within an HTML page.

Jjeronimoek

75% match

Loading thumbnail…

print_template - colour scale

This example demonstrates the non-linear nature of d3’s linear color scale by mapping a custom domain [0, 0.25, 0.5, 0.75, 1] to a range of five distinct colors, from white through green, yellow, and red to black. The code prints the color values for a set of input numbers, then normalizes logarithmic values from 0.001 to 1 and prints those colors as well, revealing how the scale compresses and expands color transitions unevenly. Using d3.scale.linear, d3.format, and d3.range, the visualization appends text labels to an SVG canvas via d3.select and svg.selectAll, with the author’s custom print() function collecting outputs for display.

RRobinL

75% match

Loading thumbnail…

Log scale

This example demonstrates a logarithmic scale by positioning text labels at exponentially increasing values (10, 100, 1000, 10000, 100000) along a horizontal axis. The labels are evenly spaced due to the log transformation, contrasting with linear spacing. The code uses D3.js’s `d3.scaleLog()` to map the domain to pixel coordinates, then appends SVG `<text>` elements via `d3.select` and `.append()`. The data is hardcoded in an array, and the rendering uses an SVG canvas within an HTML page.

RRSSBDAE

74% match

Loading thumbnail…

D3 Scale

This example demonstrates how D3 scales map input data to visual output, using a linear scale to position circles along the x-axis and a multi-domain color scale to assign fill colors. The circles represent values from -10 to 10, with colors transitioning from red through gray to blue. It renders as an SVG using d3.scaleLinear for both positioning and color interpolation, with data bound through d3.select and .join(). The code references D3 v7 scale types in utils.js, including scaleTime, scaleBand, and scaleOrdinal, though only linear scales are actively applied.

SSubhendu Karmakar

73% match

Loading thumbnail…

D3 Scale Functions

This example demonstrates how D3 scale functions map input data values to visual output positions. It plots a set of numeric data points as circles along a horizontal axis, with each value labeled above its corresponding circle. The code uses `d3.scaleLinear()` to map the domain (0–10) to a pixel range, and renders the result as SVG elements. An axis is added using `d3.axisBottom()`, and the utility function `getScale` supports multiple scale types, including `scaleSqrt`, `scaleLog`, and `scaleBand`, though only linear is actively applied here.

SSubhendu Karmakar

73% match

Loading thumbnail…

using of scale, scaleLinear(), scaleOrdinal()

This example demonstrates how D3 scaling functions map input domains to output ranges for both numeric and categorical values. A `scaleLinear()` maps values 0–3 to a pixel range of 0–300, logging transformed results to the console. A `scaleOrdinal()` assigns colors from an array to categorical domain values, and the code appends four div elements to the DOM, coloring each with a different color via D3 selections. The page is a minimal HTML document using d3.v5 and relies on CSS styling through inline `.style` calls.

Ssgzzhinde

73% match