Fork of Bubble/Bar Combo viz

100%

Fork of Bubble/Bar Combo viz

✓ Published0🌍 Public

Last edited Jan 25, 2023

Created on Jan 25, 2023

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.

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…

Bubble/Bar Combo viz

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.

Rrmorganti

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

89% match

Loading thumbnail…

Fork of Main Viz | Protype Dev

This visualization presents a quadrant-based radar chart focused on risk areas related to health and wellbeing, with interactive SVG circles representing data points. The central chart uses D3 v5's arc generation and scaleLinear functions to create concentric ring structures with color-coded gradients. Data is loaded from an external CSV file containing car production statistics, while additional datapoints.json provides text labels and quadrant assignments. The interface includes a slider for pointer navigation and a bubble chart for supplementary display, all rendered through D3's SVG animation capabilities.

Tt0miwa22

70% match

Loading thumbnail…

Fork of Bubbles with Json Data

This visualization displays a bubble chart built from JSON data, with each circle representing a person and sized according to a numeric value. The bubbles are labeled with truncated names and monetary amounts, and clicking one triggers a process load. The code uses d3.pack for hierarchical layout, d3.hierarchy for data structuring, and D3 selections to append SVG circles and text. The visualization is rendered in a React framework with SVG, using the d3.v5 library.

Yyeeet0421

70% match

Loading thumbnail…

Fork of Main Viz | Protype Dev

This visualization displays a radar chart composed of concentric, donut-like rings with color-coded quadrants for health and wellbeing data. The SVG rendering uses D3 v5 scales and arc generators to construct the circular plot from CSV data loaded via `d3.csv`. The interface includes separate sections for controls, the central chart, and a bubble component. Quadrant-specific gradients (`linearGradient`) and hard-coded color palettes distinguish four risk areas within the radial layout.

Tt0miwa22

69% match

Loading thumbnail…

Fork 3

This interactive bar chart displays averages of variables for individuals under custody, with both x- and y-axis variables selectable through dropdown menus. Users can rerender the data points and axes by choosing different grouping variables such as age, sex, or race. The visualization uses d3.nest() and rollup to aggregate data dynamically, with the general update pattern handling enter, update, and exit selections for bars and axes. Data comes from a remote JSON endpoint, rendered as SVG.

AAnnie Ulichney

69% match

Loading thumbnail…

Fork of Fork of Bubbles with Json Data

This visualization displays a bubble chart of 18 individuals, with each bubble sized according to a monetary value and labeled with the person's name and that value. The code uses D3 v5's `d3.pack` layout to position bubbles within a hierarchical JSON dataset, rendering circles and text as SVG elements. Clicking a bubble triggers a process-loading function, and the chart is embedded in a React-based HTML page. The visualization demonstrates D3's declarative data joining with `d3.hierarchy` and `d3.pack`.

Yyuli19991001

69% match

Loading thumbnail…

Fork of Fork of Main Viz | Protype Dev

This visualization combines a central radar-style chart with interactive quadrant and bubble elements to display categorized risk data. The radar chart uses concentric circular rings generated with `d3.arc()` to create a radial grid, while D3 scales (`scaleLinear`) and axes position data points across four quadrants. The visualization loads external CSV data via the `csv` function from D3 v5, and additional JSON data (datapoints.json) provides text labels and circle assignments for each quadrant. The SVG-based layout divides the view into three sections—slider, chart, and text header—with color-coded gradients distinguishing quadrants.

Tt0miwa22

69% match