Joseph D. Galloway II

@josephgalloway321·4 public vizzes

graph3

A horizontal bar chart displays mobile operating system market share for 2009, 2014, and 2020, animating transitions between years when selected from a dropdown menu. Bars re-sort by value, while labels show each platform’s percentage of the total. The D3 v5 code uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, `d3.axisTop` and `d3.axisLeft` for tick marks, and `transition().duration()` with staggered delays for animation. Data is embedded directly in the HTML, with SVG rendering for all graphical elements.

Apr 20, 2020

Loading thumbnail…

graph2

A donut chart displays the partisan composition of the U.S. Senate across five congressional sessions, from the 112th through the 116th Congress. Users select a specific congress from a dropdown menu, which triggers animated transitions between the donut’s arc segments and updates the numeric labels positioned along thin connector lines. Built with D3 v5, the visualization uses `d3.pie`, `d3.arc`, and `transition.attrTween` to interpolate geometry smoothly, while `d3.scaleOrdinal` assigns colors to Republicans, Democrats, and Others. The underlying data is embedded as an array of objects containing seat counts per party for each session.

Apr 20, 2020

Loading thumbnail…

graph1

This visualization shows six line charts tracking temperature metrics for three cities in both Fahrenheit and Celsius across a year, switchable via a dropdown menu. The SVG is rendered with D3 v5, and the lines use an ordinal color scale and cardinal curve interpolation. A hover interaction uses a bisector to locate the nearest date, displaying a vertical guide line, date label, and city-specific values with formatted degrees. The y-axis transitions smoothly when switching units.

Apr 20, 2020

Loading thumbnail…

test1

This example uses D3 v5 to render an interactive multi-series line chart comparing city temperatures in both Fahrenheit and Celsius. A dropdown menu toggles the unit of measurement, triggering animated transitions of the lines and axes. The chart displays daily temperature data across three cities with a time-based x-axis. Hovering reveals a vertical guide with circles and labels, showing exact values for each city. The code uses `d3.line` with `d3.curveCardinal` for smoothed lines, `d3.csv` for data loading, `d3.scaleTime` for the date scale, and D3’s selection and transition APIs for interactivity, all rendered as SVG.

Apr 20, 2020