Fork of Fork of Bubbles with Json Data

100%

Fork of Fork of Bubbles with Json Data

✓ Published0🌍 Public

Yyuli19991001

Last edited Nov 19, 2022

Created on Nov 19, 2022

Forked from 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`.

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

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

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

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

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

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

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

75% match

Loading thumbnail…

Fork of Bubble chart

This visualization shows the relationship between popularity and valence for Spotify artists, using a bubble chart where each circle represents an artist. The x-axis maps average popularity, the y-axis maps average valence (musical positivity), and the bubble size indicates the number of tracks per artist. Hovering over a bubble reveals the artist name and track count via a tooltip. The code loads CSV data with d3.csv, aggregates it using JavaScript `reduce` methods, and renders SVG circles with D3 v4 scale functions for positioning, size, and color.

NNathelen

75% match