benroston

@bhroston·3 public vizzes

Let's make a face with D3.js!

This example visualizes a population bar chart using D3.js, drawing each country as a rectangle scaled by its population data from a CSV file. It uses `d3.csv` to load the data, `d3.scaleLinear` and `d3.scaleBand` for positioning, and `d3.axisLeft` and `d3.axisBottom` to render axes. Bars are appended as SVG rectangles in steel blue, with all rendering handled in the browser via SVG.

Apr 30, 2023

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report generated from a hardcoded JSON array of four cars with attributes for year, make, model, and price. It filters the cars to show only those priced under $2,000, using a local ES6 module (`generateReport`) that maps and joins the formatted strings. The code loads D3 via UNPKG for general use, but the report itself relies on native JavaScript promises and `setTimeout` in `getCars` to simulate asynchronous data fetching, then updates the DOM by setting the `textContent` of an HTML `<pre>` element.

Apr 29, 2023

Loading thumbnail…

Shapes with SCG and CSS

This example shows how basic SVG shapes—circles, rectangles, lines, and paths—are styled and transformed directly in an HTML document using D3’s `select` method alongside plain CSS. The visualization demonstrates static geometric composition with fills, strokes, and grouped transformations like `scale` and `translate`. The code uses D3 version 7 for a simple text insertion, while styling comes from an external stylesheet that defines line and path appearance. No interactive behavior or data binding is present; the focus is purely on rendering and CSS-based presentation of vector graphics.

Apr 29, 2023