Skip to main content
SimilarExport ZIP
100%

Fork of Bubble Chart Visualization

✓ Published0🌍 Public
Wwaterm80
Last edited Nov 16, 2022
Created on Nov 16, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

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
94% 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
91% match
Loading thumbnail…

Bubble Chart with Tooltips Using D3

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`.

OOlha
80% match
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
78% match
Loading thumbnail…

Fork of Tidied up Bubble Chart

This bubble chart visualizes sales record data loaded from a CSV file via `d3.csv`, grouping transactions by region and sizing circles by total profit. Each circle is color-coded using `d3.scaleOrdinal` and positioned with the `d3.pack` layout, which applies a hierarchical clustering algorithm to arrange the bubbles. Interactive tooltips appear on mouseover, displaying region and profit details in an HTML div. The visualization renders with SVG, styled through CSS hover effects, and includes region labels inside each circle.

Hhquazza@gmail.com
75% match
Loading thumbnail…

Fork of Bubble Chart - Clustered with CSV import + Tooltip

This visualization presents a clustered bubble chart where each circle represents a sales record, with the circle’s area encoding the total profit and its cluster determined by the country of sale. Built with D3 v7 and React, it loads a CSV dataset from a GitHub gist, then uses `d3.pack()` with a hierarchy and sum operation to arrange the circles into a packed layout. Interactive tooltips appear on hover, displaying the country and profit via the `mouseover` event, updating an HTML `#tooltip` element with absolute positioning. The circles and country labels are rendered as SVG elements, with circle size scaled by profit to reveal regional sales patterns.

GGabriel Ing
75% match
Loading thumbnail…

Fork of Fork of Tidied up Bubble Chart

This example creates a bubble chart using D3.js v7's `d3.pack` cluster layout and `d3.rollup` to aggregate total profit by region from a CSV sales dataset. The visualization renders SVG circles with `d3.scaleOrdinal` color mapping based on region, while the bubble radius is determined by the summed profit values. Labels inside each bubble wrap text with a custom `wrap` function, and a tooltip div provides hourly profit details on mouseover. The chart updates hover opacity and tooltip position based on pointer events, with data loaded via `d3.csv` and rendered in a React-free HTML page.

GGabriel Ing
75% match
Loading thumbnail…

Fork of Bubble chart

A bubble chart displays the correlation between the area in square kilometers, GDP in billion USD, and population in millions for major U.S. cities. The visualization uses D3.js v7, rendering SVG circles whose x-position maps population, y-position maps area, and radius encodes GDP. A color scale, derived from the city names via `d3.interpolateTurbo` and `d3.scaleOrdinal`, distinguishes each city, while a tooltip shows the city on hover. The code also includes a legend for bubble size and interactive hover effects.

Aanjalimadhavi98@gmail.com
74% match