mandelmech

@mandelmech·4 public vizzes

Lets make a face with D3

A cheerful cartoon face rendered in SVG uses D3 v5 selections to build a yellow circle head, two eyes, and an arc-shaped mouth. The eyebrows animate upward and back down via chained `transition().duration()` calls, creating a surprised expression. Code imports `select` and `arc` from the D3 module, positioning elements with a centered `g` group and SVG attributes. The example demonstrates basic D3 data-joining-free shape construction and timed transitions.

Sep 5, 2019

Loading thumbnail…

Cars Report

This example generates a text-based report of used cars filtered by a maximum price. It displays a list of car models—including year, make, model, and price—derived from a hardcoded JSON array of car objects. The report is produced by chaining JavaScript array methods like `filter`, `map`, and `join` to process the data, then rendered to the page using `document.getElementById().textContent`. The page uses custom CSS styling with a dark background and large Ubuntu font.

Sep 5, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how fundamental SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using CSS and inline attributes. The visualization shows four groups of shapes with varied fills, strokes, and stroke widths, including a translated cluster with a purple fill and a black outline. A separate group applies CSS-defined stroke properties to lines and a path. The code uses native SVG elements within an HTML document, with styles defined in an external stylesheet. All shapes are rendered client-side, with no external data or JavaScript libraries involved.

Sep 5, 2019

Loading thumbnail…

HTML Cars Report

This example demonstrates a simple HTML-based car report displaying three used vehicles with their model years, makes, and prices. The page uses a static HTML list structure with inline metadata for each car. The presentation relies on the `styles.css` stylesheet to apply a monospace font and large text size, with the first car entry highlighted in red using a `.highlighted` class. The report is rendered entirely through standard HTML elements and CSS styling, with no JavaScript libraries or data fetching involved.

Sep 5, 2019