A5 - Bubble plot
✓ Published0🌍 Public
This bubble plot visualizes the top 30 Twitch streamers by total followers, plotting followers gained in one year against total followers on linear axes. Each bubble’s radius encodes peak viewership, while color distinguishes mature channels (red) from non-mature ones (steelblue). Built with d3.scaleLinear, d3.axisBottom, and d3.axisLeft, it includes interactive tooltips on mouseover. The chart uses data from a CSV fetched via d3.csv, with SVG rendering and transitions for tooltip opacity.
AI-generated descriptionA blank slate starting point showing the "Hello World" for the VizHub V3 Runtime Environment, which supports continuous hot reloading with interactive widgets.
- There is no
index.html- that's what triggers the V3 Runtime - The entry point is the
mainfunction exported fromindex.js - The
mainfunction takes an argumentcontainer, a DIV that has measurable dimensions usingclientWidthandclientHeight - The second argument to
mainis an options object containingstateandsetState. - The state of the application is stored in
state, which is initialized as an empty object{}. - The
setStatefunction can be called with a function that uses the previous state to create a new state object using immutable update patterns. - For an interactive example, see Mouse Follower.
Full course playlist: YouTube: Constructing Visualization 2024.
MIT Licensed