Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published3🌍 Public
JJake
Last edited Jun 14, 2020
Created on Jun 6, 2020
Forked from Making a barchart

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.

AI-generated description
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
93% 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
90% 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
90% 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
89% 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 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
88% 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
86% match