David Sjoberg

Temperature in San Francisco: line charts

This visualization shows the evolution of temperature in San Francisco over time with a line chart. The data is loaded from a CSV file using `d3.csv`, with timestamps parsed as dates and temperatures as numbers. The chart uses `d3.scaleTime` and `d3.scaleLinear` to map data to SVG coordinates, `d3.axisLeft` and `d3.axisBottom` for labeled axes with white gridlines, and `d3.line` with `curveBasis` to draw a smooth yellow path.

Nov 26, 2019

Temperature Ca

A week of San Francisco temperatures is shown as a scatter plot of daily readings, with time on the x-axis and temperature on the y-axis, using green semi-transparent circles. The chart is rendered in SVG with D3 v5, employing `scaleTime`, `scaleLinear`, and `scalePoint` (the latter unused). Axes are drawn with `axisLeft` and `axisBottom`, including grid lines and rotated axis labels. Data is loaded via `d3.csv` from a remote CSV file, and each timestamp is parsed into a `Date` object before plotting.

Cars: scatter plot

This scatter plot displays the relationship between horsepower and MPG for a dataset of cars. Each circle represents a car, with its position determined by the car's MPG on the x-axis and horsepower on the y-axis. The visualization uses D3 version 5, specifically the `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions, and renders as an SVG. Data is loaded from a CSV file using D3's `csv` method, and the plot includes labeled axes, a title, and grid lines.

Temperature in San Francisco: scatter plot

This scatter plot shows the evolution of temperature in San Francisco over time, with each point representing a daily measurement. The visualization uses a time-based x-axis and a linear temperature scale on the y-axis. The code leverages D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart, rendering circles as SVG elements with a semi-transparent gold fill. Data comes from a CSV dataset on VizHub, which is parsed and converted to appropriate date and numeric types before rendering.

Vega-Lite API Template

This example visualizes the relationship between engine displacement, horsepower, weight, and model year for the classic Auto MPG dataset. A scatterplot maps displacement to the x-axis and horsepower to the y-axis, with circle size encoding weight and color encoding year via Vega-Lite’s quantitative field mappings. The code uses the Vega-Lite API (`vl.markCircle`, `vl.x().fieldQ()`) to build the specification, registers it through `vega-lite-api` with vega-tooltip for interactive hover details, and loads CSV data with `d3.csv`. Styling is customized through a config object.

Books with Pages

This dot plot visualizes the page counts of nine books, sorted in descending order, with each book represented as a circle positioned along a linear scale. The chart uses D3 v5’s `scaleLinear` and `scalePoint` to map pages and book titles, while `axisBottom` and `axisLeft` render axes with custom tick formatting. Data is loaded from a CSV file, and SVG circles are appended to the visualization. The code removes scroll bars by adding `margin: 0px; overflow: hidden;` to the body in CSS.

Nov 24, 2019

Books with Pages

Nov 24, 2019

Books with Pages

This example displays a horizontal bar chart of nine books sorted by page count, with book titles on the y-axis and a linear pages scale on the x-axis. It uses d3.csv to load data, d3.scaleBand and d3.scaleLinear for positioning, and d3.axisLeft and d3.axisBottom with custom tick formatting. The bars are rendered as SVG rectangles with a steelblue fill, and the code removes default axis domains and gridlines. A CSS rule with overflow:hidden removes scroll bars from the body.

Nov 24, 2019

Let's make a face with D3.js!

This example uses D3.js v5 to construct an animated smiley face entirely with SVG elements. The face, eyes, and eyebrows are drawn using basic `circle` and `rect` shapes, while the mouth is created with the `arc` generator. Eyebrows move up and down through a recursive `transition` with `duration` and `on("end")` callbacks, and the mouth also transitions between arc shapes. The code demonstrates fundamental DOM manipulation and chained transitions with D3's selection API.

Let's make a face with D3.js!

This example uses D3.js v5 to construct a smiley face from scratch, with interactive eyebrows that move. It demonstrates fundamental DOM manipulation by selecting an SVG element and appending shapes such as circles and paths via D3’s `select`, `append`, and attribute-setting methods. The code relies on the `d3.min.js` library loaded from a CDN and renders entirely in SVG. Simple CSS sets the page margin and hides overflow, while a bundled JavaScript file drives the facial features’ static and animated properties.

Cars Report

The Cars Report demonstrates a data-processing pipeline that filters a static JSON array of five used cars by price and formats the results into a text report. A loading message appears until a two-second delay resolves a Promise from `getCars`, then `generateReport` uses array methods `filter` and `map` with the `formatCar` helper to produce lines like “2000 Honda Accord: $2805”. The example highlights JavaScript object destructuring, ES modules, and asynchronous flow, with output rendered into a `<pre>` element via the DOM API.

Cars Report

This example demonstrates how to generate a text-based report of cars filtered by price, displaying only vehicles under $2,000. It uses JavaScript modules and promises to load and process data asynchronously. The code relies on `JSON.parse` to convert embedded car data, `Array.filter` and `Array.map` to transform the data, and `Promise` with `setTimeout` to simulate a delayed API response. The report is rendered into an HTML `<pre>` element using the `textContent` property.