Zachary Keller

@zkeller89·4 public vizzes

Let's make a facae with D3.js!

This example renders a simple face as a single circle using D3.js v5 and SVG. The code selects the `<svg>` element created in the HTML, reads its width and height attributes, and positions the circle at the exact center with a radius equal to half the height. The page loads D3 from a CDN and imports the `select` function, though the main drawing uses the global `d3.select`. The minimal styling in `styles.css` removes margins and hides overflow while defining a `lines` class that is not currently applied.

Mar 23, 2020

Loading thumbnail…

Shapes with SVG and CSS

SVG shapes—circles, rectangles, lines, and a path—are drawn directly in the markup with inline attributes for position, size, and color. CSS classes style the line group with a thick black stroke and the path with a rounded green join, while a nested transform scales and translates the entire composition. This example demonstrates how to combine raw SVG elements with external stylesheet rules for visual customization, using React through the provided starter template but no JavaScript for dynamic behavior.

Mar 22, 2020

Loading thumbnail…

HTML Cars Report

This example presents a basic HTML report listing three used cars with their model years and prices, using a static, unstyled document structure. It shows how a simple data list can be presented without interactive visualization, relying on semantic HTML elements such as a heading and an unordered list. The page uses a linked stylesheet (styles.css) to apply monospace font sizing and red highlight coloring to the first car entry via a class selector. No JavaScript frameworks or charting libraries are involved; the rendering approach is plain HTML and CSS only.

Mar 22, 2020

Loading thumbnail…

Cars Report

This example shows how JavaScript objects, arrays, and modules can generate a text-based car report. After a simulated two-second delay from a Promise, it filters a hardcoded JSON array of five cars by price, formats each matching car’s year, make, model, and price, and displays the result as a multi-line string in the HTML page. The code uses ES6 module imports and exports, `Array.prototype.filter` and `map`, and template literals to transform the data.

Mar 22, 2020