Skip to main content
SimilarExport ZIP
100%

React App

✓ Published0🌍 Public
AAndrey Getmanov
Last edited May 30, 2022
Created on May 30, 2022
Forked from React Starter

This React example demonstrates a bubble chart visualization using the `@weknow/react-bubble-chart-d3` library, which wraps D3’s force simulation for layout. The chart displays nine category labels—such as CRM, API, and Mobile—sized by numeric values, with a legend and custom click handlers for both bubbles and legend items. The rendering is encapsulated in an ErrorBoundary component that provides fallback error messages. The chart uses configurable graph properties for zoom and offset, while CSS handles label styling and hover behaviors for medium and small bubbles.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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…

React V16 + D3 + Force

This example shows a force-directed bubble chart built with React 16 and D3 v3, where each bubble’s position and size update as the simulation runs. The code uses `d3.layout.force` to calculate physics-based movement, with a negative charge proportional to each circle’s radius, and drives re-renders via React state updates in the `DataSeries` component. The visualization renders as SVG circles, and `requestAnimationFrame` in the force’s tick handler triggers continuous re-rendering, while the final `force.on("end")` logs total time, render time, and tick count to the console. Data is randomly generated as 1,000 points with radii between 2 and 10.

FFasani
78% match
Loading thumbnail…

React V16 + D3 + Force / 50% Less Render Calls

This example shows a force-directed bubble chart rendered with React v16 and D3 v3, where the visualization updates only every other frame to reduce render calls by 50%. The code uses `d3.layout.force` to simulate particle positions with a negative charge, while React manages the SVG circle elements through `createReactClass` components. A custom `shouldComponentUpdate` and a `requestAnimationFrame` loop in the `DataSeries` component toggle rendering on alternating ticks, so the chart redraws only half as often. The visible result is a cluster of steel-blue bubbles that animate smoothly, with performance metrics logged to the console after the simulation ends.

FFasani
77% 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
75% match
Loading thumbnail…

Untitled

A reactive bubble chart visualizes January Medium articles, encoding each post's category by color and its view count by circle radius. Hovering a bubble reveals a tooltip with the article title, category, and number of hearts. The chart relies on `d3.forceSimulation` for layout, `d3.scaleOrdinal` with `schemeCategory10` for colors, and a `d3.scaleLinear` for radius. Data loads from a CSV file via `d3.csv`, and the reusable chart pattern exposes setters for width, height, and column mappings.

Ssergiofco
74% match
Loading thumbnail…

Bubble Chart Example

This example visualizes a small dataset of points with x, y, and size attributes as a bubble chart, where each circle's horizontal and vertical positions map to the x and y values, and its radius corresponds to the size value. The chart is rendered as an SVG element using the d3.v6 library, including linear scales for both axes, axis ticks and labels, and steelblue filled bubbles. The code demonstrates the use of d3.select, d3.max, d3.scaleLinear, d3.axisBottom, and d3.axisLeft.

BBhavanaGIrni
73% 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
73% match
Loading thumbnail…

Bubble Chart with D3.js

This example presents a bubble chart that visualizes product data from a CSV file, mapping Revenue to bubble radius and Profit to a secondary size influence, with colors assigned by category index. It uses D3.js v5 with an SVG rendering approach, reading data via `d3.csv()`, scaling values with `d3.scaleLinear()` and `d3.scaleOrdinal()`, and randomly positioning bubbles within the chart area. Each bubble includes a text label and a tooltip via appended `title` elements, while axis names for Revenue and Profit are added manually.

NNukaShravanKumar
73% match