gpfstuff

@gpfstuff·6 public vizzes

SLets make a face with D3.js

This example builds a cartoon face using D3.js and SVG, with layered geometric shapes for eyes, a nose, and a mouth. It demonstrates common SVG features like paths, strokes, and rounded line joins, styled via a separate CSS file. The face is drawn entirely with hardcoded coordinates inside an SVG element, and the code relies on D3’s selection and attribute methods to apply classes and styling. No data or interaction is involved; the focus is purely on static SVG composition and visual design.

Dec 5, 2019

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small embedded dataset, rendering the text “Honda” in large type. It demonstrates importing and parsing JSON data with `JSON.parse` and updating the DOM via `document.getElementById` in `index.js`. The page uses D3 v5 loaded from a CDN, but relies on plain JavaScript rather than D3-specific APIs for the visualization. The dataset contains five car records with year, make, model, and price fields.

Dec 2, 2019

Loading thumbnail…

Cars Report

This example displays a list of five used cars with their make, model, year, and price, extracted from an inline JSON array. The page renders the text “Hey there” in a large `<pre>` element by using D3 v5’s selection and DOM manipulation via `d3.select` and `.text()`. The data is imported as a JavaScript module from `cars.js`, while the HTML loads D3 from a CDN and references a bundled script.

Dec 2, 2019

Loading thumbnail…

Cars Report

This example demonstrates how to load and display a small dataset of used cars. It uses `cars.js` to define and export an array of five car objects, each with a year, make, model, and price. The main `index.js` imports this data and sets the text content of an HTML element with the ID `message-element` to a simple string, “Hey there,” which replaces the initial “Hello” text. The page is styled with a large font and built using D3 v5, though the visualization itself is limited to basic DOM manipulation via `document.getElementById` and `textContent`.

Dec 2, 2019

Loading thumbnail…

Cars Report

This example displays a simple text report from an array of car data, showing the make of the first car, a Honda, in a large `<pre>` element. The visualization loads D3 v5 and uses a static JSON dataset defined in `cars.js`, which is parsed with `JSON.parse`. The main logic in `index.js` imports the `cars` array and sets the text content of the HTML element via `document.getElementById`. It demonstrates basic data import and DOM manipulation without requiring any D3 data-joining or scales.

Dec 2, 2019

Loading thumbnail…

Cars Report

This example presents a simple web page titled “Cars Report” that displays the text “Hel World” in a large, preformatted style. The visualization is built using D3.js v5 and a custom JavaScript file (`index.js`), which sets the text content of the designated HTML element identified by the ID `message-element`. The page relies on an external stylesheet for styling. The data source is not visible; the report’s core function is to demonstrate a basic D3-based text output within a minimal HTML structure.

Dec 2, 2019