Fork of Bubbles with Json Data

100%

Fork of Bubbles with Json Data

✓ Published0🌍 Public

Last edited Oct 7, 2023

Created on Oct 7, 2023

This example visualizes a dataset of people and monetary values as a bubble chart using D3.js v5. Each bubble represents a person, with the circle radius and displayed amount corresponding to their "valor" field. The visualization is built from hierarchical JSON data using `d3.pack` and `d3.hierarchy` layouts. The circles are rendered as SVG elements, with click handlers that reference a process loading function, and each bubble includes tooltip text and labeled values.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

93% match

Loading thumbnail…

Bubbles with Json Data

This example visualizes a JSON dataset of people and monetary values as a bubble chart. Each bubble's size corresponds to the `valor` field, with names and dollar amounts rendered inside. Built with React and D3 v5, it uses `d3.pack` and `d3.hierarchy` to compute circle layouts, then appends SVG circles and text nodes. The circles are clickable, triggering a process load function, and styled with orange fills and custom fonts.

RRenan Barbosa

91% match

Loading thumbnail…

Bubbles with Json Data

This example visualizes a small dataset of two categories, "Reclamantes" and "Fases Processuais," as colored bubbles whose sizes reflect their respective counts. Using the D3.js library (v5) within a React framework, the code applies `d3.pack` for circle packing and `d3.hierarchy` to structure the data. The resulting SVG is rendered into an HTML page, with each bubble labeled and interactive via click events.

RRenan Barbosa

82% match

Loading thumbnail…

Bubbles with Json Data

This example visualizes grant data as an interactive bubble chart, where each circle’s size reflects the grant amount and color encodes the grant group. The bubbles are initially grouped in the center, then the toolbar allows toggling between grouped and year-split views. Built with React and D3 v5, it uses `d3.forceSimulation` for layout, `d3.scalePow` for radius scaling, and SVG transitions for animation. JSON data drives the visualization, with hover tooltips and mouseover events for detail display.

RRenan Barbosa

80% match

Loading thumbnail…

Fork of Bubble tree test

This example presents an interactive bubble tree visualization of hierarchical medical data. It displays a collapsible node-link diagram where clicking a node reveals its children, recentering the tree, and showing detailed information about the selected item in a separate panel. The visualization uses D3.js v6 with SVG rendering and smooth transitions, loading data from a remote JSON file hosted on GitHub. The chart dynamically sizes node radii based on the number of children and categorizes nodes by their medical descriptions. The code also demonstrates recursive tree traversal and data categorization logic within a React framework.

QQuinn Sebso

78% match

Loading thumbnail…

Fork of Fork of Tidied up Bubble Chart

This example creates a bubble chart using D3.js v7's `d3.pack` cluster layout and `d3.rollup` to aggregate total profit by region from a CSV sales dataset. The visualization renders SVG circles with `d3.scaleOrdinal` color mapping based on region, while the bubble radius is determined by the summed profit values. Labels inside each bubble wrap text with a custom `wrap` function, and a tooltip div provides hourly profit details on mouseover. The chart updates hover opacity and tooltip position based on pointer events, with data loaded via `d3.csv` and rendered in a React-free HTML page.

GGabriel Ing

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

77% match