Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited Feb 25, 2020

Created on Feb 25, 2020

This example presents a scatter plot of the auto-mpg dataset, showing the relationship between horsepower and miles per gallon. It highlights how D3 axes can be customized using `d3.axisBottom` and `d3.axisLeft` with custom tick formatting via `format('.3s')`, tick sizes that extend across the chart, and removed domain lines. The chart also includes a title and an axis label, with scales built using `d3.scaleLinear` and `d3.extent`. Data is loaded from a remote CSV file.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Customizing Axes

This example shows a scatterplot of automobile horsepower against weight, with clearly labeled axes and a title. The axes are customized using D3’s `axisBottom` and `axisLeft` to include gridlines via negative tick sizes, while axis labels are added as SVG text elements with rotations. Data from a CSV file is loaded with `d3.csv`, and scales are created using `scaleLinear` with `.nice()` for clean tick intervals. The circles are rendered as SVG elements with adjustable opacity, and tick lines and labels are styled via CSS.

JJake

90% match

Loading thumbnail…

Customizing Axes

This scatterplot displays the relationship between horsepower and weight for various car models, with each point representing a vehicle from the auto-mpg dataset. The chart emphasizes customized axes using D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` functions, which are enhanced with tick marks that span the full plot area, custom tick formatting (e.g., converting billions to ‘B’), and rotated axis labels. The SVG rendering includes semi-transparent yellow circles, a purple title, and styled tick texts, demonstrating how to tailor axes for clarity and visual appeal.

SSACHINSHUKLA99

89% match

Loading thumbnail…

Customizing Axes

This example demonstrates how to customize chart axes in D3.js, using a scatter plot of automobile data (horsepower vs. weight) from a CSV file. It shows how to remove the default axis frame lines, add tick marks that span the entire plot area, and append clear axis labels and a title. The code uses D3 v5 APIs including `select`, `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `format`. The rendering is done using SVG within a React project, with all styling applied via external CSS classes.

Ppaul4952233@gmail.com

87% match

Loading thumbnail…

Customizing Axes

This bar chart displays the relationship between horsepower and weight for cars in the auto-mpg dataset, with each circle representing one vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to render customizable axes with extended tick lines that span the chart interior, removed domain lines, and custom axis labels. The plot margin is set to accommodate rotated y-axis text, and the data is loaded via `csv` from a remote file before being scaled and drawn as semi-transparent red circles in an SVG.

Ggcappadaniel

87% match

Loading thumbnail…

Customizing Axes

This example shows a scatterplot of vehicle weight versus horsepower for the top 10 most populous countries, using data from an auto-mpg dataset loaded via `d3.csv`. The visualization emphasizes customizable axes: the y-axis is rotated with custom text, while the x-axis uses `d3.format('.3s')` for abbreviated labels. Both axes include extended tick lines and removed domains, created with `d3.axisLeft` and `d3.axisBottom`. Circles are rendered as SVG elements positioned by `d3.scaleLinear` scales with `.nice()` padding.

BBraja Gopal Das

87% match

Loading thumbnail…

Fork of Customizing Axes

This scatterplot displays the relationship between horsepower and weight for various automobile models, with each point representing a vehicle. The chart uses D3 v5's `scaleLinear`, `axisLeft`, and `axisBottom` to construct customized axes with removed domain lines and formatted tick labels, such as converting billions to B. Data is loaded from the auto-mpg.csv dataset. The visualization also adds custom axis labels and a title, demonstrating how to tailor D3's default axes for clearer data presentation.

DDurga Prasad

87% match

Loading thumbnail…

axis

This example shows a scatter plot of automobile data from the auto-mpg dataset, with horsepower on the x-axis and weight on the y-axis. Orange semi-transparent circles represent individual cars, while gridlines and axis labels are generated using d3-axis. The code uses d3.csv to load the data, d3.scaleLinear with .nice() for the scales, and d3.extent to set domains. The SVG rendering includes custom margin-based positioning, rotated axis labels, and a title, with axes styled by removing the domain line and adding tick padding.

Aabcz1234

84% match