cwanca

@cwanca·3 public vizzes

Let's make a face with D3.js!

This example creates a face by directly manipulating the Scalable Vector Graphics (SVG) canvas, setting its background to red via the `select` function from D3.js. The visualization demonstrates fundamental SVG and D3.js usage within a minimal web page that includes a video tutorial link. The `index.html` file loads D3 version 6.4.0 and a separate stylesheet, while the main JavaScript code selects the `svg` element and applies a background color. The accompanying README references the lecture timestamp, showing the example is intended as a hands-on coding exercise using the D3 `select` API.

Jan 24, 2021

Loading thumbnail…

Shapes with SVG and CSS

A collection of basic SVG shapes—circles, rectangles, lines, and a path—demonstrates how CSS can style SVG elements. It shows how SVG’s transform attribute scales and translates groups of shapes, while CSS classes like `.lines` apply stroke, stroke-width, and linejoin properties. The example uses raw SVG markup embedded in HTML, with no JavaScript libraries, and the rendering is handled directly by the browser’s SVG engine.

Jan 24, 2021

Loading thumbnail…

HTML Cars Report

This example renders a simple HTML cars report listing three used vehicles with model years and prices. It uses plain HTML lists and CSS styling, with a monospace font applied to the body and one list item highlighted in red via the `.highlighted` class. The data is hardcoded directly in the markup, and no JavaScript or external libraries are involved. The result is a static, text-based visualization of car pricing information.

Jan 24, 2021