Tim

@tvhahn·5 public vizzes

Making a Bar Chart

A horizontal bar chart displays the top 10 most populous countries, with population values in millions. The chart uses D3 v5 (via the `d3` object) and SVG rendering. The code loads data from `data.csv`, scales the population values by 1000, and uses `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. It generates axes with `axisLeft` and `axisBottom`, applies a tick formatter converting G (giga) to B (billion), and removes default domain lines.

Oct 4, 2019

Loading thumbnail…

Let's make a face with D3.js (v2)!

A yellow smiley face is drawn with SVG, featuring circles for eyes and a mouth created with d3.arc. Its animated eyebrows, rendered as rectangles, rise and fall repeatedly via chained transitions on the transform attribute. The example demonstrates fundamental DOM manipulation with d3.select and d3.append, using d3.v5 to build the shape from geometric primitives.

Oct 1, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—rendered with inline attributes and CSS styling. The SVG canvas uses a scale transform, while grouped elements apply translations and shared fill, stroke, and stroke-width properties. CSS classes control line appearance and path corners, highlighting the interplay between presentation and structure. The code relies directly on SVG markup and CSS rules, with no external libraries, and serves as a baseline for understanding shape composition.

Sep 27, 2019

Loading thumbnail…

HTML Cars Report

This example shows a simple HTML cars report listing three used vehicles with their model years, makes, and prices. The page uses a plain HTML unordered list to display the car entries, with the first item, a 2012 Nissan Leaf, highlighted in red text via a CSS class. The document is styled using an external stylesheet that sets a large monospace font for the body. No JavaScript libraries or data-visualization APIs are present; the rendering relies solely on HTML elements and CSS rules. The example demonstrates fundamental web technologies, including HTML structure, CSS styling, and class-based selectors, to create a minimal, readable report.

Sep 27, 2019

Loading thumbnail…

Cars Report

This example demonstrates how to load and display a list of cars with their details using asynchronous JavaScript and modular code. It first shows a static report of vehicles priced under $2,000, formatted with their year, make, model, and price, after a simulated two-second delay from a promise-based data source. The implementation uses ES6 modules (`import`/`export`), `JSON.parse` for embedded data, and string template literals to generate the output. The page is styled with a custom Ubuntu font and a dark blue background, with results presented in a `<pre>` element.

Sep 27, 2019