Bubble/Bar Combo viz

100%

Bubble/Bar Combo viz

✓ Published0🌍 Public

Last edited Nov 11, 2020

Created on Nov 11, 2020

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.

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…

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

89% match

Loading thumbnail…

Bubble Update Pattern I

This example demonstrates the general update pattern for D3 selections applied to a bubble chart layout, showing how entering, updating, and exiting circles and labels are handled as data changes. Using the D3 v4 pack layout, it joins data to circle and text elements, then animates transitions: exiting circles shrink and fade, updating elements smoothly move and resize, and entering circles grow from a tiny radius while text fades in. The code relies on `d3.hierarchy`, `d3.pack`, and `d3.transition`, with data randomized by the jeezy utility. The visualization cycles every 1.5 seconds, repeatedly shuffling the alphabet subset and updating the chart accordingly.

GGerardoFurtado

72% match

Loading thumbnail…

Barchart

This interactive bar chart displays multiple data series as colored bars, with buttons allowing users to toggle between grouped and stacked layouts and show or hide individual series. The chart uses D3 v6 with SVG rendering and animated transitions. Data is generated procedurally using a bump function that creates smooth, pseudo-random positive values. Tooltips show precise values on hover, while radio-style buttons and series toggles control the visualization state.

Ppsabela

71% match

Loading thumbnail…

Bubble Update Pattern I

The example demonstrates a bubble chart update pattern using a pack layout, where circles and labels transition between states when the data changes. It shows the four-phase update sequence—join, exit, update, and enter—using d3.pack, d3.hierarchy, and transition methods. The code explicitly styles exiting circles with a reddish fill, while entering circles fade in with a teal fill and grow from a near-zero radius, all animated over 750 milliseconds. The visualization uses SVG elements and d3.v4, with data derived from a hardcoded alphabet array and randomizeData function.

GGerardoFurtado

71% match

Loading thumbnail…

D3 Bar Chart

This interactive D3 v4 bar chart displays two datasets of numbers as vertical steel-blue bars with value labels and a y-axis. Clicking the Update button toggles between a 10-element ascending dataset and an 8-element descending one, demonstrating the enter, update, and exit pattern. The code uses d3.scaleLinear for the y-scale, d3.axisLeft for the axis, and transition().duration(500) to smoothly animate bar heights, positions, widths, and labels when the data changes. SVG rendering handles all visual elements.

MMaxBotta

70% 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

70% match

Loading thumbnail…

Barchart

This example shows an interactive bar chart with multiple data series that can be toggled between grouped and stacked layouts via radio-button style controls. Additional buttons allow users to show or hide individual series. The visualization uses D3 v6 with SVG rendering and animated transitions, employing `d3.stack` to compute stacked values and `d3.scaleBand` and `d3.scaleLinear` for positioning. Data is generated procedurally using smooth random bumps, and mouseover interactions display tooltips with precise values.

Mmachetenwueter

70% match