Superscript Format II

100%

Superscript Format II

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Sep 28, 2013

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.

AI-generated description

An alternative to Unicode superscripts, using axis post-selection to add tspan elements.

gpl-3.0 Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Tick Format

This example compares three ways to format tick labels on linear axes, each rendered as an SVG axis via `d3.axisLeft`. The left axis uses `scale.tickFormat` with an SI-prefix type (`"s"`), producing a consistent prefix across all ticks. The middle axis applies `d3.format(".0s")` directly, causing variable precision and prefix per label. The right axis uses `d3.formatPrefix(".1", 1e6)` to enforce a fixed mega-prefix, demonstrating manual control over SI formatting. The three axes share the same domain from -1e6 to 2e6.

Mmbostock

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

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

76% match

Loading thumbnail…

Fork of D3 Axes - Tick Label Formatting

This example demonstrates how to format tick labels on a D3.js axis using custom tick formatting. A linear scale maps a domain of 0 to 100 to a pixel range, and an axis bottom is configured with increased tick padding and size. The axis is customized by limiting the number of ticks to four and applying a custom `tickFormat` function that appends a percent sign to each value. The resulting SVG renders the axis with labeled ticks showing the original data values with a “%” suffix.

SSubhendu Karmakar

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

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

71% match

Loading thumbnail…

Ordinal Tick Filtering

This example demonstrates how to filter tick labels on an ordinal axis by displaying only every other letter. A D3 v3 SVG axis renders the alphabet from A to Z, with the tick format function returning null for odd indices to hide those labels. The axis uses d3.svg.axis with an ordinal scale and rangePoints, while the text and line styling come from standard SVG CSS classes.

Mmbostock

71% match