David Peters

@dave-peters·4 public vizzes

SVG Face

A simple SVG face consists of a yellow circle centered on a light gray background, outlined with a thick black stroke. The face is drawn statically using SVG’s `circle` element with hard-coded coordinates for its center and radius, inside an inline `<svg>` tag. The body’s margin is reset, and the page is set to hide overflow to isolate the graphic. The rendering approach is pure SVG, using no JavaScript libraries or data sources; the script defines dimensions but does not influence the drawing.

Jun 20, 2020

Loading thumbnail…

Hello VizHub!

This example demonstrates a minimal D3.js visualization that displays the text “Hi Dave” on a dark, centered webpage. The code imports D3’s `select` function and a local ES6 module, `dpMessage.js`, to retrieve the string, then sets the content of a `#message` div via `select('#message').text()`. Styling uses an external `styles.css` with the Ubuntu font and large font size.

Sep 5, 2018

Loading thumbnail…

title is Hello Dave!

This example displays the genus and species of the first vegetation record from a hardcoded JSON dataset, rendering the text "Eucalyptus tenuiramis" on a dark page using an HTML `<pre>` element. The visualization loads data from an ES6 module (`vegJson.js`) that parses an embedded JSON string, then accesses the first object’s properties via `vegData[0]`. The page styling uses a custom font and CSS color scheme, while the JavaScript relies solely on standard DOM manipulation through `document.getElementById`, with no external libraries beyond the foundation of D3 v5 included in the HTML.

Sep 4, 2018

Loading thumbnail…

Hello wtf VizHub !

This example shows a simple web page that displays a personalized greeting message. The page renders the text "Hello Dave VizHub!" centered on a dark background with light, Ubuntu-font styling. The code uses D3.js version 5.5 through the `select` API to target the HTML element and set its text content, while an ES6 module exports the message string. The example demonstrates basic D3 DOM manipulation and module organization.

Sep 4, 2018