Extent Ticks

Zero Ticks

This example demonstrates a minimal SVG axis from D3 v3 that displays only the domain path, with tick marks and labels completely suppressed by setting `ticks(0)`. The axis is rendered using `d3.svg.axis`, oriented to the bottom of a chart area defined by fixed margins, and styled with a black stroke and crisp edges. The underlying scale is a `d3.scale.identity`, mapping a width-based domain to pixel coordinates. The visible output is a single horizontal line, highlighting how axis components can be selectively hidden while retaining the baseline.

81% match

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.

77% match

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`.

77% match

Date Ticks

This example demonstrates how D3’s time scale and axis API can animate date tick marks as the domain’s upper bound randomly shifts. A bottom-oriented SVG axis is created with `d3.time.scale` and `d3.svg.axis`, formatting tick labels as month/day strings. Every few seconds, `setInterval` triggers a transition that updates the axis domain to a new random date, smoothly redrawing the ticks and grid lines via `.transition().duration()`. The chart uses no external data, only a generated sequence of dates between January 2 and a random day in late January, with the axis centered vertically on a 960×500 SVG canvas.

77% match

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

Responsive Axes

This example demonstrates axes that dynamically update their tick spacing and labels when the browser window is resized. A linear scale maps a domain of zero to ten trillion to the width of the plot area, while a second scale maps zero to one to the height. The visualization uses `d3.axisBottom` and `d3.axisLeft` to generate the ticks, and through a custom `render` function triggered by a `resize` event listener, the SVG and its axes adjust continuously to the new dimensions. The rendering uses `d3.select`, `marginConvention`, and labeled axis modules to manage layout and styling.

DDean Bozic

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

D3 Axes - Configuration

This example demonstrates how to configure a D3 axis by explicitly setting tick values. A linear scale maps a domain of 0 to 100 to a range of 0 to 500 pixels, and an axis is generated using `d3.axisBottom(scale)`. The code calls `.tickValues([0, 25, 50, 75, 100])` to control which values appear as ticks, overriding the default tick generation. The axis is rendered into an SVG `<g>` element using `d3.select('svg g').call(axis)`, producing a clean, labeled horizontal axis.

SSubhendu Karmakar