New Margin Convention
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 descriptionScatter 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).
Comments
Sign in to join the discussion.