+/+

@nomadicamericanlabs·6 public vizzes

Untitled

A horizontal bar chart displays the population of the ten most populous countries, with values scaled by one thousand. The visualization uses D3 version 6's `scaleLinear` and `scaleBand` to map population counts to bar widths and country names to vertical positions. Data is loaded from a CSV file and rendered as SVG rectangles within a chart area offset by specified margins.

Dec 27, 2020

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how to build a cartoon face using D3.js v6, composed of basic SVG shapes: a yellow circle for the head, two small circles for eyes, rectangles for eyebrows, and an arc-based path for the mouth. The page centers the face within an SVG, and a transition animates the right eyebrow moving upward over two seconds. The code imports `select` and `arc` from the D3 library, uses `svg.append` to construct elements, and applies a transition with a 2000-millisecond duration. No external data is involved; it is purely a programmatic SVG rendering exercise.

Dec 19, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic SVG shapes—circles, rectangles, lines, and a path—positioned on a 960-by-5001 canvas and scaled by a factor of 1.5. The shapes are styled using both inline presentation attributes like `fill` and `stroke`, and external CSS classes such as `.lines` and `.highlighted`. CSS rules set stroke color, width, and line-join properties for the path and lines, while a group applies teal fill and black stroke to its contained shapes.

Dec 8, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML cars report listing three vehicles with their prices, emphasizing one entry in red through a CSS class. The page uses plain HTML markup, a monospace font set in `styles.css`, and the `highlighted` class to style the first list item. It renders static text structured in an unordered list, with no interactive visualization or external libraries beyond basic HTML and CSS.

Dec 2, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple car report generator that filters a hardcoded JSON dataset of five vehicles by maximum price and displays the results as formatted text. The app begins with a loading message, then uses the `getCars()` function to simulate a two-second asynchronous fetch via a `Promise` and `setTimeout`. Once resolved, the `generateReport()` function chains `filter()` and `map()` to select cars under $2,000, formats each entry using `formatCar()` to produce strings like “2009 Ford F150: $1950”, and joins them with line breaks into the `message-element` of the page. The code uses standard JavaScript APIs (ES6 modules, `Promise`, `JSON.parse`) without additional visualization libraries.

Dec 1, 2020

Loading thumbnail…

Cars Report

This example displays a static text message, “Ive had enough,” rendered inside an HTML `<pre>` element. The visualization is a minimal demonstration of a D3 version 6 setup, where `index.js` imports car data from `cars.js` as a JSON array but does not use it for any graphical output. The code relies on standard DOM manipulation via `document.getElementById` to inject the message, while the bundled JavaScript is loaded through `bundle.js`. No chart, axes, or interactive elements are present; the example purely showcases a basic project structure for future D3 development.

Nov 22, 2020