dmcgown3

@dmcgown3·3 public vizzes

Let's make a face with D3 (following the video)

A smiley face drawn with SVG circles demonstrates fundamental D3.js DOM manipulation, with animated eyebrows that move via selection and attribute updates. The example uses D3 v5’s `select` and `append` methods to build the SVG structure, starting with a fixed-radius circle on a 960×500 canvas. It follows a tutorial video, showing how to create and style basic shapes programmatically, while the accompanying CSS hides page margins and overflow. No data source is involved; the focus is purely on interactive, code-driven drawing.

Aug 14, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered together in a single canvas. It shows how CSS classes control stroke and fill properties for groups and individual elements. The code uses raw SVG markup with inline attributes like `fill`, `stroke`, and `transform`, while styling comes from an external stylesheet. It includes static shapes without animation, highlighting how SVG’s `<g>` grouping and `translate` and `scale` transforms arrange geometry spatially.

Aug 12, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based car report that filters a hardcoded dataset of five cars by price and displays matching entries formatted as strings. It shows how JavaScript modules coordinate to load simulated asynchronous data and render output into an HTML page. The code uses `JSON.parse` to convert inline JSON data, a `Promise` with `setTimeout` to mimic a delayed data fetch, and ES6 module imports/exports to split logic into separate files. The final report appears in a `<pre>` element with a loading message shown first.

Aug 11, 2020