Skip to main content
SimilarExport ZIP
100%

D3 Scale - ScaleLog

✓ Published1🌍 Public
SSubhendu Karmakar
Last edited Dec 26, 2023
Created on Dec 26, 2023
Forked from D3 Scale - Sqrt

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.

AI-generated description

D3 Scales

MIT Licensed

Similar vizzes

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
89% 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
84% 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
84% 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
82% match
Loading thumbnail…

D3 Example

A D3 example demonstrates a linear scale mapping a data domain of 1 to 5 into a pixel range of 0 to 200, driving the x-position of text elements in an SVG. Using `d3.select` and `scale.attr`, the code binds arrays of numbers to text nodes, updating their position and fill color on a five-second timer. The `enter`, `update`, and `exit` selections manage the text lifecycle, showing red, blue, green, cyan, and magenta labels as the dataset changes. This illustrates data joins with `d3.scale.linear` and `svg.append`.

RRasinj
81% 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
81% 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
79% 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
78% match