mwhiten

@mwhiten·4 public vizzes

Making a Bar Chart

This example shows a static bar chart where each bar's height is fixed at 300 pixels, and its width represents the population data from a CSV file. The D3.js v5 code loads the data using `d3.csv`, converts the population values from thousands to raw numbers, and then appends rectangular SVG elements to the canvas. The chart does not scale the bars based on the data values, as the bars are rendered with constant dimensions.

Dec 4, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face in SVG using D3.js v5, with a yellow circle for the head, two eyes, and an arc-shaped mouth drawn via `d3.arc()`. The eyebrows are rectangles that animate up and down repeatedly using chained `transition().duration()` calls, creating a winking or surprised effect. The entire face is centered by translating a group element to the middle of an 800×400 SVG canvas, with dimensions read from the SVG attributes and hard-coded offsets for facial features.

Dec 4, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates simple geometric shapes rendered as scalable vector graphics. It shows three distinct SVG primitives: two circles of varying radii and positions, and one rectangle with specified dimensions, all placed on a 960 by 500 canvas. The visualization employs inline SVG elements defined directly in the HTML markup, with styling attributes like `fill` applied to alter the appearance of individual shapes. The accompanying CSS file links to the document to provide additional presentational rules. The example serves as a basic illustration of how to construct graphics using native SVG syntax within a web page.

Dec 4, 2020

Loading thumbnail…

Cars Report

The Cars Report is a simple React-based example that displays the text "Hello" on a webpage, using a pre-formatted HTML element for large, readable output. It loads a static dataset of five car records (including year, make, model, and price) from a JavaScript file via `JSON.parse`, though the data itself is not visually rendered. The app uses plain DOM manipulation through `document.getElementById` to set the text content, with all layout handled by inline CSS in the HTML. The visualization demonstrates a minimal React integration with external data, without any charting or graphics libraries.

Dec 2, 2020