Natural Log Scale

100%

Natural Log Scale

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Nov 23, 2013

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.

AI-generated description

Using Unicode superscripts to format ticks for a natural-log <i>y</i>-scale.

gpl-3.0 Licensed

Similar vizzes

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…

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…

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

76% match

Loading thumbnail…

Superscript Format

A log-scale axis displays powers of ten from 10⁰ to 10⁹, with tick labels formatted using superscript characters (⁰¹²³⁴⁵⁶⁷⁸⁹) via a custom `formatPower` function that maps each digit to its Unicode superscript equivalent. The example uses d3.v3's `d3.scale.log` and `d3.svg.axis`, with tick formatting defined by a custom function passed to `.ticks(10, ...)`. The SVG rendering places the axis with generous top and bottom margins, and the code notes the vertical alignment issue between superscripts and normal digits.

Mmbostock

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…

Log-Log Plot

A log-log plot displays three curves for the functions f(x) = x, x², and x³ across a range from 0.1 to 100, using logarithmic scales on both axes. The code loads data from a TSV file and renders it as SVG paths through d3.svg.line, with logarithmic scales via d3.scale.log and axes via d3.svg.axis. A legend identifies each curve by its formula, and a clipPath confines the lines to the plotting area.

Mmbostock

75% match

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

73% match

Loading thumbnail…

Classical Scales

This visualization showcases a comprehensive set of D3.js v2.10 scales through a series of horizontal axes, each paired with a descriptive label. Linear, logarithmic, power, square-root, quantile, quantize, threshold, and identity scales are demonstrated, with the log and power scales shown across different domain ranges to illustrate their behavior. The example also highlights tick subdivision options, including numeric, boolean, and string arguments, which is particularly notable because vanilla D3 v2.10 does not support function-based parameters for tick subdividing. The SVG renderer displays the axes with a glowing filter effect and the layout is fixed to 1500 pixels in height to accommodate the many examples.

GGerHobbelt

69% match