jbrauckman

@jbrauckman·3 public vizzes

Let's make a face with D3.js!

This example uses D3.js v5 to construct a simple cartoon face entirely from SVG shapes. It draws a yellow circle for the head and two black circles for eyes, with positions calculated relative to the SVG’s width and height. The code imports `select` and `arc` from D3, though only `select` is used to append and style the elements. Eye spacing and vertical offset are defined as constants, demonstrating how D3’s attribute chaining builds static visuals with minimal data.

Nov 7, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example showcases a simple SVG-based visualization that renders shapes on an HTML canvas, styled with CSS. It demonstrates the integration of SVG elements within a webpage, using a monospace font and red highlighting for emphasis. The code relies on the SVG API for drawing and CSS for presentation, with no external data source. The visualization is static, focusing on the visual composition of basic geometric forms rather than dynamic data representation.

Nov 7, 2019

Loading thumbnail…

HTML Cars Report

This example generates a static HTML report that lists three cars and their prices as plain text, with one entry highlighted in red. It demonstrates a minimal, non-interactive approach to data presentation using only HTML and CSS, without any JavaScript libraries or external dependencies. The page structure uses a standard `<ul>` list and an `h1` heading, while the CSS stylesheet applies a large monospace font and a `.highlighted` class to emphasize the Nissan Leaf. The data itself is hardcoded directly into the HTML markup rather than loaded from a dataset.

Nov 6, 2019