PatrickHennessey

@PatrickHennessey·5 public vizzes

Let's make a face with D3.js!

A smiley face is drawn as an SVG graphic, with animated eyebrows that move up and down. The example demonstrates fundamental DOM manipulation with D3.js by selecting an `svg` element and using the `arc` generator from the `d3` module to create the face’s shapes. The code reads the SVG’s height and width attributes via `attr` and parseFloat, and browses over a simple dataset to bind elements. Rendering uses SVG paths, with styles applied through an external stylesheet that hides page overflow.

Oct 31, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example creates a yellow smiley face from SVG primitives, then animates its eyebrows with a chained transition. Using D3.js v5, it selects the SVG, appends a centered group, and draws the face with circles, rectangles, and an arc-generated mouth. The `transition().duration()` calls move the eyebrow group upward and back, while `d3.arc` builds the mouth path from radius and angle parameters.

Oct 31, 2019

Loading thumbnail…

Cars Report

This example displays a report of cars filtered by a maximum price, listing each car’s year, make, model, and price as plain text. It uses D3.js v5 to update the HTML content and JavaScript ES6 modules to load a hardcoded JSON dataset via a simulated asynchronous `Promise` and to generate the report with `generateReport` and `formatCar`. The page styling is handled with CSS, including a dark background and Ubuntu font.

Oct 29, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shape creation and styling through both inline attributes and CSS classes. It shows circles, rectangles, lines, and a polygonal path positioned with SVG transform groups. The code uses native SVG elements inside an HTML document, with a linked stylesheet defining stroke and fill properties for grouped elements. A parent group applies a scale transform, while nested groups use translation to offset shapes, and the `.lines` class controls stroke appearance for the path and line elements.

Oct 22, 2019

Loading thumbnail…

Cars Report

This example reads a hard-coded array of car objects and prints the greeting “Hello Momma” to a page. The visualization uses D3 v5’s `select` method to target a `<pre>` element, while the text is set via direct DOM manipulation with `document.getElementById` and `textContent`. The page’s styling relies on an external Ubuntu font and a green background from CSS. The code also demonstrates ES6 module syntax through the imported `message` variable in `myMessage.js`.

Oct 21, 2019