6 Scales and Axes
6.1 Scales
6.1.2 Practice
See: IDVW2, Chapter 7: Scales
Practice creating an ordinal scale in the Console:
Open the JavaScript Console
const ordscale = d3.scaleBand()
.domain([0, 1, 2, 3, 4])
.range([0, 100]);ordscale(1);Try other numbers: ordscale(3);, ordscale(2.5);, ordscale(7);, etc.
Add inner padding and try again.
See diagram here: https://github.com/d3/d3-scale#band-scales
*Be sure to use
d3.scaleBand(), notd3.scaleOrdinal()for this use case.
6.1.3 Bar chart
d3.scaleBand()
IDVW2 Chapter 9, pp. 150-153
Here d3.scaleBand() is used to create an xScale function to convert bar numbers to pixels. Change the w parameter and observe how the bars are resized to fit on the SVG.
6.2 Margins
6.2.1 Lecture slides
“Margin convention”
const w = 500;
const h = 400;
const margin = {top: 25, right: 0, bottom: 25, left: 25};
const innerWidth = w - margin.left - margin.right;
const innerHeight = h - margin.top - margin.bottom;