liveBook · Manning

Case statement

As explained in D3.js in Action, Third Edition

A switch statement selects and executes code based on which case matches an expression's value.

A case statement selects one branch by testing conditions in order. In a responsive Svelte component, `switch (true)` assigns an SVG width according to the current screen width. section 14.4.1

Responsive SVG grid

A Svelte grid uses `switch (true)` to keep an SVG within a 12-column layout on wide screens and expand it across the available width on narrow screens. The same approach selects columns for a grid of Van Gogh visualizations.

How D3.js in Action, Third Edition covers it

How deep it goes
Demonstrates `switch (true)` with ranges, `break`, `default`, and Svelte reactivity, without discussing language internals.
Examples
Uses screen-width breakpoints to size an SVG and arrange a Van Gogh visualization grid into one, two, or three columns.
What it assumes
Assumes basic JavaScript expressions and Svelte component syntax while demonstrating the responsive branching pattern concretely.
What you can do after
Apply it via Svelte to recalculate SVG dimensions and layout choices whenever the browser width changes.
How it connects
Connects switch statements with Svelte reactivity, responsive design, SVG, and data visualization grids.

Also explained in

Compare how 9 books explain case statement →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.