Ben Langenberg

@benl95·3 public vizzes

Shapes and Colors with SVG and CSS

This example demonstrates a collection of SVG shapes and their visual styling through CSS, set against a blank canvas. The code defines a static 960x500 SVG container without any JavaScript-driven interactions or data binding. It uses d3.v5 from a CDN, though the script block remains empty, and relies entirely on the linked styles.css for presentation. The rendering approach is purely SVG markup, showcasing how basic geometric elements can be styled independently of D3’s data-joining capabilities, making it a simple reference for SVG and CSS fundamentals.

Nov 11, 2020

Loading thumbnail…

Cars report

This example displays a static text message, “Hello World!”, inside a preformatted element on a simple HTML page. The page loads a JavaScript file that defines a `cars` array (currently empty) and then sets the content of the message element using `document.getElementById`. The visualization uses no external libraries or frameworks, relying purely on vanilla DOM manipulation to render the output. The data source is not shown, as the array holds no records.

Nov 4, 2020

Loading thumbnail…

Cars Report

This example demonstrates a data-reporting workflow for a small car inventory: a loading state appears first, then a filtered list of cars under a $2,000 price threshold is displayed as text. The code uses JavaScript modules (`getCars.js`, `formatCar.js`, `generateReport.js`) to parse an embedded JSON array, apply a `filter` and `map`, and join results with newlines. The UI updates a `pre` element’s text content via the DOM API, with a simulated two-second delay using `Promise` and `setTimeout`. No rendering library is used; output is plain text.

Nov 4, 2020