Skip to main content
SimilarExport ZIP
100%

axis

✓ Published1🌍 Public
Aabcz1234
Last edited Jan 2, 2020
Created on Jan 1, 2020
Forked from 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.

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
87% 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
86% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and acceleration for cars, with each circle representing a vehicle from the auto-mpg dataset. It demonstrates axis customization using d3.axisLeft and d3.axisBottom, including tick sizing, padding, and label styling. The code uses d3.scaleLinear with extent-based domains and nice() to set scales, while d3.csv loads data from a remote URL. SVG rendering shows semi-transparent steelblue circles, and the plot includes a title and axis labels with custom fonts and colors.

Sshanmango
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
85% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, sourced from the auto-mpg CSV file. Each red, semi-transparent circle represents a car, with its position determined by the d3.scaleLinear scales mapping weight to the x-axis and horsepower to the y-axis. The code uses d3.csv to load data, d3.axisBottom and d3.axisLeft to render gridlines and tick labels, and SVG circles within a margin-based layout. Axis labels and a title are appended as text elements, with styling defined in CSS.

Aanuj1450
85% match
Loading thumbnail…

Cars scatter plot

This scatter plot of cars from the auto-mpg dataset shows the relationship between weight and horsepower for individual vehicles, with each circle representing a car. D3.js v5 scales the data to fit the SVG canvas, and axis generators draw labeled tick marks with gridlines. The code loads the CSV data with `d3.csv`, converts numeric fields, and renders the circles using a linear scale for both axes, with the title and axis labels added as SVG text.

VVlad Bogo
85% 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 red circle representing a vehicle. The D3 v5 code uses `csv` to load the data, `scaleLinear` to map values to pixel coordinates, and SVG `circle` elements for rendering. Axes are generated with `axisBottom` and `axisLeft`, while `extent` determines the domain. The chart includes labeled axes and a title, with styling applied via CSS.

Iianleekq
85% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between horsepower and weight for cars from the auto-mpg dataset, with each red semi-transparent circle representing a vehicle. The D3 v5 code uses `csv` to load the external data, `scaleLinear` for both axes, and `extent` to set domains. Axes are custom drawn with `axisBottom` and `axisLeft`, including grid lines and rotated labels, while the SVG rendering applies a simple circle radius and styling.

DDannie2020
85% match