New Margin Convention

100%

New Margin Convention

✓ Published0🌍 Public

Last edited Nov 4, 2021

Created on Nov 4, 2021

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. It demonstrates the “new margin convention” by setting the x and y scale ranges relative to the SVG’s full width and height, avoiding a translated `<g>` container. The code uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` from D3 v7, with `d3.csv` loading the data. Axes are positioned using explicit margin-based transforms, while circles are drawn directly on the root SVG.

AI-generated description

Scatter plot with D3, using the newer margin convention pattern of setting the domain of the scales relative to the SVG, rather than utilizing an additional <g> element translated by the top and left margin.

Makes use of Rollup so that we can author the code using ES modules.

Inspired by the patterns found in Observable: D3 Charts.

I personally prefer the old margin convention, because it's simpler to reason about (you can isolate the thinking around innerWidth and innerHeight, rather than always considering margin.top, margin.right, margin.bottom, and margin.left).

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot 101

This scatter plot shows the relationship between horsepower and weight for cars from the auto-mpg dataset, with red semi-transparent circles marking each vehicle. The visualization uses D3 v6 with SVG rendering, employing `d3.csv` to load data, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` to generate gridlines. Axis labels and a title are added as text elements, while margins and padding position the chart within the 960×500 SVG canvas.

Ddata-inside

81% match

Loading thumbnail…

Scatter Plot Test

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, loaded via `d3.csv`. The SVG rendering uses `d3.scaleLinear` for both axes, with `d3.axisBottom` and `d3.axisLeft` to create gridlines and tick marks. Circles are appended with semi-transparent cyan fill to show data density. Axis labels and a title are added as SVG text elements, demonstrating a clear, labeled comparison of vehicle performance metrics.

JJefferson Abreu

81% match

Loading thumbnail…

Cars scatter plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The plot uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes with grid lines, while the data is loaded via `csv` from an external auto-mpg dataset. Circles are rendered as SVG elements, and axis labels and a title are added as text. The margins and `nice()` scaling ensure readable axis limits.

Uumihito

81% match

Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. The code loads CSV data via d3.csv, parses numeric fields, and renders circles using D3 v5's scaleLinear, axisBottom, and axisLeft within an SVG. Grid lines are generated through tickSize, while axis labels and a title are appended as SVG text elements.

BbeauMarko

81% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each circle representing a vehicle from the auto-mpg dataset. The code uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, while `csv` loads the data from a remote URL. Each data point is appended as an SVG circle, with styling applied via CSS for fill color and opacity. The visualization includes labeled axes and a title, demonstrating how D3 handles margin-based layouts and custom tick formatting in an SVG rendering.

Sssingh175

81% match

Loading thumbnail…

Scatter Plot

This scatter plot uses D3 v5 to visualize the relationship between horsepower and weight in the auto-mpg dataset. The SVG rendering displays each vehicle as a circle, with its position determined by the d3.scaleLinear scales for the x- and y-axes after parsing the CSV data. The d3.axisBottom and d3.axisLeft functions generate the axes, while the margin and inner dimensions shape the plot area.

LLonwabo11

81% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models from the auto-mpg dataset. The D3.js code uses `scaleLinear` for both axes, with `axisBottom` and `axisLeft` for tick marks and gridlines. Data is loaded via `csv()` from a remote URL, and each vehicle is rendered as a circle with a fixed radius. Axis labels and a title are added as SVG text elements, with styling defined in CSS for the tick marks and label fonts.

CChip

81% 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 circle representing a vehicle. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes with gridlines, and renders the points as SVG circles with steelblue fill and partial opacity. Data is loaded via `d3.csv` from an external URL and parsed into numeric values, while margins and inner dimensions position the plot within a 960x500 SVG canvas.

Sshungshung

81% match