Log Axis

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on May 8, 2013

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.

AI-generated description

An example of the axis component with the log scale, here using an arbtirary hard-coded domain.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Log Axis with Zero

A log axis with zero uses a secondary ordinal scale to render the value 0 below the main logarithmic scale, which otherwise would place zero at negative infinity. The example shows a horizontal axis with major ticks from 1e-1 to 1e4, plus a separate zero tick offset slightly to the left. It uses d3.svg.axis with a d3.scale.log for the main axis and a d3.scale.ordinal for the zero position, drawing both as SVG groups. The discontinuity is visually encoded by separating the zero tick from the logarithmic scale’s continuous range.

Mmbostock

80% match

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

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…

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…

Extent Ticks

This example demonstrates how to display axis ticks at the extent of a scale, showing only the minimum and maximum values along the bottom of a chart. The visualization uses an identity scale to map the domain directly to pixel coordinates within a specified width. The code relies on d3.svg.axis with explicit tickValues set to the scale's domain, rendering the result as SVG elements. A simple margin-based layout positions the axis within a 960 by 500 pixel SVG canvas.

Mmbostock

77% match

Loading thumbnail…

Axis (with nice)

This example displays a horizontal axis with five numerical tick marks, positioned below a short line of data points. The axis is generated using D3.js version 4.2.2, specifically the `d3.axisBottom` function, which is applied to a linear scale created with `d3.scaleLinear`. The scale’s domain is derived from the minimum and maximum of the sample data array using `d3.extent`, and its range is set to 600 pixels. The axis is rendered as an SVG group element, transformed to sit at a specified vertical position within the 700×100 pixel canvas. The page itself is a minimal HTML document with embedded JavaScript and uses the D3 library loaded from a CDN.

Ppanmenghan

76% match

Loading thumbnail…

Superscript Format II

A log-scaled axis spans from 10⁻⁴ to 10⁴, with tick labels that display only the number 10 for each power of ten. The code uses d3.svg.axis for the axis, then post-selects tick text elements, filters for powers of ten, and appends a tspan for the superscript exponent. The exponent is computed from the tick value using Math.log and rendered with a smaller font size via CSS. This approach creates a clean, typographically precise axis label alternative to Unicode superscripts.

Mmbostock

76% match

Loading thumbnail…

Axis Styling

This example demonstrates how to customize the appearance of axes created with the d3-axis API in D3 v4, rendering SVG output. The chart shows a time-based scale on the x-axis spanning 2010–2012 and a linear scale on the y-axis ranging from 0 to 2 million. Customization is achieved through post-selection, where the code modifies generated axis elements by removing the domain path, styling tick lines with dashed strokes and gray color, and adjusting tick text positioning. A custom tick format prefixes the first value with a dollar sign and appends “million” while others use narrow non-breaking spaces. The code uses `d3.axisBottom`, `d3.axisRight`, `d3.scaleTime`, and `d3.scaleLinear`.

Mmbostock

75% match