Bubble Testing

100%

Bubble Testing

✓ Published0🌍 Public

Last edited Nov 27, 2017

Created on Nov 27, 2017

The visualization shows a bubble chart of characters from a movie, where each bubble represents a character and its size corresponds to the character's total word count. The complex-looking interface includes a toggle switch that lets users flip the data between categorized and combined states, changing both bubble colors and the simulation's force dynamics. Built with D3 v4, it uses `d3.forceSimulation`, `d3.forceX`, and `d3.forceCollide` to animate bubble positions, while the toggle triggers a transition that swaps between male/female color schemes and adjusts the force's strength. The data comes from a local CSV file, and rendering is done via SVG with animated transitions.

AI-generated description

forked from <a href='http://bl.ocks.org/ProQuestionAsker/'>ProQuestionAsker</a>'s block: <a href='http://bl.ocks.org/ProQuestionAsker/79d0228ae7161e349770e7d553cf4c94'>Bubble Testing</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/07365c0f28b53e44aac54c0023c77a7e'>Bubble Testing</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Bubble Testing

This example visualizes character dialogue data as a force-directed bubble chart, where each circle represents a character and its size encodes total word count via `d3.scaleSqrt`. A toggle switch in the top-left corner filters the circles by sex, splitting them into two clusters or merging them back together by changing the force’s x-position. The code uses `d3.forceSimulation`, `d3.forceX`, `d3.forceCollide`, and `d3.csv` to load the data, with an animated SVG background circle loaded via `d3.xml`.

NNicholasARossi

91% match

Loading thumbnail…

Bubble Chart Experiment

This visualization uses a force-directed bubble chart to compare 2017 box-office performance across films. Bubbles are sized by total gross and colored by distributor; hovering reveals the title. The chart is built with D3 v4, renders in SVG, and animates the layout. Data is from the bo2017c.csv dataset, with circles positioned by the simulation and scaled by box-office revenue.

335degrees

78% match

Loading thumbnail…

Bubble Chart Experiment

This example visualizes the domestic box office performance of 2017 movies as an animated bubble chart. Bubbles are positioned by release week and opening gross, with size encoding total box office and color indicating studio/distributor. Built with D3 v4 and rendered as SVG, the chart animates transitions smoothly, letting viewers track how each film's earnings accumulate week over week. The dataset is drawn from a gist by 35degrees and derived from Box Office Mojo figures.

335degrees

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

76% match

Loading thumbnail…

Untitled

Interactive bubble charts use force simulation to show relative values across categories. Circles sized by a linear scale and colored by an ordinal scale are initially centered, then repel and collide until settling into a packed layout. Dragging nodes repositions them with the simulation restarting, while hovering reveals a tooltip with the exact value. The visualization loads CSV data from a GitHub gist, renders with SVG in React, and relies on d3.forceSimulation, forceCenter, forceManyBody, and forceCollide to animate the layout.

SSitanshu Rupani

76% match

Loading thumbnail…

Bubble Chart Experiment

This bubble chart visualizes the 2017 domestic box-office performance of 65 films, mapping each movie as a circle positioned by release date (x-axis) and box office rank (y-axis). Circle size encodes total gross, while color distinguishes studio categories. Hovering or interacting triggers smooth SVG transitions, updating positions and sizes to reveal additional attributes such as runtime, theater count, or audience rating. The chart animates between these categorical views, with tooltips showing title, studio, gross, and opening weekend values. The visualization uses a force-directed layout to avoid overlaps and makes it easy to spot outliers and trends across the year's release schedule.

335degrees

75% match

Loading thumbnail…

Bubble Chart Experiment

This bubble chart visualizes 2017 box-office earnings for the top 50 domestic films, encoding gross revenue as bubble area and critical reception (Rotten Tomatoes score) as color. Built with D3 v4, it renders as an animated SVG scatterplot: each bubble is positioned by release week, with size mapping to box-office take and hue indicating Tomatometer ratings. The chart animates on load, and the underlying data from bo2017c.csv is displayed via tooltips.

335degrees

75% match

Loading thumbnail…

Bubble Chart Experiment

This bubble chart experiment visualizes box office performance data for 2017 films, using SVG and animation to explore the relationship between release date, budget, and revenue. The chart displays circles of varying sizes representing each film's box office gross, with position encoding opening and closing dates along the x-axis. As the animation plays, bubbles are sorted by rank and gently transition horizontally, making it easy to compare the relative commercial success of different movies across categories like studio and distributor. The view is built with D3 v4 and rendered entirely in SVG, with smooth animated transitions that invite the user to explore the dataset dynamically.

335degrees

75% match