d3.range() generates an arithmetic sequence of numbers. In a responsive Van Gogh visualization, range(1881, 1891) creates the ten years used for small multiples; the ending value is excluded. section 14.4.1
The resulting array also drives layout calculations: its length determines the number of grid rows after the number of columns changes with screen width. section 14.4.1
Generate visualization years
import { range } from "d3-array"; const years = range(1881, 1891); // [1881, 1882, ..., 1890] section 14.4.1
Listing 14.3 Dynamically updating the height (Grid.svelte)
<script>
import { range } from "d3-array";
...
const years = range(1881, 1891); #1
let numColumns; #2
$: switch (true) {
case windowWidth > 900:
numColumns = 3;
break;
case windowWidth <= 900 && windowWidth > 600:
numColumns = 2;
break;
default:
numColumns = 1;
}
$: numRows = Math.ceil(years.length / numColumns); #3
$: smWidth = svgWidth / numColumns; #4
$: smHeight = smWidth + 40;
$: svgHeight = numRows * smHeight; #5
</script>
<svelte:window bind:innerWidth={windowWidth} />
{#if svgWidth && svgHeight} #6
<svg width={svgWidth} height={svgHeight} />
{/if}
<style>
svg {
border: 1px solid magenta;
}
</style>
See the complete responsive-grid implementation, including range-generated years, column-dependent row counts, and reactive SVG height. section 14.4.1
