Protótipo - Bubbles with Json Data

100%

Protótipo - Bubbles with Json Data

✓ Published2🌍 Public

Last edited Apr 12, 2020

Created on Apr 6, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

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

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

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

77% match

Loading thumbnail…

Let's make face with D3!

This visualization shows a bubble chart displaying legal case data, with categories such as Reclamantes, Fases processuais, and Pedidos represented as red circles sized by their count values. Built with React and D3 v4, the example uses d3.pack and d3.hierarchy to compute the circular layout, rendering nodes as SVG groups with appended circles and text labels. Clicking any bubble triggers a simple alert dialog, demonstrating basic interactivity within the packed layout.

RRenan Barbosa

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

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

75% match