jeffko18

@jeffko18·3 public vizzes

Let's make a face with D3.js

This example constructs a cartoon face out of basic SVG shapes, including a yellow circle for the head, two eyes, eyebrows, and an arc-based mouth. It demonstrates how to build and position SVG elements using D3.js v5, selecting the `<svg>` element and appending groups and shapes with transformation attributes. The code uses the `arc` generator from D3 to create the mouth path, while circles and rectangles are placed manually via coordinate offsets. The dataset is a static, hardcoded set of shape definitions rather than external data, emphasizing SVG drawing techniques over data binding.

Oct 19, 2019

Loading thumbnail…

Shapes with SCG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and CSS. It shows how SVG elements inherit styling from parent `<g>` groups and how CSS classes can apply strokes and fill colors. The code uses the SVG API directly with elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, rendered in a 960x500 viewport. The CSS file defines stroke properties for the lines group, while inline attributes handle fills and specific stroke widths.

Oct 19, 2019

Loading thumbnail…

HTML Cars Report

This example displays a simple, styled inventory report for three used cars, listing each model and its price. It highlights the 2012 Nissan Leaf in red to draw attention to that entry. The visualization is built with plain HTML for the list structure and a linked CSS stylesheet for typography and the red highlight. The page uses no JavaScript libraries, relying instead on core HTML elements like `<h1>` and `<ul>`, and CSS selectors such as `body` and `.highlighted` to define the large monospace font and color emphasis.

Oct 19, 2019