Oliver Wills

Cheap Tricks for Interaction

This example shows a natural Earth projection world map with country boundaries rendered as SVG paths, featuring hover highlighting and zoom/pan interaction. The visualization loads world-atlas TopoJSON data and TSV country names, using d3.geoNaturalEarth1 and d3.geoPath to project and draw the geography. A d3.zoom behavior applies transform events to the map group, while CSS hover styles change country fill to red. Each country path includes a title element that displays the region name on mouseover, combining simple styling with d3’s event-driven transforms for an interactive globe.

Cheap Tricks for Interaction

This example demonstrates a world map with interactive pan and zoom, using a natural Earth projection rendered as SVG. Country boundaries are drawn from TopoJSON data enriched with names from a TSV file, and hovering highlights individual nations in red. The implementation relies on D3 v5 features including `d3.zoom`, `d3.geoPath`, and `d3.geoNaturalEarth1`, with the map contained in an SVG group that responds to zoom transforms. Tooltips are provided through SVG `<title>` elements.

Making a map with D3.js!

This example uses D3.js to render a world map from the world-atlas dataset. The visualization draws all countries as green SVG paths with a black stroke on a steelblue background, using a Mercator projection. The code leverages `d3.geoPath` with `d3.geoMercator` to generate the geographic outlines, and the `topojson` library’s `feature` function to convert TopoJSON data into GeoJSON features. A single path for the entire sphere is added first, followed by individual country paths.

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3 with special cases, showing a bowl of fruit that changes over time as apples are eaten and replaced with lemons. The visualization uses D3 v5’s data joins (`selection.data`, `.enter`, `.exit`) to manage SVG circles and text elements, with `scaleOrdinal` mapping fruit types to colors and radii. A rect represents the bowl, and each fruit’s position is computed via index-based translations. The code sequences updates using `setTimeout`, illustrating how enter, update, and exit selections handle modifications to the data array.

World Population By Year 2015

This area chart shows the growth of world population over time, using data from a CSV file. The visualization uses D3 version 5’s `scaleTime`, `scaleLinear`, `area` generator, and `curveBasis` to render a smooth, filled path. The y-axis labels are formatted with D3’s `format` function to abbreviate values, and the chart includes a title, axis labels, and a blue, semi-transparent area. Data is loaded via D3’s `csv` function, and the SVG is rendered with a fixed width and height.

Cars Scatter Plot

This visualizes temperature in San Francisco over time, with time on the x-axis and temperature on the y-axis, using D3 v5 to render an area chart in SVG. The code loads CSV data from the UCI Machine Learning Repository, parses timestamps and numeric temperatures, and applies scales, axes, and a curve basis. It uses D3’s `scaleTime`, `scaleLinear`, `area`, `axisBottom`, `axisLeft`, and `extent` to generate the chart with labeled axes and a title.

Cars Scatter Plot

This visualization renders a line chart of temperature in San Francisco over time, using data from a CSV file hosted on VizHub. The code employs d3.csv to load the dataset, d3.scaleTime and d3.scaleLinear for the axes, and d3.line with curveBasis to draw a smooth red path representing temperature trends. The SVG graphic includes labeled axes, tick marks, and a title, with styling applied through CSS. The chart updates from time-series data parsed into JavaScript Date objects and numeric temperature values.

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each point representing a vehicle. It uses D3 v5 scaling functions and axes to map the values. The code loads data from a CSV file, parses numeric fields, and renders circles in SVG. Custom axis formatting and tick sizes are implemented using `scaleLinear`, `extent`, `axisBottom`, and `axisLeft`.

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates how to customize D3 axes, including removing the default domain lines, adjusting tick sizes, and applying custom tick formatting to convert values like "G" to "B" for billions. It uses `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.scalePoint`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG graphic, with circles positioned by the scaled population and country data.

Making a barchart

A horizontal bar chart displays population figures for major global cities, sorted alphabetically by city name. The visualization uses D3 v5 with SVG rendering to draw steel-blue bars whose widths represent each city's population value. It employs `d3.csv` to load the data, `scaleLinear` and `scaleBand` for positioning, and `axisBottom` with a custom tick formatter that abbreviates numbers using SI prefixes converted from G to B. The chart includes a title and removes extraneous domain lines from the categorical y-axis.

Shapes with SVG and CSS

This example shows how basic SVG shapes combine with CSS styling to create a layered, static composition. It demonstrates circles, rectangles, and a polyline path within a transformed group, with one group filled red and stroked black. A separate group class applies black strokes to lines and a blue stroke with round joins to paths. The page uses raw SVG elements and an external CSS file, with no JavaScript libraries, to illustrate direct styling and transformation techniques.

Cars Report

This example demonstrates a simple text-based report of car listings, filtering and formatting data to display each car’s year, make, model, and price. It uses JavaScript modules with `export` and `import` statements, a `Promise` with `setTimeout` to simulate asynchronous data fetching, and the `JSON.parse` method to load embedded car data. The report is generated by chaining `filter`, `map`, and `join` array methods, with results rendered into an HTML `<pre>` element.

React Starter

This example renders the text “Hello React!” centered on the page using a React functional component. The `App` component returns a `<div>` with the message styling defined in the `index.html` stylesheet. ReactDOM’s `render` method mounts the component to the `#root` element, while the UMD builds of React 16.10.0 and ReactDOM are loaded from unpkg. The visualization demonstrates a minimal setup for integrating React with a plain HTML page, relying solely on React’s component-based rendering rather than any data or interactive features.

HTML Starter

This example displays a bare minimum HTML page containing only the text “Hello HTML.” It uses no external libraries or data sources, relying solely on the browser’s built-in handling of standard HTML elements. The code defines a minimal document structure with a head and body, demonstrating the fundamental starting point for any web-based visualization or application. It serves as a baseline for comparing the additional complexity introduced by frameworks like React.

HTML Starter

This example demonstrates a minimal HTML page that renders the text “Hello HTML” in the center of the screen. The page uses plain HTML with inline CSS to set the body’s text alignment and an oversized font size of 13em. The styling is applied directly within the `<style>` tag in the document’s head, and no external libraries or JavaScript are used. It serves as a bare-bones starting point for creating web-based visualizations, showing the simplest structure of an HTML document with visual styling.