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 myscale = d3.scaleBand()
.domain([0, 1, 2, 3, 4])
.range([0, 100]);myscale(1);Try other numbers: myscale(3);, myscale(2.5);, myscale(7);, etc.
Add inner padding and try again.
More on band scales here: https://d3js.org/d3-scale/band
*Be sure to use
d3.scaleBand(), notd3.scaleOrdinal()for this use case.
6.1.3 Exercise : vertical bar chart
d3.scaleBand()
IDVW2 Chapter 9, pp. 150-153
Create the vertical bar chart shown below by filling in the lines marked ADD in this file and uncommenting them. (Note that we are not yet employing a linear scale for the y-axis.)
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;