Richard Wong

@rdwong·8 public vizzes

Fork of Globe Zoom - Animate

This visualization displays a globe with nuclear explosion locations plotted as points on a land-mass map. The D3.js geoMercator projection renders geographic features, while graticules and interiors show grid lines and country boundaries. Data from a CSV file of nuclear explosions is mapped through longitude and latitude coordinates, with tooltips revealing location names. The visualization uses d3.geoPath, d3.geoMercator, and d3.geoGraticule for map rendering, with topojson providing world atlas geometry. Interactive elements include hover effects on land masses and color-coded points, demonstrating animated transitions between different global datasets.

May 6, 2022

Loading thumbnail…

Fork of NBA Hex Shot Chart

A hexbin shot chart maps Damian Lillard's 2019-20 regular-season field goal attempts, with each hexagon's size encoding shot frequency and its color encoding the player's field-goal percentage relative to the league average, from −9% to +9%. The visualization uses a custom D3 hexbin layout with a reversed color scale via `scaleSequential` and `interpolateRdYlBu`. Rendered as SVG, the court is drawn using a path, and the chart includes a legend for both frequency and percentage differential, based on shot data from a CSV file.

May 6, 2022

Loading thumbnail…

San Francisco Weather

A week of San Francisco temperatures is plotted as a smooth line over time, with a titled chart and labeled axes for time and temperature. The visualization uses D3 v5 to load CSV data from Data Canvas, scale the domain with `scaleTime` and `scaleLinear`, and render an SVG line via `line` with `curveBasis`. Gridlines, tick formatting, and styled text are added through `axisLeft` and `axisBottom`.

Apr 20, 2021

Loading thumbnail…

Singapore topoJSON import

This example displays the planning areas of Singapore as interactive SVG polygons, loaded from an external topoJSON file and rendered using D3’s `geoMercator` projection and `geoPath` generator. The map supports pan and zoom via the `d3.zoom` behavior with configurable scale and translate extents. Hovering over a region changes its fill color to red, and clicking logs the feature to the console. The visualization demonstrates importing topoJSON data with the `topojson.feature` helper, projecting geographic coordinates, and attaching zoom interactivity to a D3 selection.

Apr 13, 2021

Loading thumbnail…

Scatterplot with menus

This interactive scatterplot displays the relationship between any two columns of the auto-mpg dataset, with dropdown menus to select which variables appear on each axis. The visualization uses React to manage the menu state, D3 v5 for both the SVG rendering and the scatterplot layout, and includes animated transitions where circles grow and fade into their positions whenever a new variable is selected.

Feb 11, 2020

Loading thumbnail…

Weather Relation Chart 2016 (Singapore)

A single SVG chart compares temperature, rainfall, and wind speed for every day of 2016 in Singapore using layered vertical bars. Interactive range sliders adjust the minimum and maximum temperature scales, plus maximum rainfall and wind speed scales, triggering re-renders. The visualization uses d3-scale for linear and time axes, d3-selection for DOM updates, and d3.rgb for gradient color definitions. It also creates linear gradients for temperature and wind bar fills. Daily weather data is loaded from a CSV file.

Nov 13, 2019

Loading thumbnail…

World Population Area Chart

This D3.js area chart displays world population by year, with time on the x-axis and population count on the y-axis. The chart uses a smooth, curved area fill to emphasize population growth trends. Data is loaded from a CSV file and rendered as an SVG using D3 v5. The visualization includes customized axes with formatted tick labels, axis titles, and a chart title, all styled with a distinct color palette.

Sep 18, 2019

Loading thumbnail…

Bar chart

This bar chart displays monthly average temperatures, with each month on the vertical axis and temperature values extending horizontally. The chart uses an SVG canvas with pink bars, rendered using D3 version 5. The code employs `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for ticks, reading data from a CSV file. Months appear in order from January through December, showing a peak in May.

Sep 17, 2019