Skip to main content
SimilarExport ZIP
100%

Bubble Chart Template

✓ Published0🌍 Public
GGerardoFurtado
Last edited Jun 25, 2018
Created on Jun 25, 2018

This interactive bubble chart visualizes the estimated net worth of Donald Trump’s assets in 2016, using area to encode net value and position to convey spatial distribution. Built with D3 v4 and SVG, the chart renders each asset as a circle on a geographic layout, with tooltips providing detailed asset information. Users can click a button to toggle between displaying all assets and those with changes from the prior year, with smooth animated transitions. The visualization is based on Forbes data and highlights the relative financial significance of each asset through bubble size and positioning.

AI-generated description

forked from <a href='http://bl.ocks.org/MichaelCurrie/'>MichaelCurrie</a>'s block: <a href='http://bl.ocks.org/MichaelCurrie/5e2da378a53ea624082cb55e78fdfa05'>Bubble chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3: A simple packed Bubble Chart

This packed bubble chart visualizes the market values of 2018 World Cup teams, with each bubble sized proportionally to a player's transfer value and colored by playing position. The D3 v4 visualization, built with SVG, uses a bubble layout to pack player circles by value, while an interactive sidebar highlights countries. A large title and total squad value provide context, and clicking is enabled for further exploration.

FFootyNumb3rs
66% match
Loading thumbnail…

Bubble Chart - Cereal

This heatmap visualizes billionaire wealth by region and wealth type, using a linear color scale from white to steelblue to represent total wealth worth in billions. The tooltip reveals each cell’s exact value on hover. The code employs d3.csv to load data, d3.scaleBand for axes, d3.scaleLinear for color encoding, and SVG rectangles with mouse event handlers for interactivity. The dataset, sourced from the CORGIS Billionaires Dataset, is grouped by region and wealth type in the CSV.

EEunice Tu
66% match
Loading thumbnail…

bar chart

This bar chart displays the net worth of prominent billionaires from the 2014 dataset, with each bar representing an individual’s name and worth in billions of USD. The visualization uses D3.js v4 to create an SVG-based chart, employing `d3.scaleBand` for the x-axis categories and `d3.scaleLinear` for the y-axis values. Data is loaded from a CSV file, and axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with rotated text labels for readability. The chart highlights wealth distribution across notable figures, sourced from the provided gist.

BByronHan333
66% match
Loading thumbnail…

Bubble Chart Experiment

This bubble chart visualizes grants from the Gates Foundation, with each circle representing a grant sized by total funding amount and colored by grant category. The visualization is interactive: users can filter the display by year or view all grants together, with tooltips revealing grant details on hover. Built with D3 v4, the chart uses SVG circles and animation to transition between filtered views, making it easy to explore patterns in educational spending over time.

335degrees
66% match
Loading thumbnail…

linechart

This line chart visualizes the changing wealth of billionaires from 1996 to 2014, with each line representing an individual's net worth over time. The SVG-based chart uses a yellow stroke for the lines and white-filled dots to mark data points, following a minimal, clean design. Data is loaded from a CSV file containing billionaire attributes such as age, gender, citizenship, industry, and wealth type, allowing the line chart to map wealth values across years for each person. The visualization focuses on trend comparison, with the styling keeping attention on the data itself.

BByronHan333
66% match
Loading thumbnail…

Bar Chart in D3

This bar chart displays the net worth of the top 20 billionaires in 2014, with each billionaire’s name on the y-axis and their wealth in billions on the x-axis. The visualization uses D3 v7 to load CSV data from a GitHub gist, and renders horizontal bars as SVG rectangles scaled with `d3.scaleLinear` and `d3.scaleBand`. Text labels show exact wealth values at the end of each bar, while axis and chart titles are added using D3’s SVG text elements. The styling relies on CSS classes for bar fill and font formatting.

RRiya Mathur
65% match
Loading thumbnail…

D3: A simple packed Bubble Chart

This D3 v4 bubble chart visualizes the market values of 2018 World Cup teams, with each bubble sized by a player’s transfer value and colored by playing position. The data, loaded from a CSV via PapaParse, drives a packed layout where bubble area encodes monetary value. The visualization includes a sidebar listing players, hover and click interactions to reveal relative player values, and a title block with source notes. Built with SVG rendering, it uses ordinal color scales for positions and compresses values for display.

FFootyNumb3rs
65% match
Loading thumbnail…

you-draw-it

This interactive chart displays U.S. debt as a percentage of GDP from 2001 to 2015, showing the historical trend up to 2008 and inviting the user to draw the subsequent path. After 2008, the line is dashed and user-controlled via `d3.drag`; dragging updates the data points, and once all years are defined, a clipped area reveals the actual values through a `clipPath` with a `transition`. The visualization uses D3 v4 APIs including `d3.area`, `d3.line`, and `d3.mouse`, rendering as SVG with axes and a grid, based on data embedded in the script.

11wheel
65% match