R

Ruofan Chen

@RuofanChen·21 public vizzes

Loading thumbnail…

The Dormouse's story

This example visualizes the classic story “The Dormouse’s story” by parsing its HTML structure, extracting text nodes, links, and paragraph elements. It uses React to render the parsed data as a network graph, where each node represents a word or link, and edges connect sequential words. The visualization leverages d3-force simulation for layout, with color coding to distinguish link text from regular story content. The rendering approach highlights the narrative flow through a force-directed graph, making the text’s interconnections and link references visually explicit.

Loading thumbnail…

Version three - part 2: Winter Olympics Gold Medal Count For Selected Country

This interactive line chart displays the Winter Olympic gold medal counts for a selected country between 2002 and 2014, highlighting performance trends across four games. A dropdown menu lets users choose a country, updating the visualization to show that nation’s medal trajectory. Built with React and D3 v5, the chart uses `d3.line`, `d3.scaleLinear`, and `d3.nest` to render SVG paths and circles, with data sourced from a Kaggle dataset on Olympic games.

Loading thumbnail…

Version three - part 1: Summer Olympics Gold Medal Count For Selected Country

A line chart displays the gold medal count for each Summer Olympics from 2000 to 2012 for a user-selected country. Five colored lines, each with circular markers per year, trace the performance of five countries simultaneously. The visualization uses React with D3 v5 APIs including `nest`, `scaleLinear`, `line`, and `axisBottom`; a dropdown menu triggers an `updateLine` function that redraws the chart with filtered data. Data originates from a Kaggle dataset hosted as a GitHub gist, with counts based on individual athletes rather than events.

Loading thumbnail…

Version one: Summer Olympics Gold Medal Count For Selected Country

This interactive line chart displays the Summer Olympics gold medal count for a selected country between 2000 and 2012, highlighting performance trends across four Olympic games. A dropdown menu lets users choose among all countries represented in the dataset, which is sourced from Kaggle’s Olympic Games data. The visualization uses React for the dropdown interface and D3 v5 for rendering SVG paths via `d3.line` and `d3.scaleLinear`. Each line connects four data points, and a `colorLegend` component identifies the current country. The chart updates dynamically on selection change, removing and redrawing axes and lines.

Loading thumbnail…

Version three: 2012 medal count versus log(GDP)

This scatter plot displays the relationship between a country's logged total GDP and its 2012 Summer Olympic medal count, revealing a positive linear trend where wealthier nations tend to win more medals. Each red circle’s size encodes the country’s 2015 population, with hover tooltips showing country names. The visualization is built with vega-lite-api, vega-lite, and vega-tooltip, using D3’s csv parser to load and transform data from a public GitHub gist. Data is aggregated by athlete, not event, and GDP is calculated by multiplying the 2015 population by per-capita GDP.

Loading thumbnail…

Version two: Gold Medal by Country

This interactive line chart displays the number of gold medals won by a selected country in the Summer and Winter Olympics from 2000 to 2014, with the data sourced from Kaggle. Using D3 v4, the visualization renders two lines per country—one for each season—which can be highlighted in red via a dropdown menu. A second dropdown allows users to switch between countries, with the y-axis dynamically rescaling to accommodate each nation’s medal totals. The SVG paths are generated with `d3.line` and animated transitions update the chart.

Loading thumbnail…

Version two: 2012 medal count versus log(GDP)

This scatter plot shows the relationship between a country’s total GDP (on a logarithmic scale) and its 2012 Summer Olympics medal count, revealing a positive linear trend. Hovering over a point displays the country’s name via the vega-tooltip handler. The visualization uses the vega-lite-api with a circle mark, encoding GDP and medal frequency as quantitative fields. Data is loaded from a CSV using d3.csv, with the GDP computed from population and per-capita GDP before applying a natural logarithm. The chart is rendered in D3 v5 with Vega-Lite.

Loading thumbnail…

Version one: 2012 medal count versus GDP

This scatter plot shows 2012 Summer Olympics medal counts versus each country’s total GDP, revealing a positive linear relationship. Hovering over a circle displays the country name via a tooltip. The visualization is built using the Vega-Lite API, with data parsed from a CSV using D3’s `csv` method and GDP calculated by multiplying population by per-capita GDP. The data originates from Guardian Olympic data on Kaggle, aggregated to count medal-winning athletes rather than events.

Loading thumbnail…

Version one: Medal Count in Multiple Views with Fast Brushing

Two linked views show Olympic medal counts by country from 2000 to 2014. A world map uses d3.geoNaturalEarth1 and d3.geoPath to render triangular markers sized by total medals, colored by year, while a time histogram below bins medal counts by month using d3.histogram. A d3.brushX selection filters the map to the brushed date range. The visualization uses React with d3.v5, rendering as SVG, with data from a CSV of per-athlete medal counts.

Loading thumbnail…

Version two: Medal Count in Multiple Views with Fast Brushing

This interactive dashboard combines a bubble map and a time-series histogram to explore Olympic medal counts by country from 2000 to 2014. A brushed time window filters the map, showing only medals from that period as triangular marks scaled by count and colored by year. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map, a brushX histogram for filtering, and CSV data from a gist.

Loading thumbnail…

Version two: Discipline in top 10 Countries

This interactive visualization shows the top 10 Olympic countries and the distribution of their medals across disciplines. Hovering over a country bar updates a linked pie chart, revealing the medal counts for its dominant sports. Built with D3 v5, it uses SVG rendering and animations via `transition.attrTween` for the pie chart's arc transitions. Data is grouped by country and discipline from an Olympic Games dataset sourced from Kaggle, with all counts based on athletes rather than events.

Loading thumbnail…

Version one: Medal by Discipline in top 10 Countries

A linked bar and pie chart visualizes medal counts by discipline for the top 10 Olympic countries. Hovering over a country's bar triggers an animated pie chart showing that country's medal distribution across disciplines, using `d3.pie` and `arc` with a `transition.attrTween` for animation. The bar chart uses `d3.scaleBand` and `d3.scaleLinear`, while a custom `colorLegend` function renders the categorical color scale. Data comes from Kaggle’s Olympic Games dataset, counted by individual athletes rather than events.

Loading thumbnail…

Version one: Top 20 Athletes

This interactive bar chart displays the top 20 Olympic athletes ranked by total medal count, using data from a Kaggle dataset on Olympic Games. Each bar represents an athlete, colored by medal type, with tooltips revealing the athlete’s name, medal year, and event. The visualization is built with D3 v5 and Vega-Lite API, using `vl.markBar()` for rendering and `vega-tooltip` for interactivity. Data is filtered and aggregated client-side from a CSV source via `d3.csv`, with bars sorted descending by medal frequency.

Loading thumbnail…

Version two: Top Athletes

This interactive bar chart displays the top 40 Olympic athletes and their medal counts. Each bar represents an athlete, with bar length indicating total medals earned. Hovering over a bar reveals a tooltip with the athlete’s name, country, year, event, and medal type. Built with Vega-Lite and rendered through the vega-lite-api, the visualization uses data sourced from a Kaggle Olympic Games dataset. The chart supports filtering and sorting by medal count, with color encoding distinguishing medal types.

Loading thumbnail…

Version three: Top Athletes

This interactive bar chart highlights the top 40 Olympic athletes by total medal count, with each bar colored by medal type (gold, silver, bronze). Hovering reveals the athlete’s name, country, year, event, and medal via a tooltip. Built with Vega-Lite API and D3 v5, it loads CSV data from a GitHub gist derived from Kaggle’s Olympic dataset, computes totals in `getData`, and renders the visualization using vega-tooltip for interactivity.

Loading thumbnail…

US population versus crime number

This scatter plot shows the linear relationship between US population and total violent crime numbers from 2015 to 2019, using FBI data. The x-axis maps population and the y-axis maps crime counts, with each circle representing a year. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to render ticks. SVG circles are drawn with an opacity of 0.5 to show overlapping points, and the plot adapts to the full window size via window.innerWidth and window.innerHeight.

Loading thumbnail…

Hamburger combo

A static SVG illustration of a hamburger and a soft drink, composed of a small set of geometric primitives. The drawing uses colored rectangles, Bézier curves, and arcs to build the burger’s layered ingredients—bun, meat, tomato, sausage, cheese, and lettuce—plus a red bottle with a straw and cap. All shapes are hardcoded via SVG path and rect elements, with colors and strokes defined directly in the markup.

Loading thumbnail…

Loading and Parsing Olympic Data

This example demonstrates how to load and parse Olympic medal data from a CSV file hosted on GitHub Gist. It displays a summary of the dataset—file size in kilobytes, row count, and column count—in a large text container. The visualization uses D3 v7’s `d3.csv` method to fetch and parse the data, with alternative approaches using `fetch`, async/await, and `d3.csvParse` commented out. The code highlights the simplicity of D3’s data-loading API versus manual text parsing.

Loading thumbnail…

Mobility flow Scatter Plot

This scatter plot tracks estimated population flow within Massachusetts from January 1 to January 20, 2021, using data from the MA cell move dataset. The x-axis encodes time while the y-axis shows population flow values, with each semi-transparent circle representing an observation. The visualization uses d3.csv to load the external CSV file, d3.scaleTime and d3.scaleLinear to map data to pixel coordinates, and d3.axisBottom and d3.axisLeft to render axes. Circles are drawn as SVG elements with a fixed radius of 5 pixels and 50% opacity, displaying how mobility increases over the observed period.

Loading thumbnail…

Loading and Parsing UScrime Data

This example loads and parses UScrime data from a CSV file, displaying the dataset’s size in kilobytes, row count, and column count. The data, sourced from the FBI’s website, records reported crimes across U.S. states from 2015 to 2019. The visualization uses D3 v7, specifically `d3.csv` to fetch and parse the data, then updates the text content of a DOM element with the summary statistics. The code also demonstrates alternative parsing methods using `fetch` and `d3.csvParse`.

Loading thumbnail…

Loading and Parsing MA Cellmove Data

This example displays a text summary of the Massachusetts cell-mobility dataset, reporting its file size, row count, and column count. It loads a CSV file from a GitHub gist using `d3.csv` and formats the first value with `d3.csvFormat`. The page also includes commented-out alternatives using `fetch` with `async`/`await` and `d3.csvParse`, as well as a nested promise approach. The data contains origin and destination geographies, coordinates, dates, and visitor/population flow estimates related to COVID-19 mobility during January 2021.