Skip to main content
SimilarExport ZIP
100%

D3 scales() scaleOrdinal() in action

✓ Published1🌍 Public
SSubhendu Karmakar
Last edited Dec 27, 2023
Created on Dec 27, 2023

This example displays the twelve month abbreviations in a horizontal row across an SVG canvas, demonstrating how D3 scales map data values to visual properties. Using the D3 v7 library, it applies a linear scale (`d3.scaleLinear`) to position each text label along the x-axis, while an ordinal scale (`d3.scaleOrdinal`) assigns a fill color of black to the first month and grey to the remaining ones. The labels are rendered as SVG text elements using D3's selection and join methods.

AI-generated description

D3 Scales - scaleTime()

MIT Licensed

Similar vizzes

Loading thumbnail…

scaleOrdinal() other variations

This example demonstrates the use of `d3.scaleOrdinal()` to map categorical month names to colors from the `d3.schemePaired` palette, with each month rendered as an `SVG` text element. The x-positions are determined by a `d3.scaleLinear()` scale mapping indices 0–11 to a 600-pixel range. The visualization shows how ordinal scales assign discrete colors to categories, while the linear scale controls spatial layout. The code uses D3's selection and `.join()` operation to create the text elements within the SVG wrapper. The data is a hardcoded array of month abbreviations.

SSubhendu Karmakar
87% 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
82% match
Loading thumbnail…

D3 Scale Function PRactice

This example demonstrates D3 scale functions by mapping a small array of numeric values to positions along an SVG axis. It renders circles and labels on a horizontal line using a linear scale, then displays the corresponding axis with `d3.axisBottom`. The code imports a custom `getScale` utility from `utils.js` that switches between D3’s scale types—including `scaleLinear`, `scaleSqrt`, `scaleLog`, and others—although only the linear scale is actively applied. The visualization uses SVG rendering with a fixed 960×500 canvas and D3 v7 via `bundle.js`.

SSubhendu Karmakar
80% 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
80% match
Loading thumbnail…

D3 scales() scaleQuantile() in action

This example demonstrates how D3’s `scaleQuantile()` maps a numeric dataset to a categorical color scale, while `scaleLinear()` positions the data points horizontally. Fifteen circles are rendered in an SVG, each colored lightblue, orange, or lightgreen based on its quantile bucket. The visualization uses `d3.scaleLinear()` and `d3.scaleQuantile()` to transform the data array, and `d3.select("#wrapper").join()` to bind values to circle attributes. The source data is a hardcoded array of numbers, and the rendering is SVG-based.

SSubhendu Karmakar
78% 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
78% match
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…

Fork of D3 Scale - ScaleTime

This example demonstrates how D3’s `scaleTime()` maps dates to x-coordinates along a linear time axis. It plots four circles at quarterly intervals between January 2016 and January 2017, positioning them at y=200 while labeling each with its full date string. The visualization uses an SVG canvas, with data bound via D3’s selection join (`selectAll().data().join()`). The scale’s domain spans one year, and its range runs from x=60 to x=900, making temporal spacing explicit. The code imports `scaleTime` from D3’s scales module.

SSubhendu Karmakar
77% match