Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited May 30, 2020

Created on May 30, 2020

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.

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

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

89% match

Loading thumbnail…

Customizing Axes

This example visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository. The scatterplot uses red, semi-transparent circles to show data points, with customized axes featuring tick lines that extend across the entire chart and removed domain lines. The code uses d3.scaleLinear, d3.axisLeft, and d3.axisBottom to construct the scales and axes, while labels for both axes and the title are added as SVG text elements.

Lliechtia

88% match

Loading thumbnail…

Making a bar chart

This scatterplot shows the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The visualization uses a linear scale for both axes and includes labeled axis ticks, gridlines, and a title. Built with D3 v7, the code loads CSV data from an external URL and renders SVG circles, leveraging `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Styling applies custom colors to tick marks, labels, and the title via CSS.

Aakshayms0

87% match

Loading thumbnail…

Customizing Axes

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.

Mmyskotima130

87% match

Loading thumbnail…

make bar

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. The chart uses D3 v5’s scaleLinear, axisBottom, and axisLeft to construct the axes, while csv() loads the data and converts numeric fields. SVG circles with a steelblue fill and 50% opacity display the points, with grid lines generated via tickSize. The visualization includes labeled axes and a title, with margins applied to position the plot area.

Fforeverworld1879

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

86% match

Loading thumbnail…

cars scatter plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each point representing a vehicle. The D3 v5 code uses `scaleLinear` and `extent` to map data values to pixel coordinates, while `axisBottom` and `axisLeft` render labeled axes with gridlines via `tickSize`. Circles are appended to an SVG group, and the title text is positioned manually. The visualization demonstrates custom axis formatting with `format('.3s')` and removes default domain lines for a cleaner appearance.

Ppei9223

86% match