AdamFrankWhite

@AdamFrankWhite·6 public vizzes

Stockport Temperature Line Chart, using D3.js

This line chart visualizes hourly temperature readings in Stockport over several days in February and March 2020, showing the fluctuating warmth and cold. The chart is rendered as an SVG element using D3.js, with data loaded from a CSV file. The visualization uses `scaleLinear` and `axisBottom`/`axisLeft` for axes, and plots the temperature values as points connected by a line, with a green border styling the SVG.

Mar 5, 2020

Loading thumbnail…

Comparing Car Stats, using D3.js

This visualization compares car statistics by plotting miles per gallon (mpg) against horsepower for 32 car models. Each car is represented as a circle on a scatterplot, with axis labels and gridlines provided by D3’s `axisBottom` and `axisLeft` functions. The data comes from a CSV file, parsed with `d3.csv`, and rendered as an SVG using `d3.scaleLinear` for both axes. The cars are sorted by horsepower, and the circles are styled with steelblue fill and opacity.

Mar 5, 2020

Loading thumbnail…

Unemployment rate by Country Scatter Plot (UN Stats), using D3.js

This scatter plot displays the unemployment rate for countries in 2019, with each point positioned by unemployment percentage on the x-axis and country name on the y-axis. The visualization uses D3.js to load the CSV data, filter for the relevant year and series, and render the chart as an SVG. It applies `scaleLinear` and `scalePoint` for axes, and `axisBottom` and `axisLeft` to generate tick marks, with filtered data sorted by value before plotting.

Mar 5, 2020

Loading thumbnail…

HTML Starter

This example displays the text "Hello HTML" centered on a blank page, demonstrating the minimal structure required for a functional web page. The code uses a basic HTML document with a `<style>` block to set the body’s text alignment and font size, and the content is rendered directly in the `<body>` element. It serves as a starting point for creating visualizations without external libraries or frameworks.

Mar 5, 2020

Loading thumbnail…

Pupil-Teacher Ratio by Country (UN Stats), using D3.js

This bar chart displays the pupil-teacher ratio in secondary education for each country in 2015, sourced from UNESCO data. The visualization uses D3.js to create the SVG graphic, sorting countries by ratio and rendering them as horizontal bars. Specific D3 APIs include `csv` for data loading, `scaleBand` and `scaleLinear` for axes, `axisLeft` and `axisBottom` for chart scaling, with the final rendering handled via SVG `rect` elements.

Mar 5, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using a horizontal bar layout with a linear population scale. Rectangular marks are rendered with React and SVG, positioned through d3.scaleBand and d3.scaleLinear, while d3.format handles tick labels. The visualization includes styled axes and a tooltip, loading data from the United Nations World Population Prospects 2019 dataset fetched via d3.csv.

Mar 3, 2020