stchiang

@stchiang·12 public vizzes

Project

This visualization displays the cumulative number of Stanley Cup playoff wins for each of the original six NHL teams across a sliding timescale from 1918 to 2018. A donut chart updates dynamically as a slider adjusts the year cutoff, with each team’s slice colored distinctly via `d3.scaleOrdinal` and `d3.schemeCategory10`. The code uses `d3.pie()` to generate arc data and `d3.arc()` to render paths, filtering and grouping the CSV data by team and year with `d3.groups`.

Apr 6, 2023

Loading thumbnail…

Fork of Scatter Plot

A scatter plot shows NHL playoff performance across teams and years, plotting each team-season as a colored circle based on goals scored against year, with team membership encoded by color. The visualization includes axes, labels, and an interactive color legend that highlights points from a selected team when hovered. Built with D3 v7, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.csvParse` to load and map the dataset, while custom modules manage axes and legend rendering. Data comes from a CSV of NHL playoff records.

Apr 6, 2023

Loading thumbnail…

Spinning Globe

A world map spins continuously to show all continents and the graticule grid, rendered as an orthographic projection that creates the illusion of a rotating globe. The code uses `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule` to draw the sphere outline, graticule, and country borders, with data loaded from the visionscarto world-atlas TopoJSON file via `topojson-client`. Animation is driven by `requestAnimationFrame` in React, updating the projection’s rotation array each frame.

Mar 30, 2023

Loading thumbnail…

Adding A Menu

A scatter plot of NHL playoff performance from 1996–2022 visualizes team goals scored against year, with teams colored using `d3.scaleOrdinal` and `schemeCategory10`. A dropdown menu enables users to switch the y-axis metric between goals scored and wins, triggering re-renders through a state management pattern. The visualization includes axes rendered with `d3.axisLeft` and `d3.axisBottom`, plus an interactive color legend that dims non-hovered points via opacity changes on mouseover.

Mar 23, 2023

Loading thumbnail…

Scatter Plot

A scatter plot visualizes the relationship between year and goals scored for NHL playoff teams, with circles colored by team. The chart includes labeled axes for both dimensions, rendering data from a CSV file. The visualization uses D3 v7 for its scales, axes, and data joins, with a helper function `scatterPlot` managing the plotting logic. Axes are generated using `axisLeft` and `axisBottom`, while `scaleLinear` and `extent` handle the data mapping. The visualization populates incrementally as data loads asynchronously via `fetch`.

Feb 20, 2023

Loading thumbnail…

Fork of Scatter Plot Simple

This visualization displays hockey team statistics from 1996 to 2022, plotting yearly goals scored on the y-axis against the year on the x-axis for teams like the New York Rangers, Boston Bruins, and Chicago Blackhawks. The scatter plot uses d3.scaleLinear to create both scales, with d3.extent determining domain boundaries. Circle elements are rendered via selection.join(), with each point representing a team's playoff performance in a given year.

Feb 14, 2023

Loading thumbnail…

NHL Stanley Cup Playoffs (1918 - 2022)

This visualization displays NHL Stanley Cup playoff results from 1918 to 2022, showing team rankings, win-loss records, and goal statistics for each season. The code initially renders the raw data as JSON text using d3.select and text(), then fetches the CSV file with the Fetch API and parses it with d3.csvParse. Numeric fields are converted to numbers before the data is stored in the application state via setState, with the visualization framework relying on d3.v7 for DOM manipulation and data handling.

Feb 14, 2023

Loading thumbnail…

Fork of Marks and Channels

This fork of the marks and channels example displays Stanley Cup win totals for the original six NHL teams in a donut chart. The visualization uses color as a channel to distinguish teams, with a legend absent. The code employs d3-shape’s `pie` and `arc` generators to compute the arcs, drawing them as SVG paths with fills from a hardcoded color array. Data is embedded directly in `viz.js`, and the chart renders centered in an SVG that fills the viewport.

Feb 6, 2023

Loading thumbnail…

Fork of Transforming Data

This visualization uses NHL playoff data to display the number of seasons each team has made the playoffs. The code transforms the dataset with d3.flatGroup, grouping records by team and counting occurrences, then outputs the resulting summary as JSON in a pre element. The example demonstrates D3 v7 data loading with csvParse and data transformation workflows.

Jan 31, 2023

Loading thumbnail…

Revenue and Profit of Fortune 500 Companies (2000 - 2009)

This example visualizes the revenue and profit of Fortune 500 companies from 2000 to 2009, using data from a Kaggle dataset. It displays the raw data as a JSON-formatted table while loading the CSV file with `d3.csvParse` and managing state updates through a custom render cycle. The visualization fetches `data.csv`, converts the Year and Rank columns to numbers, and renders the parsed data in a `<pre>` element using `d3.select` and `data.join`. The D3 v7 library powers the data loading and DOM manipulation.

Jan 23, 2023

Loading thumbnail…

Airplane Crashes and Fatalities Since 1908

This example displays the raw contents of an airplane crashes and fatalities dataset, loaded from a CSV file and rendered as a JSON-formatted text preview. The visualization initially fetches the data using the Fetch API, parses it with `d3.csvParse`, and converts numeric fields to numbers. The `viz` function manages the loading state, showing a "LOADING" placeholder until the data arrives, then updates the display via a `setState` callback. The interface uses D3 v7 for DOM selection and rendering, presenting the parsed records in a simple `<pre>` element.

Jan 23, 2023

Loading thumbnail…

Fork of Mouse Follower

A green ellipse trails the mouse cursor with a bouncy, animated movement. The visualization uses a unidirectional data flow where mouse events update a central state object, which then triggers a re-render of the visualization. Built with D3 v7, the code uses `select` to manage SVG elements and a `.transition()` with a 500ms duration and `d3.easeBounce` easing function to animate the ellipse's position. The SVG canvas resizes to match the full browser window dimensions.

Jan 11, 2023