Let's make face with D3!

100%

Let's make face with D3!

✓ Published0🌍 Public

Last edited Feb 21, 2020

Created on Feb 18, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

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

76% match

Loading thumbnail…

Smile

This interactive bubble chart uses a force-directed layout to visualize a small dataset of six categories, such as "Reclamantes" and "Fases processuais," with each bubble's size proportional to its count. Built with D3.js, it employs `d3.forceSimulation` and `d3.forceCollide` to position the circles, while custom scales (`d3.scaleLinear`, `d3.scaleSqrt`) map counts to coordinates and radii. The SVG output labels each node with its truncated name and count, using a categorical color scheme.

RRenan Barbosa

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

74% match

Loading thumbnail…

React App

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.

AAndrey Getmanov

73% match

Loading thumbnail…

Lets make face with D3.js

This example visualizes a simple bar chart from an array of numeric values, `[4,8,15,16,23,42]`, where each value determines the width of a colored bar. The page uses D3.js v5 loaded from a CDN, alongside plain HTML and CSS, to render the bars with steel-blue backgrounds and right-aligned white text inside each div. The chart demonstrates basic data binding and styling without complex D3 scales or axes, relying instead on static div elements with inline width styles. It serves as a minimal introduction to representing data as proportional rectangles.

Kkhuton

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

73% match