Viewing a saved revision (read-only)
4e84c3fab3cf49ef98640eb4cadfb28e
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).