Fork of Bubbles with Json Data

100%

Fork of Bubbles with Json Data

✓ Published1🌍 Public

Last edited Nov 7, 2022

Created on Nov 7, 2022

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

95% match

Loading thumbnail…

Fork of Bubbles with Json Data

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.

Hhemantsharma64

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

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

81% match

Loading thumbnail…

Protótipo - Bubbles with Json Data

This visualization displays a set of four legal cases as bubbles, each sized by a numeric strength value and labeled with a person’s name and monetary amount. The bubbles are positioned using a force-directed simulation that applies horizontal and vertical forces based on the strength scale, along with collision detection to prevent overlap. The chart is rendered in SVG, leveraging D3 v5’s `d3.forceSimulation`, `d3.forceX`, `d3.forceY`, and `d3.forceCollide` APIs. The underlying data is structured in JSON with fields for strength, process ID, name, number, and value, and the visualization is built within a React framework.

RRenan Barbosa

79% match

Loading thumbnail…

React Starter

This example shows a circular bubble chart where hierarchical data is displayed as packed circles, with labels split across multiple lines and colored by group. The visualization uses d3.pack to compute the layout and D3’s selection API to join data to SVG circles, clip paths, and text elements. It incorporates React for the user interface and DOM.uid for unique identifiers, while datasets are loaded from a JSON file. Tooltips reveal each leaf’s title and formatted value.

SStefan Gerrits

78% match

Loading thumbnail…

Bubble Chart with D3.js

This example shows a bubble chart that visualizes product performance using Revenue to size each circle and Profit to influence color, with bubbles randomly positioned across the SVG canvas. Built with D3.js v5 and React, it loads data from a CSV file using `d3.csv` and renders circles and labels through SVG selections. The code uses `d3.scaleLinear` for mapping Revenue and Profit to radii, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and adds tooltips via SVG `title` elements. Axes labels for Revenue and Profit are manually positioned as text elements.

Hharsha

77% match