liveBook · Manning

Svelte window element

As explained in D3.js in Action, Third Edition

The Svelte window element is a special Svelte component element that exposes browser window properties and events to a component.

The special <svelte:window /> element exposes browser window properties to a Svelte component. Binding innerWidth lets reactive declarations recalculate an SVG’s dimensions whenever the screen changes. section 14.4.1

Responsive Van Gogh small multiples

A Grid.svelte component binds the window width, changes a small-multiple grid from one to three columns, and updates the SVG container as the screen is resized. section 14.4.1

How D3.js in Action, Third Edition covers it

How deep it goes
Demonstrates window binding through reactive SVG width, column, row, and height calculations.
Examples
Uses a Van Gogh small-multiples grid whose SVG width and column count change with screen width.
What you can do after
Apply it via Svelte to build SVG containers that resize and reorganize visualizations with the browser window.
How it connects
Connects Svelte reactivity, SVG, responsive design, and D3 array generation.
Cover of D3.js in Action, Third Edition
liveBookmanning.com
Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

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.