scaleOrdinal() other variations

D3 scales() scaleOrdinal() in action

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.

87% match

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

76% match

D3 Fruits - scaleOrdinal

Three fruit categories—apple, lemon, and watermelon—are displayed as colored, sized circles that shift horizontally with animated transitions. Using `d3.scaleOrdinal`, the example maps each fruit domain to distinct size (`r`), fill color, and gap values that adjust the spacing between circles during the render. The SVG groups animate their `transform` position over one second via `transition().duration()`, while labels appear above each circle with matching offsets. The code imports from D3 v7 and relies on a custom render function to coordinate the ordinal scales and dynamic positioning.

YYoung Song

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.

Month Axis

A month axis displays a horizontal time scale spanning the year 2012, with a tick for each month. The code uses `d3.time.scale` to map a date domain to pixel coordinates, `d3.svg.axis` for the bottom-oriented axis, `d3.time.months` for tick spacing, and `d3.time.format` to render month abbreviations as labels. The SVG output places tick text to the right and below each mark.

Mmbostock

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.

Color and Size Legends

This example demonstrates how to create separate legends for ordinal color scales and quantitative size scales using D3 v5. A color legend maps fruit names to distinct colors with equally spaced circles, while a size legend displays circular markers whose radii scale proportionally to numeric values using `scaleSqrt`. Both legends are implemented as reusable functions via `selection.call()`, with the color legend using `scaleOrdinal` and the size legend using `scaleSqrt().ticks()` to generate tick values. The SVG rendering includes custom text and circle styling defined in external CSS.

PPaul Kumar

69% match

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.