Giant316

@Giant316·3 public vizzes

Let's make a face!

This example uses D3.js to construct a cartoon face from basic SVG shapes. A yellow circle serves as the head, with two eyes and eyebrows positioned symmetrically, and an arc-based path creates a smile. The animation, driven by D3's `.transition()` API, makes the eyebrows move up and down in a looping motion. The SVG is rendered at 960 by 500 pixels, with the face assembled by translating groups to center the features.

Dec 28, 2019

Loading thumbnail…

Shapes with SVG and CSS

A collection of basic SVG shapes demonstrates how presentation can be controlled through inline attributes and external CSS. Circles, rectangles, and a polyline are drawn with default black fills, then customized with explicit fill colors, stroke widths, and a translated group using a light blue fill. A separate line and path, grouped under a class `lines`, receive black strokes and rounded joints via stylesheet rules. The example uses raw SVG elements within an HTML document, styled by a linked `styles.css` file, with no JavaScript or data binding involved.

Dec 27, 2019

Loading thumbnail…

Cars Report

This example demonstrates a loading state and a text report of cars under a price threshold, using JavaScript promises and array methods. It fetches car data from a hardcoded JSON string via the `getCars` function, which resolves after a 2-second delay. The `generateReport` function filters cars by price and formats each entry using the `formatCar` utility, displaying results in a `<pre>` element. The page initially shows "Loading..." then updates with the report, relying on native `Promise`, `setTimeout`, and DOM manipulation through `getElementById`.

Dec 27, 2019