Justin Chan

@jtchan2·4 public vizzes

D3 Tool Tips

This visualization displays daily temperature readings for New York, San Francisco, and Austin as multi-line time series. Users can click any line to toggle its visibility, while hovering over a line dims the others to focus attention. The chart uses D3 v7 with SVG rendering, including scales, axes, and the d3.line generator with basis curves. It loads data from a TSV file via d3.tsv and implements interaction through event listeners on the SVG elements.

May 4, 2022

Loading thumbnail…

Title

This visualization displays global video game sales across twelve genres from 1980 to 2016, using multi-line time series where each colored path represents a different genre. The chart uses D3 v7 with SVG rendering, employing `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` to generate paths from aggregated yearly sales data. Data comes from the vgsales.csv dataset, with genre totals computed by summing `Global_Sales` values. The visualization highlights genre performance trends over time and enables comparison of market share shifts across gaming history.

May 3, 2022

Loading thumbnail…

Video game Sales Global Bar Chart

This bar chart visualizes the top 10 best-selling video games globally, ranked by total sales in millions of dollars. It uses d3.csv to load the vgsales.csv dataset, then computes the top 10 entries using d3.maxIndex on the Global_Sales field. The chart renders with SVG rectangles positioned via d3.scaleBand and d3.scaleLinear, and includes axes using d3.axisBottom and d3.axisLeft with custom tick formatting. Tooltips are added via SVG title elements, and the y-axis labels are formatted using d3.format.

Apr 4, 2022

Loading thumbnail…

p5.js example

A bar chart displays calories for Starbucks Venti-sized drinks from a CSV file, rendered on a 1000x1000 canvas. Yellow rectangles are drawn sequentially along the x-axis, with heights proportional to the calorie values from the `10drinks.csv` dataset. The code uses p5.js `loadTable()` to parse the CSV data and `rect()` for drawing. A grid overlay and axis labels provide visual structure.

Feb 3, 2022