John Hamilton Bradford

@JohnBradford·12 public vizzes

Population by Age and Race

This horizontal bar chart displays the total population for the ten most populous countries, with bars ranked by population size. The visualization uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, renders as SVG, and loads data from a CSV file via `csv`. Axes are generated with `axisBottom` and `axisLeft`, and tick labels are formatted using `format`. The chart also includes a title and axis label.

Dec 20, 2018

Loading thumbnail…

Customizing Axes of Bar Chart

This example shows a horizontal bar chart ranking the top 10 most populous countries, drawn as SVG rectangles scaled by population values loaded from a CSV. It demonstrates customizing axes: the y-axis uses `d3.scaleBand` with tick lines removed, while the x-axis uses `d3.scaleLinear` with a `d3.axisBottom` that applies a custom tick formatter (converting abbreviations like “B” for billion) and negative tick sizes to create gridlines. The chart also adds axis labels and a title via SVG text elements, using D3 v5’s `select`, `csv`, and `scaleBand` APIs.

Oct 30, 2018

Loading thumbnail…

Bowl of Fruit - Update Pattern

Five dark red apples appear in a row inside an SVG canvas. After one second, D3’s enter/exit update pattern removes the last apple, shrinking the row to four circles. The code uses `selection.data()` to bind a fruit array, then explicitly appends circles on enter and removes them on exit, with the array modified via `pop()` and re-rendered.

Oct 27, 2018

Loading thumbnail…

World Population Area Chart

A World Population area chart displays global population growth over time, using a filled path to emphasize changes in magnitude. The visualization loads data from a CSV file and renders it as SVG, with time on the x-axis and population on the y-axis. The chart uses d3.area with curveBasis for smooth shading, d3.scaleTime and d3.scaleLinear for axes, and d3.axisBottom and d3.axisLeft for ticks. Population values are formatted from billions to a compact label.

Oct 26, 2018

Loading thumbnail…

Temperature Area Chart

This visualization shows a week of temperature readings in San Francisco, displaying the data as a smooth, filled area chart over time. The chart includes labeled axes for time and temperature, with the area fill rendered in maroon. The code uses D3 v5 APIs including `d3.area`, `d3.curveBasis`, `d3.scaleTime`, `d3.scaleLinear`, and the axis generators `d3.axisLeft` and `d3.axisBottom`. Data is loaded from a CSV file hosted on VizHub, and the visualization is rendered as SVG within an HTML page.

Oct 26, 2018

Loading thumbnail…

Temperature Line Graph

This line chart shows a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for the path, and `axisBottom` and `axisLeft` for labeled ticks. It reads CSV data via `d3.csv`, renders as SVG, and includes a rotating y-axis label and a titled header.

Oct 26, 2018

Loading thumbnail…

Temperature Scatterplot

This scatterplot visualizes a week of temperature readings in San Francisco, plotting time on the x-axis against temperature on the y-axis. The D3.js code uses `axisBottom` and `axisLeft` to create grid-lined axes with labels, while `scaleTime` and `scaleLinear` map the data. The data comes from a CSV file in the example's repository.

Oct 25, 2018

Loading thumbnail…

Cars Scatterplot

This scatterplot displays the relationship between horsepower and weight for a dataset of cars, with each point representing a single vehicle. The visualization uses D3 v5 to load CSV data, create linear scales with `d3.scaleLinear`, and render SVG circles with opacity. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, complete with tick marks and custom axis labels, while a title appears at the top. The chart’s dimensions are set via SVG attributes, and the data is sourced from an external CSV file.

Oct 25, 2018

Loading thumbnail…

Scatterplot

This scatterplot displays the population of the ten most populous countries, with each circle positioned along a linear population axis and a point scale for country names. The visualization loads data from a CSV file, parses population values, and renders an SVG using D3 v5. It employs `scaleLinear`, `scalePoint`, `axisBottom`, `axisLeft`, and `format` for tick labels, converting 'G' to 'B' for billions. Grid lines extend across the plot, and a title annotates the chart.

Oct 25, 2018

Loading thumbnail…

Making a bar chart

A horizontal bar chart shows population sizes for ten countries, with bars ordered alphabetically by country name and colored steelblue. The visualization loads data from a CSV file using `d3.csv`, converts population values to numbers, and scales the bars with `d3.scaleLinear` and `d3.scaleBand`. Axes are rendered with `d3.axisLeft` and `d3.axisBottom` inside an SVG container. The code imports specific D3 v5 functions and manually appends rectangles to represent each bar.

Oct 24, 2018

Loading thumbnail…

Starting Viz - Smiley Face

A yellow smiley face is drawn in the center of an SVG canvas, featuring a circular head, two eyes, animated eyebrows, and a curved mouth created with a D3 arc path. The code uses d3.select, d3.arc, and SVG circle, rect, and path elements, with transitions that move the eyebrow group vertically over two seconds. No external data is used; the visualization is constructed purely from hardcoded attributes within an index.js file, and an ES6 module exports a message variable.

Oct 23, 2018

Loading thumbnail…

highschool

This visualization maps the high-school dropout rate for 18–24-year-olds across Mississippi counties. A point on the map represents each county, positioned by its FIPS code and shaded by the proportion of young adults who have dropped out, revealing clear regional clusters of higher and lower educational attainment. The chart uses a geographic layout to show how the dropout rate—ranging from under 5% in university counties like Oktibbeha and Lafayette to over 38% in Issaquena County—varies across the state. A dropdown or tooltip interaction allows readers to explore county-level values (e.g., population and dropout counts), while the color scale makes high- and low-risk areas immediately visible. The map emphasizes spatial inequality in educational outcomes within Mississippi, and invites questions about socioeconomic and policy drivers behind the patterns.

Sep 18, 2017