setom

@setom·4 public vizzes

Responding to Resize

This example demonstrates a full-window SVG chart that automatically redraws itself whenever the browser window is resized. The code uses CSS fixed positioning to make a container div fill the viewport, then reads its `clientWidth` and `clientHeight` properties inside a `redraw()` function. It sets the SVG’s `width` and `height` attributes accordingly and renders two diagonal green lines forming an X, using the data-join pattern with `svg.selectAll("line").data()` and the `merge()` method. A global `resize` event listener triggers the redraw on every window size change.

Dec 12, 2019

Loading thumbnail…

HTML Cars Report

This simple report displays three used cars with model, year, and price, highlighting the first listing in red. It uses plain HTML elements (h1, ul, li) and CSS (the `.highlighted` class) to style the content, with no external libraries or data sources. The monospace font and large font-size create a straightforward, readable presentation.

Dec 12, 2019

Loading thumbnail…

Cars Report

This example demonstrates a text-based report generated from car data, filtering vehicles under a price threshold and formatting each entry with year, make, model, and price. It uses a JavaScript promise—`getCars()`—to simulate asynchronous loading with a two-second delay, then displays a loading message before rendering the final report in the browser via `textContent`. The modular approach imports `formatCar` and `generateReport` to handle data transformation, relying on `JSON.parse` for the inline car dataset.

Dec 12, 2019

Loading thumbnail…

Cars Report

This example demonstrates a JavaScript data-processing workflow that filters a hardcoded JSON array of car objects and formats them into a text report. It visually shows how modular code with ES modules, Promises, and async operations can power a dynamic user interface. The code uses `JSON.parse` to load car data, `setTimeout` inside a Promise to simulate a delayed API call, and the `filter`, `map`, and `join` array methods to transform the data. The rendered output is plain HTML text updated asynchronously with the final list of affordable cars.

Dec 12, 2019