Arcy Flores

@ArcyFlores·4 public vizzes

Let's make a face with D3.js!

A smiling face rendered in SVG uses D3.js selection methods to append and position circles, rectangles, and an arc-based mouth. The eyes and eyebrows are grouped and translated, with D3 transitions animating the eyebrow group upward and back over two seconds. The animation repeats once, moving the eyebrows through a vertical range to create a surprised expression. D3's `select`, `arc`, and chained `transition` and `attr` methods drive the DOM manipulation, while the page loads D3 v5 from a CDN.

Oct 17, 2019

Loading thumbnail…

D3 Experimentation

This example demonstrates a minimal SVG canvas populated programmatically with D3 v5, using a blank 960×500 space where elements are appended via `d3.select` and `selection.append`. The page imports D3 from a CDN and bundles custom logic in `index.js`, though only a single empty `svg.append()` call is visible in the source. Styling removes all margins and hides overflow, creating a full-viewport effect. The work serves as a starting point for exploring SVG and D3’s selection and manipulation methods, with a linked video explaining the broader experimentation process.

Oct 17, 2019

Loading thumbnail…

Cars Report

This example demonstrates how to generate a text-based report of cars filtered by price. It displays a list of vehicles under $2,000, formatted with year, make, model, and price, after showing a “Loading...” message. The code uses JavaScript modules with ES6 import/export syntax, `JSON.parse` to read embedded car data, a `Promise` with `setTimeout` to simulate an asynchronous API call, and `Array.filter` with `Array.map` for data processing.

Oct 16, 2019

Loading thumbnail…

Cars Report

This visualization displays a plain-text report of car data stored in a JavaScript array of objects. The report extracts the first car's make—Honda—and writes it into an HTML element, showing a minimal example of data access and DOM manipulation. The data originates from an embedded JSON string in the cars.js file, and the code uses the native `JSON.parse` method to convert it into a usable array. The example relies on the D3 library (version 5) loaded via its standard CDN, though it primarily demonstrates basic JavaScript object destructuring and the `textContent` property for updating the interface.

Oct 16, 2019