Nathan Cheever

Bowl of Fruit - General Update Pattern + animated transitions

This example demonstrates the general update pattern in D3.js, showing a row of fruit circles that dynamically appear, disappear, and change type (apple to lemon) over time. Using animated transitions with a one-second duration, the visualization smoothly handles enter, update, and exit states, including a key-based object constancy mechanism. The code relies on D3 selections, the `.transition()` API, and scaleOrdinal scales for color and radius mapping. The animation sequence is driven by timed JavaScript callbacks that modify the underlying data array.

Jan 4, 2020

Bowl of Fruit - General Update Pattern

This example demonstrates the D3 general update pattern by rendering a bowl of fruit as SVG circles that change over time. Using `d3.scaleOrdinal` for color and radius mapping, the `fruitBowl` function joins data to circle elements, handling enter, update, and exit selections with `.enter()`, `.merge()`, and `.exit().remove()`. Apples and lemons are distinguished by type, and timed interactions remove fruits or replace an apple with a lemon, showing how the visualization synchronizes DOM elements with changing data.

Dec 31, 2019

World population Area Chart!

This area chart visualizes global population growth from historical data, with the x-axis mapping years over time and the y-axis representing population counts. The chart uses a maroon filled area with a smooth basis curve, employing d3.scaleTime and d3.scaleLinear to map data dimensions, while d3.area generates the shape. Axis labels and tick formatting via d3.axisLeft and d3.axisBottom display population in billions. The data comes from a CSV file loaded using d3.csv, and the visualization is rendered as SVG.

Temperature in San Francisco Area Chart!

This area chart displays one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. Created with d3.v5, the visualization uses `scaleTime` and `scaleLinear` for the axes, while an `area` generator with `curveBasis` produces a smooth filled path. Data is loaded from a CSV file hosted on Vizhub, and the SVG rendering includes gridlines, axis labels, and a title.

Temperature in San Francisco Line Plot!

This line plot displays one week of temperature in degrees Celsius for San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a smooth path over SVG. Data is loaded via `csv` from a VizHub-hosted dataset, and axes include labeled ticks with gridlines. The chart includes a title and rotated axis labels, with styling applied through external CSS.

Temperature in San Francisco Plot!

This scatter plot visualizes one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. It uses d3.scaleTime and d3.scaleLinear to map the data to SVG coordinates, and d3.axisLeft and d3.axisBottom to render labeled axes with gridlines. Circles represent individual readings, styled with steel blue fill and opacity, while the title and axis labels are added as SVG text elements. The data is loaded via d3.csv from a remote dataset and parsed into Date and numeric values before rendering.

My Scatter Plot!

This scatter plot visualizes the relationship between ground living area and sales price for apartments, with each data point rendered as a semi-transparent green circle. The chart uses D3 v5’s `scaleLinear` for both axes, `extent` to compute domains, `axisLeft` and `axisBottom` for labeled axes with gridlines, and an SVG group to position the marks. Data is loaded from a CSV hosted on GitHub via `d3.csv`, with numeric conversion applied before rendering.

Cars Scatter Plot!

This scatter plot visualizes the relationship between horsepower and weight for cars, using data from the UCI Machine Learning Repository's Auto MPG dataset. Each red, semi-transparent circle represents a car, and the chart includes labeled axes, gridlines, and a title. The visualization is built with D3 v5, using `scaleLinear` for both axes, `axisLeft` and `axisBottom` for tick generation, and `csv` to load the data. SVG is the rendering method, with margins and inner dimensions calculated to position the plot elements.

Scatter Plot!

This scatter plot visualizes the top 10 most populous countries using a CSV data source. The code uses d3.scaleLinear for the x-axis (population) and d3.scalePoint for the y-axis (country names), with circles rendered as SVG elements. D3's axisLeft and axisBottom generators, along with custom tick formatting via d3.format, display the axes. The chart includes gridlines, labeled axes, and a title, all styled through external CSS.

Customizing Axes!

This example displays a horizontal bar chart of the top 10 most populous countries, using D3.js (v5) to render the visualization in an SVG. Population values are read from a CSV file and scaled with `scaleLinear`, while country names are mapped to the vertical axis using a band scale (`scaleBand`). The left axis is stripped of its default line and domain, and the bottom axis uses a custom tick formatter that abbreviates numbers and converts "G" to "B" for billions. Grid lines extend across the chart via a negative tick size, and the chart includes custom axis labels and a title.

Making a bar chart!

This bar chart displays the population of the top ten most populous countries, using steelblue bars ordered by country name on the y-axis. Built with D3 v5, the visualization employs `scaleLinear` for the quantitative x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for tick labels. Data from `data.csv` is loaded via `csv` and scaled by a factor of one thousand. The SVG output is rendered through a `g` element with manual margin-based translation.

Cars Report

This example demonstrates a text-based car report generated from five manually embedded car records, each containing year, make, model, and price. The page displays the report in a large `<pre>` element, listing only cars priced below 2000 dollars. The code uses JavaScript object destructuring in `formatCar.js` to format each entry, and `Array.filter` and `Array.map` in `generateReport.js` to process the data before joining results with newlines. The HTML sets the text content via `document.getElementById().textContent` using the bundled `index.js` module.

Dec 27, 2019

Let's make a face with D3.js!

A yellow circle with black outlines forms a smiling face, featuring two eyes, animated eyebrows, and an arc-shaped mouth. The code uses D3.js v5 to append SVG elements, including circles, rectangles, and a path generated with the `arc` generator. Eyebrows move vertically using chained `transition` calls, while the face’s structure relies on SVG grouping and translation transforms. The example demonstrates basic SVG rendering and animation techniques without external data.

Dec 27, 2019