SH

@Sven72·4 public vizzes

Let's make a face with D3.js!

A smiley face is drawn entirely with D3.js SVG elements, including a yellow circle for the head, two eyes, and an arc-based mouth. The example demonstrates fundamental DOM manipulation by appending and styling shapes, then animates the eyebrows with a chained `transition().duration()` that moves them up and down. It uses `d3.select` to target the SVG, `d3.arc` to generate the mouth path, and attribute setters like `.attr()` to position each component relative to a centered group. The animation runs once on load, with no user interaction.

Apr 18, 2019

Loading thumbnail…

Let's make a face

This example builds a face from scratch using SVG shapes and D3.js version 5, demonstrating basic selection and manipulation of SVG elements. The code logs the D3 object to the console and sets up a blank 960x500 SVG canvas with minimal styling. While the current implementation only initializes the visualization framework, it serves as a foundation for adding facial features programmatically. The example uses standard D3 selections and SVG coordinate systems, with the YouTube video embedded in the README providing additional context on the technique.

Apr 16, 2019

Loading thumbnail…

HTML Cars Report

This example demonstrates a simple static SVG composition of geometric shapes, including circles and rectangles, with some elements grouped and transformed. The visualization uses D3.js version 5 to draw the shapes, while the page layout and styling are handled by HTML and CSS. The rendered output is purely declarative SVG, with a red background and monospace font applied to the page. The code also imports a custom message from an ES6 module, though it is not visible in the final visualization. No data is loaded in this example.

Apr 13, 2019

Loading thumbnail…

HTML Cars Report

This example displays a simple, static cars report with a bulleted list of three used cars and their prices. It shows basic DOM manipulation and styling, where the highlighted list item appears in red against a dark background. The visualization uses D3 v5’s `select` API to set the text of a message div, while an ES6 module imports and exports a string for that message. Styling is handled through CSS with a Google Fonts import for Ubuntu, and the page structure is defined in plain HTML.

Apr 13, 2019