Skip to main content
100%

A5 - Bubble plot

✓ Published0🌍 Public
RRavneet Singh Bhatia
Last edited Feb 26, 2024
Created on Feb 26, 2024

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 description

A 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 main function exported from index.js
  • The main function takes an argument container, a DIV that has measurable dimensions using clientWidth and clientHeight
  • The second argument to main is an options object containing state and setState.
  • The state of the application is stored in state, which is initialized as an empty object {}.
  • The setState function 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

Similar vizzes