Jonathan Phelps

@jphelps13·15 public vizzes

Lets make a map with D3.js

This example shows a world map rendered as an SVG using D3.js v5 and TopoJSON. It loads world country boundaries from the world-atlas package and converts the TopoJSON to GeoJSON with the `feature` function, then draws the map with `d3.geoPath`. The visualization is minimal, with a 960-by-500 viewport and hidden page margins, and demonstrates the basic pipeline of fetching geographic data and projecting it onto the screen.

Jan 29, 2020

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples sit in a row, rendered as colored circles with D3's `scaleOrdinal` mapping types to fill and radius. Hovering a fruit selects it with a black stroke in an animated SVG scene, while the menu updates through `selection.on`. A background timer script mutates the data array over time, adding a lemon, removing fruit, and letting the `transition` API animate shape changes at one-second intervals.

Jan 29, 2020

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG, with apples in red and lemons in yellow. Clicking any fruit selects it, applying a black stroke. The visualization uses D3 v5 data joins with enter, update, and exit transitions to animate apples being eaten, a lemon replacing an apple, and the removal of a selected apple. The `fruitBowl` module leverages `scaleOrdinal` for color and radius mapping, and `.on('click')` handlers trigger re-renders with updated fruit data.

Jan 29, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern - Grouped

A bowl holds a group of apples that change over time through a general update pattern. Fruits are added, removed, and transformed, with an apple turning into a lemon. Each fruit is a circle with a label, colored by type. The visualization uses d3.select, data binding with keys, and transitions with duration to animate circle radii shrinking and growing. The bowl is drawn as a rectangle with rounded corners.

Jan 29, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern

Five circles representing apples animate into a bowl-like arrangement using D3's general update pattern. The visualization demonstrates enter, update, and exit selections as apples are removed and one is replaced by a lemon, with color and radius scales mapping fruit type to visual properties. Using D3 v5, transitions animate the circles' position and radius over one second, while the exit selection shrinks removed circles to zero before deletion.

Jan 29, 2020

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart shows global population growth from 1950 to 1957, with the y-axis displaying population in billions and the x-axis showing years. The visualization uses D3 v5’s `csv` loader to parse the dataset, then applies `scaleTime` and `scaleLinear` to map data to screen coordinates, while the `area` generator with `curveBasis` creates the smooth, filled region beneath the line. The SVG rendering includes custom axes via `axisBottom` and `axisLeft`, formatted ticks using `format`, and a title overlaid on the chart.

Jan 21, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays temperature readings in San Francisco over a week in March 2015. The visualization uses a smoothed path to show the temporal trend, with time on the x-axis and temperature on the y-axis. The chart is rendered as an SVG using D3 v5, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis`. Data is loaded from a remote CSV file containing hourly timestamp and temperature values.

Jan 21, 2020

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes hourly temperature measurements in San Francisco over a week, with time on the x-axis and temperature on the y-axis. Each steel-blue circle represents one hourly reading, revealing daily temperature cycles and overall trends. The visualization uses D3 v5’s `select`, `csv`, `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` functions to load data from the external CSV file, scale the axes, and render an SVG plot with grid lines, axis labels, and a title.

Jan 21, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The visualization uses D3 v5's `scaleLinear`, `axisLeft`, and `axisBottom` to map the numeric values and render axes, while circles are appended to an SVG and styled with a steelblue fill and opacity. The data is loaded as CSV from an external URL, and the chart includes labeled axes and a title, with margins and tick formatting applied via D3's `format` and CSS classes.

Jan 17, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top five most populous countries, using circular marks scaled along a linear x-axis. It ranks countries on a categorical y-axis using `d3.scalePoint`. The visualization is built with D3 v5, renders to SVG, and loads population data from a local CSV file. Axis ticks and titles are formatted using `d3.axisLeft`, `d3.axisBottom`, and `d3.format`.

Jan 17, 2020

Loading thumbnail…

Customising Axes

This bar chart displays the populations of the top five most populous countries, scaled linearly along the x-axis and categorically along the y-axis using a band scale. It uses custom axes: the y-axis labels are enlarged via CSS, the x-axis tick marks extend across the chart, and population values are formatted as billions using d3.format. The chart is rendered as SVG from a CSV file, with axis titles and a chart header added as text elements, using d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom.

Jan 17, 2020

Loading thumbnail…

Making a Bar Chart

This horizontal bar chart displays the population of the top 10 most populous countries, with data from the UN World Population Prospects. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to bar widths and country names to y-axis positions. Bars are rendered as SVG `rect` elements with a steelblue fill, and the data is loaded from a CSV file using D3's `csv` function.

Jan 17, 2020

Loading thumbnail…

Lets make a face with D3.js

This example creates a cartoon face using D3.js v5, with a purple circular head, two eyes, eyebrows, and a smiling mouth rendered as SVG shapes on an 960×500 canvas. The face is centered using a grouped `<g>` element, and animated eyebrow movements are achieved by chaining `transition().attr()` calls over two-second durations. The code leverages D3’s `select` and `arc` APIs to construct the mouth path, while raw SVG attributes set dimensions and positions. The animation demonstrates D3’s ability to smoothly interpolate SVG transform attributes.

Jan 16, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example uses SVG and CSS to draw a geometric composition of overlapping circles and rectangles. The shapes are rendered in two groups: one with translucency and default styling, and a second with black outlines and thicker strokes, demonstrating CSS class-based styling for lines and paths. The code uses raw SVG elements like `rect`, `circle`, `line`, and `path` within a React render, with transforms for scaling and positioning, and a stylesheet defining stroke colors and widths.

Jan 16, 2020

Loading thumbnail…

React Starter

This example demonstrates asynchronous data loading in a React application. It displays a loading message while fetching car data, then renders the first car's make model after a simulated two-second delay. The visualization uses React 16.10 and ReactDOM, with data parsed from an JSON string in getCars.js via `JSON.parse`. A React component updates a pre-element through DOM manipulation, showing how to integrate async data fetching with state updates and conditional rendering in a minimal React setup.

Jan 16, 2020