Skip to main content
SimilarExport ZIP
100%

Bubble/Bar Combo viz

✓ Published2🌍 Public
Rrmorganti
Last edited Jan 17, 2020
Created on Jan 12, 2020

This interactive visualization compares traumatic brain injury (TBI) clinic data across four quarters using a combination of a bubble chart and bar chart. Users click buttons labeled Quarter 1–4 to switch between time periods, triggering an animated update of both the bubble sizes representing visit types (e.g., Anxiety, Neurology) and the bars showing total TBI visits and symptoms. Built with D3 v4, the example uses `d3.pack` for bubble layout, `d3.hierarchy` for data nesting, and SVG rendering with button-driven transitions. The data originates from a health dataset on TBI patient visits.

AI-generated description

Combination visualization exploring the use of button to display change over time as opposed to use of a time-series.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bubble/Bar Combo viz

This visualization combines a bubble chart and a bar chart to explore quarterly data on traumatic brain injury (TBI) visits and symptoms. Four buttons allow the user to switch between quarters, updating both the bubble chart, which shows the distribution of visit types using D3’s pack and hierarchy APIs, and the bar chart displaying total counts. The SVG-based graphics are rendered with animation, and the data is embedded directly in the code.

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

Untitled

A stacked area chart shows the persistence of four symptom types—anxiety, neurology, headaches, and sleep issues—across four quarterly time points in the year following war-related traumatic brain injuries for five patients. The chart reveals that anxiety remains reported in the fourth quarter while other symptoms decline or vanish. Built with D3 v3 in an SVG using `d3.layout.stack`, `d3.svg.area`, and custom color assignment via `get_colors()`, it reads data from `localData.csv` and includes axis labels and a legend.

Rrmorganti
71% match
Loading thumbnail…

Untitled

A stacked bar chart visualizes reported head injuries across five sports, comparing Highschool and College levels from CTE_data.csv. Users click legend items to isolate a single category’s bars, sort them via a checkbox, and hover to reveal tooltips. Built with D3 v3, the SVG uses ordinal scales for sport categories, linear scales for counts, and an animated legend-driven class selector to redraw rects on demand.

KKofi Adu-Gyan
68% match
Loading thumbnail…

Bar Chart

This example uses the D3.js library to create a zoomable tree diagram that visualizes hierarchical data from a JSON file, depicting confirmed cases, deaths, and recoveries across hospital departments. The visualization uses an animated, interactive collapsible tree layout where nodes represent locations like clinics and centers, with edge thickness scaled to data values. The code implements custom D3 scales for color and width, and uses SVG rendering with transitions to animate the expanding and collapsing of nodes. Tooltip styling and node colors are defined through CSS and D3's scaleLinear function.

Ssrinivasjavvadi
67% match
Loading thumbnail…

Bubble chart

This bubble chart visualizes healthcare facility data, plotting the number of beds on the x-axis against average rating on the y-axis, with bubble size representing the number of doctors. Each point uses the `d3.scaleSqrt` function to map doctor counts to circle radii, creating a clear proportional comparison. The chart renders with SVG circles and D3.js axes, displaying a title and axis labels. It reads the data from a CSV file and updates the visualization asynchronously. The tooltip and hover effects provide interactivity, highlighting individual data points on demand.

JJayanthKumarkoni
67% 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
67% match
Loading thumbnail…

Final_Project_Interactive_Bar_Chart

This interactive bar chart displays the prevalence of various health-related measures across demographic and temporal categories. Users can switch between different data groupings—such as year, sex, race, employment, and medical history—using on-screen buttons. The visualization is built with D3 v7 and renders as an SVG, updating bars and axes through a general update pattern that removes and recreates the chart. Data values are mapped on a linear scale from 0 to 1, showing proportions for each selected category.

YYYYZZZ
67% match