Storm

@Stormiths·5 public vizzes

CSCE 5320 Assignment 8

This interactive visualization gallery presents three distinct D3.js v7 views: a choropleth US population map using `d3.geoPath` and `d3.geoAlbersUsa` with TopoJSON state boundaries and census data, an animal taxonomy tree drawn with `d3.tree` and `d3.linkHorizontal`, and a static movie-actor network laid out via `d3.forceSimulation`. Buttons switch between views, and hover tooltips appear on the map. The network nodes and links are rendered as SVG circles and lines, with colors distinguishing movies from actors.

Apr 12, 2026

Loading thumbnail…

CSCE 5320 Assignment 7

This interactive visualization explores video game sales data through four coordinated charts: a scatter plot of regional sales, a pie chart of genre shares, a line chart, and an area chart of global sales over time. Users switch between views using buttons. Built with D3 v6, the example uses `scaleLinear`, `axisLeft`, `axisBottom`, `pie`, `arc`, `line`, and `area` APIs. The scatter plot employs `scaleOrdinal` with `interpolateRainbow` for genre colors, while the line and area charts aggregate data via `rollup` and `sum` from a TSV dataset.

Mar 29, 2026

Loading thumbnail…

CSCE 5320 A6.3

A bar chart and overlaid line chart visualize the top 20 Steam games by total reviews, distinguishing total, positive, and negative review counts. The chart uses D3 v5 and React to load TSV data, filter out games with zero reviews, and render an SVG with a horizontal grid, rotated axis labels, and color-coded bars and lines. The code builds the visualization with `d3.scaleBand`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.line`, providing an interactive look at review distribution across popular titles.

Mar 7, 2026

Loading thumbnail…

CSCE 5320 A6.1

This example shows a horizontal bar chart ranking the top 25 video games by global sales, with each bar’s length proportional to millions of units sold. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and renders SVG `rect` elements. Data is loaded asynchronously from a TSV file using `d3.tsv` and the chart displays gridlines and labeled tick marks.

Mar 7, 2026

Loading thumbnail…

CSCE 5320 A6.2

This scatter plot visualizes the relationship between a monster's Challenge Rating (CR) and its Hit Points (HP) from D&D statistics data, loaded as a TSV file. Each red semi-transparent circle represents a monster, plotted by CR on the x-axis and HP on the y-axis. Built with React and D3 v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes within an SVG that dynamically fills the window. The code directly selects the SVG by ID and removes all elements to redraw the chart when data loads.

Mar 7, 2026