Ryan Fleming

@rfleming71·14 public vizzes

Satellites Launches per Year(Final Project)

This visualization combines a line chart of satellite launches per year with an interactive world map. Users can click a country on the map to filter the line chart to that nation’s launch history, or click a year on the line chart to highlight launches from that year on the map. The line chart uses d3.scaleTime, d3.axisBottom, d3.line, and a tooltip with d3.bisector. The map uses d3.geoNaturalEarth1, d3.geoPath, and a custom d3 color legend. Data comes from the Union of Concerned Scientists.

Nov 7, 2018

Loading thumbnail…

Cars Scatter Plot with Menu

This scatter plot visualizes car attributes from the UCI Auto MPG dataset, with each point representing a car colored by its country of origin. Users can select any two columns—such as horsepower, weight, or acceleration—from dropdown menus to compare on the x and y axes. Clicking a color legend entry filters the display to that origin. Built with D3 v5, the visualization uses `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and custom dropdown and legend modules, rendering as SVG with CSV data loaded from a remote URL.

Nov 7, 2018

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset, with each point colored by the car’s country of origin (USA, Japan, or Germany). Clicking a country in the color legend filters the points by toggling their opacity, highlighting cars from that origin. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` to render SVG axes and circles, while the legend relies on `d3.legendColor` for a horizontal color scale.

Nov 7, 2018

Loading thumbnail…

Cheap Tricks for Interaction(Even cheaper with CSS)

This example demonstrates a zoomable world map with interactive country selection, where clicking toggles a filled highlight state. It uses d3.geoNaturalEarth1 and d3.geoPath to render TopoJSON country boundaries from the world-atlas dataset, combined with d3.zoom for panning and scaling. The effect relies on CSS :hover and a .selected class triggered via d3’s event handler, supplemented by SVG <title> elements for tooltips. The render loop binds the country features and appends path elements to the SVG canvas.

Nov 7, 2018

Loading thumbnail…

Multiple selection world map

This example shows a world map where users can click individual countries to toggle them between yellow and green, allowing multiple selections simultaneously. The visualization uses a natural Earth projection rendered as SVG, with country boundaries and names sourced from the World Atlas TopoJSON and TSV datasets. D3’s zoom behavior enables pan and zoom on the map. Click handlers update each country’s data properties and re-render the paths, while CSS hover effects and the `.selected` class highlight interactive states.

Nov 7, 2018

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the "general update pattern" in D3 with special cases: replacing a node's type, removing a node from the middle, and exiting nodes shrinking to zero size before disappearing. Rendering as animated SVG, it uses D3's `scaleOrdinal` for color and radius mappings, plus `transition().duration()` to animate enter, update, and exit states. The code manually merges entering and existing groups using `.merge()` and applies concurrent transitions to `circle` radii, fill colors, and text opacity.

Nov 7, 2018

Loading thumbnail…

Satellites Launches per Year

This line chart shows the total number of satellites launched per year from 1974 to 2018, based on country of operator and launch date data from the Union of Concerned Scientists. The visualization uses D3 v5 to parse the CSV data and display it as a smooth curve, with an SVG rendering approach that includes labeled axes and a title. The code employs D3's scaleLinear, scaleTime, axisBottom, axisLeft, line, and curveBasis functions to construct the chart, while a dropdown menu component is available but not visible in the rendered output.

Nov 7, 2018

Loading thumbnail…

Satellites Scatter Plot

This scatter plot displays the launch mass of Earth satellites against their launch year, using data from the Union of Concerned Scientists. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with mass values converted from kilograms to thousands of kilograms. Axes are generated using `axisBottom` and `axisLeft`, while circles are appended to the SVG canvas. The plot reveals a wide distribution of satellite masses, with many lighter satellites clustered in recent years and a few heavier ones spread across the timeline.

Nov 7, 2018

Loading thumbnail…

Marks & Channels Graphic

This example reproduces a treemap visualization from the Marks & Channels Graphic in Chapter 5. It uses d3.hierarchy and d3.treemap with a slice-dice tiling to layout nested data from a custom JSON file, coloring each leaf as a simple rectangle. The SVG rendering assigns each leaf a `<g>` group and a `<rect>`, sized proportionally to its data value. The code references D3 v4 and Curran’s treemap example as its basis.

Nov 7, 2018

Loading thumbnail…

Data Table Summary

This visualization displays a summary of a CSV dataset containing CDC NORS outbreak reports from 2015 to 2016. It prints the total row count, column count, and file size in kilobytes, then shows the first ten rows as formatted JSON. The code uses d3.csv to load data.csv and d3.csvFormat to calculate its size, with d3.select appending pre elements to the body for output.

Nov 7, 2018

Loading thumbnail…

Data Table Summary

This example displays a concise text-based summary of a dataset, reporting the number of rows, columns, and file size in kilobytes, followed by the first ten rows as formatted JSON. It uses d3.csv to load the data, d3.csvFormat to compute its size, and d3.select to append the results to the page body. The data originates from 2017 US Consumer Product Safety Commission records on home workshop power tool injuries.

Nov 7, 2018

Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 technologies used by StackOverflow survey respondents in 2018, measured by percentage of users. It reads data from a CSV file and renders horizontal bars using an SVG. The code imports specific functions from d3—including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`—to construct the scales and axes, and appends rectangles for each bar. The chart’s styling is applied via a separate CSS file, which sets the bars to steelblue and adjusts text size.

Nov 7, 2018

Loading thumbnail…

Let's make a face with D3.js!

This example creates a smiley face in an SVG canvas using D3.js, with animated eyes that repeatedly expand and contract their pupils. It demonstrates fundamental DOM manipulation through D3 selections, appending circles, paths, and groups, while leveraging the arc generator to shape the eyes, eyebrows, and mouth. The code specifically uses d3.select and d3.arc from D3 v5, and the pupil animation is driven by chained transition calls that alternate the circles’ radii. The face is centered via a translated group, and positioning relies on hard-coded constants for eye spacing and offsets.

Nov 7, 2018

Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a satellite dataset, showing the row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. The visualization uses D3 v5’s `csv` and `csvFormat` functions to parse and measure the data, then appends the results to the body as `pre` elements. The dataset covers man-made satellites as of April 2018, sourced from the Union of Concerned Scientists.

Nov 7, 2018