Mark Jones

@mark0978·4 public vizzes

Population over the years

A horizontal bar chart displays the populations of the top 15 countries for a selected year, using data from the United Nations World Population Prospects 2019. A dropdown menu lets the viewer change the year, updating the bar lengths accordingly. The visualization uses React with D3 v5 scales (`scaleBand` and `scaleLinear`) to position bars and axes, and renders SVG elements for the chart. Population values are formatted using D3's `format` with SI prefixes, and each bar includes a tooltip showing the exact value.

Dec 7, 2019

Loading thumbnail…

Scatterplot

This scatterplot displays the relationship between miles per gallon and horsepower for vehicles in the auto-mpg dataset, loaded via d3.csv. The React component renders SVG circles for each data point using d3.scaleLinear for both axes. An interactive dropdown lets the user switch between years, though the code only changes state without filtering the visualized data. Axis components construct tick marks and labels, while the Marks component maps each row’s mpg and horsepower values to circle positions.

Dec 5, 2019

Loading thumbnail…

Scatterplot

This interactive scatterplot displays the top 15 most populous countries, with each circle representing a nation positioned by its population on the x-axis and country name on the y-axis. A dropdown menu lets the user select a year from 1950 to 2020, updating the population values across all circles. Built with React and D3 v5, the visualization uses `scaleLinear` and `scalePoint` for axes, while `csv` loads United Nations World Population Prospects 2019 data. SVG circles include tooltips via the `<title>` element showing formatted population values using D3's `format` function.

Dec 5, 2019

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with SVG shapes animates its eyebrows upward and back down. The example demonstrates fundamental DOM manipulation with D3.js, using `d3.select` to append a yellow circle, two eye circles, arc-based mouth and eyebrow paths, and a rectangular eyebrow. D3 transitions (`transition().duration(2000)`) animate the eyebrow group’s vertical position. The code imports `select` and `arc` from D3 v5, rendering to an SVG canvas with hard-coded dimensions.

Nov 26, 2019