jonas.thomsen@campus.lmu.de

@thomsenj·4 public vizzes

Fork of Responding to Resize

This example demonstrates how a D3.js visualization can respond to browser resizing by redrawing an SVG element to fill the available screen space. It uses `d3.select` to append an SVG to a fixed-position div, then defines a `redraw` function that reads the container’s `clientWidth` and `clientHeight` to set the SVG’s dimensions. The visualization draws two diagonal lines forming a green X, with stroke opacity set via D3’s attribute and style methods. A `window.addEventListener("resize", redraw)` handler triggers the redraw on every viewport change.

Nov 16, 2024

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a collection of fundamental SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and an external stylesheet. It shows how presentation properties like fill, stroke, and stroke-width can be defined directly on elements or inherited from parent `<g>` groups, with CSS classes like `.lines` applying additional stroke styling. The visualization uses the SVG rendering approach with a `<g>` transform for scaling and translation, and the code includes inline color values for explicit fills.

Nov 16, 2024

Loading thumbnail…

Fork of Cars Report

This example demonstrates a text-based report of cars, filtering a provided dataset by price and formatting each entry as a line of text. The code uses JavaScript objects, arrays, and modules to structure the logic. It relies on the `Promise` API for asynchronous data loading after a simulated delay, and `document.getElementById` to update the HTML `<pre>` element with the result. The data is defined as JSON and parsed with `JSON.parse`.

Nov 14, 2024

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates a minimal "Hello World" visualization in the VizHub V3 Runtime Environment, which supports continuous hot reloading through interactive widgets. It renders the text "Hello World!" using an inline HTML `div` with a font size of 217 pixels, which can be adjusted in real time by holding the Alt key and dragging the number in the editor. The code exports a `main` function that takes a `container` element and sets its inner HTML directly, showcasing the simplified entry point that replaces the traditional `index.html` file.

Nov 14, 2024