Bubble Chart Template

100%

Bubble Chart Template

✓ Published0🌍 Public

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…

Task8_Question4

This interactive bubble chart visualizes the net worth of Donald Trump’s assets in 2016, with bubble size representing each asset’s net value and color indicating whether its value changed up, down, or stayed the same from 2015. Toolbar buttons allow switching between grouping assets by type, change status, a scatterplot of change versus net value, and a geographic map using d3.geoAlbers. The visualization uses d3.forceSimulation physics for animated transitions, with hovering revealing detailed asset information. Data comes from Forbes via a CSV file, rendered as SVG.

Mmythripopuri2001@gmail.com

89% match

Loading thumbnail…

my project

This bubble chart compares the net worth of 45 billionaires against their country's GDP, using the x-axis for GDP and the y-axis for individual wealth. Each circle’s size is scaled by net worth, and a tooltip reveals the person’s name when hovered. Built with D3 v7, the visualization uses `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` for axes, sizing, and coloring, with axes drawn via `d3.axisBottom` and `d3.axisLeft`. Data is a static, hard-coded array.

Nnitishsurneni@gmail.com

68% match

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