Log scale

100%

✓ Published0🌍 Public

Last edited Feb 23, 2023

Created on Feb 23, 2023

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

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

89% match

Loading thumbnail…

Log Axis

This example demonstrates a log-scale axis using a hard-coded domain from 0.0124123 to 1230.4, rendering tick labels with the `",.1s"` format. The visualization uses d3.v3’s `d3.scale.log` to create the logarithmic scale and `d3.svg.axis` to draw the axis with 20 ticks. The SVG output is positioned within a larger canvas using margins, and styled with CSS for font and stroke. The code does not include a data source, as it focuses solely on the axis component.

Mmbostock

78% match

Loading thumbnail…

Natural Log Scale

A natural-logarithmic y-axis displays a polynomial curve from x=0 to 100, with tick labels formatted as "e⁰" through "e⁹" using Unicode superscripts. The example uses d3.v3 with `d3.scale.log` and `d3.svg.axis`, applying a custom `tickFormat` that converts log values to superscript exponents. The line is drawn with `d3.svg.line`, while the SVG output includes styled axis text and a steelblue path. The data series is generated procedurally as `[x, x²+x+1]` for 100 points.

Mmbostock

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

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

76% match

Loading thumbnail…

logscale

This scatter plot displays San Francisco temperature readings over a week, using a logarithmic y-axis (d3.scaleLog) to compress the range of temperature values. React components render the SVG, with d3.scaleTime mapping timestamps to the x-axis and d3.extent computing the domain. The visualization includes custom axes, radial gradient eyes, and a face-like background circle, while data loads from a CSV via d3.csv.

JJonas Carvalho

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

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

74% match