Bubble Chart with Tooltips Using D3

100%

Bubble Chart with Tooltips Using D3

✓ Published5🌍 Public

Last edited Sep 3, 2026

Created on Mar 1, 2022

This bubble chart uses D3 v7 to visualize bike station locations in the Bay Area, mapping latitude and longitude to axes, dock counts to bubble size, and cities to categorical colors from `d3.scaleOrdinal`. A legend, built with the d3-legend library, identifies city colors. Interactive tooltips, styled via CSS and positioned with mouse events, display the total bike count and city name for each aggregated data point. The chart renders as SVG and loads data from a remote CSV using `d3.csv`.

AI-generated description

Assignment 5 parts C, A

Bubble Chart with Tooltips and Legend Using D3

I've made a fork of my regular Bubble chart to add tooltip as I found it good to have information shown in a diggerent way.

Inspired by: https://observablehq.com/@d3/bubble-chart https://www.d3-graph-gallery.com/bubble Used lib: https://d3-legend.susielu.com/ used documentation: https://github.com/d3/d3/blob/main/API.md

Data: https://gist.githubusercontent.com/olga-kondr/64dc8df90513ada23e183cbb9fa1f9d4/raw/a69aa9c03948a74bb7453bdbcc7a3c70d81d9d9e/weather.csv

Simple version of this bubble chart without tooltip and legend: https://vizhub.com/olga-kondr/c38fbd86a8d343e8a5c83251a0ff4f71

MIT Licensed

Similar vizzes

Loading thumbnail…

Bubble Chart with D3 without Tooltips/Legend

This bubble chart displays the locations of bike stations in the Bay Area, with circles sized by dock count and colored by city. The visualization aggregates station data from a CSV file by city, plotting averaged longitude and latitude coordinates. Using D3 v7, the code employs scaleLinear functions for the x, y, and radius mappings, scaleOrdinal for categorical colors, and standard axis generators. Dashed lines and inline labels identify each city with its total dock count, while SVG text elements provide axis titles and chart headings.

OOlha

94% match

Loading thumbnail…

Fork of Bubble Chart Visualization

This interactive bubble chart displays the number of boba shops across eleven Bay Area cities, with circle size scaled linearly by shop count. Built with D3 v7, it renders as an SVG where users can drag bubbles to reposition them while a force simulation, using `d3.forceSimulation` with center, charge, and collide forces, arranges the circles and prevents overlap. Hovering reveals a tooltip showing each city’s name and shop total, with data loaded from a remote CSV file.

Wwaterm80

80% match

Loading thumbnail…

Scatter Plot of Bike Locations with D3

A scatter plot maps the latitude and longitude of Bay Area bike stations from a 2013 CSV dataset, with each orange circle positioned by its coordinates. The visualization uses d3.csv to load the data, then d3.scaleLinear to map longitude and latitude to SVG canvas positions, while d3.axisBottom and d3.axisLeft generate the axes. Titles for longitude and latitude labels and a heading are added as SVG text elements.

OOlha

77% match

Loading thumbnail…

Scatterplot with a Qualitative Color Scale Using D3

This scatterplot displays bike stations in the Bay Area for 2013, plotting longitude on the x-axis and latitude on the y-axis. Each station is colored by city using a qualitative scale, d3.scaleOrdinal, with d3.schemeTableau10, while a D3 legend (d3.legendColor) shows location categories. The visualization uses D3 v7 to render SVG axes and circles, with data loaded from a remote CSV file.

OOlha

77% match

Loading thumbnail…

Fork of Bubble Chart Visualization

This fork of a bubble chart visualization displays the relative number of boba shops across eleven California cities using an interactive force-directed layout. Circles are initially clustered at the center, then repelled and spaced by d3.forceSimulation, d3.forceManyBody, and d3.forceCollide until stable. Users can drag any circle with d3.drag, while a custom tooltip reveals city names and counts on hover. The visualization loads data from a CSV file via d3.csv, scales circle radii with d3.scaleLinear, applies an ordinal color scheme, and renders everything as SVG elements.

Wwaterm80

76% match

Loading thumbnail…

Bubble Chart Visualization

This bubble chart visualizes the number of boba shops across California cities, with each circle’s area encoding the count. Circles start at the center and are arranged by a force simulation using `d3.forceSimulation`, including center, charge, and collide forces to prevent overlap. Users can drag circles, which temporarily fixes their position, and hover to see a tooltip with the city name and count via mouse events. The chart is rendered as SVG using D3 v7, with color from `d3.scaleOrdinal(d3.schemeSet3)`, and loads data from a CSV file.

CChhoden Sherpa

76% match

Loading thumbnail…

BarChart with ToolTip

This bar chart displays simulated hourly bike availability predictions for a single station, with bars representing forecasted values across 24 time points. The chart uses a static SVG canvas with axes for time and bike count, and bars change color from steelblue to brown upon hover. The visualization loads station metadata from a JSON file and uses D3.js v3 APIs including `d3.scale.ordinal().rangeRoundBands()`, `d3.svg.axis()`, and `d3.select()` to construct the chart. The bar heights and positions are computed through a random correction applied to the station's actual available bike count.

CChmits

74% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a bubble chart of Bluebikes station data, with the x-axis showing "Total docks" and the y-axis showing the "District". The circles are sized and colored by the number of docks, and a tooltip reveals details like station name and capacity. The code loads the tooltip, config, and data modules, with the data fetched from a remote CSV using `d3.csv`. The visualization is rendered to SVG, and the `viz.js` file defines the mark and encodings.

KKimberly Nguyen

73% match