jrdieter15

@jrdieter15·3 public vizzes

Making a bar chart

This example shows a bar chart of country populations using a static CSV dataset loaded with `d3.csv`. The bars are drawn as SVG rectangles within a fixed 960×500 viewport, with population values converted from thousands to absolute numbers via a `+` unary operator. The chart relies on D3 v5’s `select` and `csv` functions to fetch and parse the data, while the rendering is handled entirely through SVG elements created without scales or axes, leaving the raw data values to determine bar heights.

Jul 24, 2020

Loading thumbnail…

Let's make a face with D3.js

A yellow circle becomes a cartoon face in an SVG. D3.js v5 appends circles for the head and eyes, and a path for a mouth, using `d3.arc` to generate the smile. The React starter code imports car data but does not use it here. Rendering targets a static SVG selected via `d3.select`, with attributes set for position, radius, and fill.

Jul 24, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example displays primitive SVG shapes—circles, rectangles, and a line—statically rendered on an 960×500 canvas. It uses React to import and parse a local `cars.js` JSON dataset, though the data itself is not visually mapped to the shapes. The SVG elements are styled with inline attributes like `fill` and a linked `style.css` that sets body margins and overflow. A separate `index.js` module writes a “Hello world” message into the DOM, while the shapes remain fixed without interaction or data binding.

Jul 21, 2020