Axis Styling

100%

✓ Published0🌍 Public

Last edited Jul 31, 2019

Created on Aug 16, 2012

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

AI-generated description

This example shows how to customize the appearance of d3-axis using post-selection: modifying the contents of the SVG elements created by the axis. This technique can also be applied during transitions.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Axis Styling II

This example demonstrates a time-series axis with a customized right-side y-axis using post-selection, where axis labels and grid lines are restyled after rendering. The code uses d3.axisBottom and d3.axisRight to create the axes, with the y-axis’s tick lines converted to dashed gray gridlines and labels repositioned. A transition triggered by d3.timeout animates the y-axis domain change over 2.5 seconds, using post-selection to modify entering, updating, and exiting tick elements. The implementation relies on d3.scaleTime, d3.scaleLinear, and transition.attrTween to cancel default tweens, rendering as SVG with animation.

Mmbostock

85% match

Loading thumbnail…

Customizing Axes

This example shows how to customize axes in D3 bar charts, displaying event names on the y-axis and their start years on the x-axis. It uses D3 v5’s `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart, with custom tick formatting via `format('.3s')` and removal of default domain lines. The SVG rendering includes axis labels, a title, and grid lines generated by setting negative tick sizes. Data comes from a local CSV file parsed with `d3.csv`.

SShehroze Aamer

81% match

Loading thumbnail…

Axes customization.

This example demonstrates customizing axes in a bar chart built with D3 v5, loading data from an external CSV file and rendering it as SVG rectangles. It uses `d3.scaleLinear` and `d3.scaleBand` to map numeric and categorical values, while `d3.axisBottom` and `d3.axisLeft` generate the axes with custom tick formatting via `d3.format`. The code removes default domain lines, adds a custom axis label and title, and styles tick marks and text through CSS.

CChocoOrange

81% match

Loading thumbnail…

Custom Time Format

This example demonstrates a custom multi-scale time format for a D3 axis, showing how tick labels adapt to different time granularities—displaying milliseconds, seconds, minutes, hours, days, and months as the scale zooms. It uses `d3.time.format.multi` to define an array of format/filter pairs, applied via `d3.svg.axis`. The code generates an SVG chart with a single year-long domain, rendering tick labels dynamically based on the date’s precision. The data source is the current date, and the rendering relies on D3 v3’s SVG axis API.

Mmbostock

81% match

Loading thumbnail…

Customizing Axis

This example demonstrates how to customize axes in a D3.js bar chart, showing the top 10 most populous countries. The horizontal axis uses a linear scale with a custom tick format that abbreviates numbers (e.g., "1.4B" for billions), while the vertical band scale lists country names. The code imports specific D3 v5 functions like `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, and removes default axis lines and ticks for a cleaner look. The chart renders as SVG, with data loaded from a CSV file and styled via CSS classes for tick labels, axis titles, and the chart heading.

RRonie Uliana

81% match

Loading thumbnail…

Customizing Axes

This example demonstrates how to customize axes in D3, plotting automobile horsepower against weight from the auto-mpg dataset. The scatterplot uses d3.scaleLinear with .nice() to smooth domain extents, while d3.axisBottom and d3.axisLeft are configured with tickSize to create gridlines. Tick labels are formatted using d3.format, replacing "G" with "B" for billions. The SVG rendering includes removing default domain paths, adding axis labels and a title, with styled circles and text via CSS.

Ddev-snip

80% match

Loading thumbnail…

Customizing Axes

This example demonstrates customized chart axes with an SVG bar chart of country populations loaded from a local CSV file. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to create the plot, applying a custom tick formatter that abbreviates large numbers with `format('.3s')` and replaces ‘G’ with ‘B’. The x-axis is styled as a full-length gridline, while the y-axis removes its domain and tick lines for a cleaner look.

IIan

80% match

Loading thumbnail…

Basic Axes

Four interactive buttons let a user select one of D3 v4’s four axis orientations—bottom, top, left, or right—to re-render a 500-by-500 SVG. The example displays three axes simultaneously, each built from a different scale: a linear scale from 0 to 1000, a power scale with exponent 2, and a time scale spanning one year. Each axis is drawn with `d3.axisBottom`, `d3.axisTop`, `d3.axisLeft`, or `d3.axisRight`, called on a grouped `<g>` element. The code uses `d3.scaleLinear`, `d3.scalePow`, and `d3.scaleTime` to set the domain and range.

MMTClass

80% match