Skip to main content
SimilarExport ZIP
100%

Interactive Bubble Chart

✓ Published0🌍 Public
AAjayyy
Last edited Jun 26, 2018
Created on Jun 26, 2018

This interactive bubble chart visualizes risk assessment ratings for objects across two years, 2014 and 2015, using dummy data loaded from CSV files. Users can toggle between years and group the bubbles by risk category (1, 2, or both), with bubbles animating between clusters via a force layout. The chart uses D3.js for SVG rendering and transitions, jQuery for UI interactions, and Bootstrap to show a popover with assessment details on hover.

AI-generated description

forked from <a href='http://bl.ocks.org/danielatkin/'>danielatkin</a>'s block: <a href='http://bl.ocks.org/danielatkin/57ea2f55b79ae686dfc7'>Interactive Bubble Chart</a>

forked from <a href='http://bl.ocks.org/larsenmtl/'>larsenmtl</a>'s block: <a href='http://bl.ocks.org/larsenmtl/2f96c17e9625b18f1685cb4cb2bf153e'>Interactive Bubble Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Interactive Bubble Chart

This interactive bubble chart displays risk assessment ratings for dummy data across 2014 and 2015. Users toggle between years and risk categories, causing the circles to regroup through animated transitions. The visualization uses D3.js version 3 with a force layout, collision detection, and SVG rendering. Data is loaded from CSV files representing individual assessments, with popovers showing details on hover and color gradients indicating combined risk levels.

AAjayyy
96% match
Loading thumbnail…

buble chart Q4

This bubble chart visualizes the relationship between stress level, average heart rate, and vessel count, with color indicating the presence of heart disease. It uses a D3.js v7 SVG rendering, with a linear scale for both axes and a separate scale for bubble size. The chart includes interactive tooltips on mouseover that display the heart disease status and vessel count, alongside a legend for the color categories. Data is parsed from a CSV file, with stress levels converted from text to a numerical scale.

RRakesh Yadav
73% match
Loading thumbnail…

Untitled

A force-directed bubble chart visualizes a small dataset of 12 items, each with categorical attributes. The visualization initially displays all nodes as colored circles that can be dragged and selected. Buttons allow users to split the bubbles into separate clusters by Location, Group, Class, or Type, with titles indicating the active categories. Using D3 v4, the chart employs `d3.forceSimulation` with `d3.forceCollide`, `d3.forceManyBody`, `d3.forceX`, and `d3.forceY` to position the nodes. The SVG circles and text labels are rendered from a CSV file. Users can interactively drag and select individual bubbles to highlight them.

JJoker-tr
72% match
Loading thumbnail…

Bubble Chart

This bubble chart visualizes the relationship between age and BMI for approximately 250 individuals, with circle size encoding insurance charges and color distinguishing gender. Built with D3 v7 in a React-agnostic HTML page, it uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for male/female coloring, and `Math.sqrt` to map charges to radius. Data loads asynchronously from a CSV file via `d3.csv`, and the SVG rendering includes custom axes, labels, and a legend showing size and color ranges.

AArun Pratap
72% match
Loading thumbnail…

Fork of bubblechart

This interactive bubble chart allows users to explore a multivariate dataset by selecting which numeric columns to map to the x-axis, y-axis, and bubble radius, and which categorical column to use for color encoding. The visualization updates dynamically, using D3.js v7 scales and SVG circles to render the data. Dropdown menus filter numeric and categorical columns from the loaded CSV file, which is fetched from a GitHub repository. The chart employs `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble sizes, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors.

LLayaMyadam@my.unt.edu
72% match
Loading thumbnail…

Exploración1

This visualization uses a packed bubble chart to display the frequency of values across years, with each bubble sized and colored according to its numeric value. The data comes from a CSV file listing years and corresponding counts. The code loads the data with d3.csv, processes it into a hierarchy, and applies d3.pack() to compute circle positions. Circles are rendered as SVG groups with fill colors from d3.scaleOrdinal and d3.schemeCategory20c. Text labels are clipped to each circle, and hover tooltips show the exact year and value. The layout uses a fixed width of 960 pixels with automatic height.

663anp3ca
72% match
Loading thumbnail…

assig-2

This interactive bubble chart visualizes synthetic TV data from a CSV file, plotting screen size against price while encoding vertical resolution through bubble radius and brand through color. Built with D3 v7, the SVG visualization includes animated hover effects with a custom tooltip displaying brand information. Using `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for color mapping, and `d3.interpolateTurbo` for the color spectrum, the chart responds to mouse events with transition-based tooltip show/move/hide functions.

Vvaishnavi6gan@gmail.com
72% match
Loading thumbnail…

Bubble/Bar Combo viz

Four push buttons switch between quarters in a health dataset for traumatic brain injuries, updating a bubble chart and bar chart side by side. The bubble chart uses `d3.pack` and `d3.hierarchy` to size circles by visit counts for anxiety, neurology, sleep, and headache, while the bars show total TBI visits and symptoms. Buttons call an `update` function that re-binds data and transitions the SVG elements, demonstrating an interactive alternative to a time-series axis.

BBrunoPaulo10
71% match