TennisVisuals

@TennisVisuals·5 public vizzes

geoFlow

geoFlow is an interactive D3.js globe and map visualization that lets users explore geographic data through smooth, animated transitions between globe and map projections. Built with D3 v4 and leveraging the `d3.geoGraticule` and `d3.geodesic` APIs, it plots earthquake data from USGS and city locations from a geonames dataset. The visualization supports zooming, rotating, and bouncing between countries, with animated geodesic paths and CSS-driven flow animations for data connections. It includes a console API for programmatic control, enabling tours, spin effects, and real-time data updates.

Oct 31, 2016

Loading thumbnail…

geoFlow

A customizable, animated D3.js globe visualizes geographic data, transitioning smoothly between orthographic and map projections. It renders country boundaries, graticules, geodesic arcs, and city markers using SVG paths, with options to spin, zoom, and focus on specific countries. The visualization loads city populations from GeoJSON and can display earthquake data from a USGS feed, while a JavaScript console offers programmatic control through chained animation methods.

Oct 31, 2016

Loading thumbnail…

Scatterplot with Voronoi

This example visualizes tennis match data as an interactive scatterplot, plotting points per set against shots per set, with each point colored by set score and sized by points per game. The chart uses D3.v3 with SVG and animated transitions to update between per-set and per-game views, while a Voronoi overlay enables hover highlighting of data points. Users can filter by clicking legend items, zoom on selections, and highlight specific matches by searching for player names.

Feb 18, 2016

Loading thumbnail…

Point Distributions by Set Scores

This visualization compares tennis match statistics by showing the distribution of total points (and total shots) across different set scores, such as 6-0 or 7-5. Sets are grouped along the x-axis, with each group displaying an animated, exploding boxplot that highlights quartiles, outliers, and individual data points. The chart uses D3.js v3 with SVG and supports dynamic transitions when switching between point or shot metrics. Tooltips are configurable via d3-tip or Bootstrap popovers, and the data comes from parsed ATP and WTA match records.

Feb 18, 2016

Loading thumbnail…

D3.js Updating Radar Chart

This updating radar chart demonstrates smooth transitions between dataset configurations using D3.js. The visualization shows a five-axis radar with multiple data series called "phones," transitioning through different states including filtering axes, inverting axis ranges, changing color schemes, and adjusting the number of grid levels. The example also activates a legend and applies varying dot radii and chart dimensions. The code uses a reusable radarChart function with nested enter/exit/update patterns for SVG elements, separate layers for hover and tooltips, and configurable accessor methods for data manipulation.

Feb 15, 2016