Skip to main content
100%

Ruler

✓ Published0🌍 Public
WWanagram
Last edited Feb 18, 2016
Created on Feb 18, 2016

A horizontal ruler visualization displays a 10,000-unit linear scale with multiple tick layers of varying precision. The chart uses a gray background rectangle and three nested grid groups, each rendering ticks at different intervals (100, 20, and 10 ticks) with progressively larger tick sizes. Built with D3 v3, it creates SVG axes via `d3.svg.axis()`, scales with `d3.scale.linear()`, and hides axis labels and minor grid text. Tick data is filtered using `.exit()` to classify minor ticks, producing a clean, ruler-like appearance.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

Untitled

A single linear axis displays values from 0 to 50, with tick marks placed every 10 units. The axis is rendered as an SVG group translated to a fixed position within a 700-by-100 pixel canvas. The example uses D3.js version 3.5.12, specifically `d3.svg.axis()` and `d3.scale.linear()`, to map the domain to a range of 0 to 400 pixels. Explicit `tickValues` are generated via `d3.range()`, and the axis is appended to an SVG container and called on the group.

AAhmeTyAtakan
73% match
Loading thumbnail…

Viz - Line - axis ticks

This visualization displays a simple line chart of ten random data points, with each point rendered as a red-bordered circle connected by a steelblue stroke. The example demonstrates how to add axis ticks and a grid using D3 v4’s `d3.axisLeft` with a custom `tickSize` that extends the ticks across the plot width. The chart is built using the `viz` library (v1.3.0) to generate the line and value scale, while SVG elements are styled via CSS classes for the grid lines, domain, and circles. Data is produced on the fly with `d3.range` and `Math.random`.

NNPashaP
72% match
Loading thumbnail…

Axis tick marks

This example demonstrates how to control the placement of tick marks on a chart axis using the D3.js library. It shows a single horizontal axis with four specified tick values (0, 50, 60, 100) rendered along a linear scale that maps the domain 0–100 to a pixel range of 0–400. The code constructs the axis using `d3.scale.linear()`, `d3.svg.axis()`, and the `tickValues()` method, then appends it to an SVG element. The axis is positioned via a translate transform, with CSS styling providing black strokes for the axis line and tick marks.

RRobinL
72% match
Loading thumbnail…

scale

A slider controls the domain of a linear scale, demonstrating how D3’s axis and grid components respond to changing input ranges. The visualization shows a horizontal grid with major, minor, and sub-minor tick lines in red and blue, while a separate black axis displays four major ticks. Dragging the slider updates the domain and redraws both groups via `d3.svg.axis()`. The SVG rendering uses crisp edges, with the grid background and tick styling defined in CSS. Data is generated on the fly from the slider’s numeric value, with no external dataset.

SSmith5mr
72% 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
72% 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
71% match
Loading thumbnail…

Density-based Ticks

This example demonstrates how to set tick marks to a fixed pixel density, so the number of ticks adapts to the chart's changing width. The code uses d3.axisBottom and d3.scaleLinear, with the tick count computed as varyingWidth divided by a constant xPixelsPerTick. A sinusoidal animation continuously adjusts the inner width, and requestAnimationFrame re-renders the axis in an SVG. The visualization shows the axis label and tick marks updating in real time, illustrating a responsive approach for resizable charts.

CCurran Kelleher
71% match
Loading thumbnail…

Ordinal Tick Filtering

This example demonstrates how to reduce clutter on an ordinal axis by selectively showing only every other tick label. The visualization renders an SVG axes with 52 letter-based categories, using `d3.scale.ordinal()` and `d3.svg.axis` with `.tickValues()` to filter the displayed ticks. The chart is generated with D3 v3, drawing black axis lines and labels in a plain HTML page.

Mmbostock
71% match