D3 Scale Functions

100%

D3 Scale Functions

✓ Published1🌍 Public

Last edited Dec 26, 2023

Created on Dec 26, 2023

Forked from Untitled

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.

AI-generated description

D3 Scales

D3 In Depth

MIT Licensed

Similar vizzes

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

93% 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

91% match

Loading thumbnail…

D3: Drawing Scale

This example demonstrates how D3’s linear and square-root scales translate raw data coordinates into pixel positions and circle radii. It plots an array of 11 `[x, y]` pairs as circles and red text labels on an SVG canvas. The code uses `d3.scaleLinear()` for both the x and y axes, and `d3.scaleSqrt()` for sizing the circles proportionally. The scales are configured with custom domains and output ranges, with padding applied to keep marks inside the 500×300 viewport. Data is rendered statically, with labels showing the original coordinate values.

MMarisa Tania

87% match

Loading thumbnail…

scale

This example demonstrates the foundational concept of D3 scales by computing and logging values from linear, square root, and time scales, then calculating the extent of a small dataset and applying a linear scale with a nice domain. It uses the d3 v7 library, importing scaleLinear, scaleSqrt, and scaleTime from d3, and renders to a blank SVG canvas. The code defines explicit domains and ranges to show how input values map to output pixel positions, with a dataset of five numeric values and an extent-based domain.

HHeet Bhatt

86% match

Loading thumbnail…

D3 Axes - Scale Types

This example demonstrates six D3 axis types rendered side-by-side in a single SVG, each labeled with its scale type. It shows how different scales—linear, sqrt, log, time, band, and point—map input domains to output ranges of 0 to 500, with axes generated using `d3.axisBottom()`. The code explicitly defines each scale, then reassigns the axis’s scale before calling it on separate `<g>` elements, all built with D3 v7.

SSubhendu Karmakar

85% 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

84% 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

83% match

Loading thumbnail…

Scale & Axes

This example demonstrates the fundamental role of scales and axes in D3 data visualization. A gray plotting area is framed by a linear x-axis and y-axis, both spanning a domain from 0 to 100. The code uses `d3.scaleLinear` to map data values to screen coordinates, with `axisLeft` and `axisBottom` from D3 to render the ticks and labels. Margins are explicitly calculated to position the axes and the inner chart area, while the axes module manages the axis generation and text labels.

SSubhendu Karmakar

82% match