jugsomilk

@jugsomilk·4 public vizzes

Responding to Resize

This example demonstrates how a D3.js visualization can respond to browser window resizing. It draws a green X composed of two thick, semi-transparent lines that stretch across the entire viewport, with the SVG element filling the page via CSS fixed positioning. The code uses `chartDiv.clientWidth` and `clientHeight` to extract the computed CSS size, then applies those dimensions to the SVG’s width and height attributes. A `redraw` function manages the SVG and line updates, and a window `resize` event listener triggers it whenever the viewport changes.

Apr 22, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example creates a smiling face using SVG shapes drawn with D3.js, demonstrating how to compose a recognizable figure from basic geometric elements like circles and paths. The code uses D3 to generate and position the facial features, including eyes and a mouth, within an SVG canvas. The visualization relies on raw SVG elements rather than a dataset, with the face’s appearance determined by static coordinates and styling defined in the accompanying CSS. It highlights D3’s utility for structuring and placing graphical primitives in a lightweight, browser-rendered setting.

Apr 21, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered within a single SVG element. It shows how inline presentation attributes coexist with external CSS rules, where the `.lines` class applies stroke styling to grouped elements while individual shapes use inline `fill` and `stroke` values. The SVG uses transform groups to scale, translate, and reposition shapes, with colors and stroke widths controlling visual hierarchy. The page is a plain HTML file with a linked stylesheet, using no JavaScript libraries, relying purely on SVG’s declarative markup and CSS for styling.

Apr 21, 2020

Loading thumbnail…

Cars Report

The Cars Report displays a filtered list of used cars, showing each vehicle's year, make, model, and price. It loads car data from an embedded JSON array via a Promise returned by `getCars()`, simulating a two-second delay. The `generateReport()` function filters cars below a maximum price of $2,000 and formats each entry using the `formatCar()` helper. Results appear in a `<pre>` element with a "Loading..." placeholder, updated through plain DOM textContent manipulation after the asynchronous data resolves.

Apr 21, 2020