Skip to main content
SimilarExport ZIP
100%

Fork of Gubs Intro course

✓ Published0🌍 Public
GGabriel Ing
Last edited Jan 28, 2025
Created on Jan 28, 2025
Forked from Gubs Intro course

A fork of an introductory course example renders dummy categorical data as a bubble chart using the d3 v7 `pack` layout on an SVG canvas. Each of four groups (A–D) maps to a circle with area proportional to its `total` value, while the `percentResponse` field is logged but not visualized. The code selects the `#chart` div, appends an SVG, and applies the hierarchical circular packing algorithm to position and size the leaves.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Gubs Intro course

This visualization displays dummy survey data for groups A through D, using black circles to represent each group’s total count with area proportional to the value via `d3.scaleSqrt`, while opacity encodes the total relative to 50. Group labels appear centered within each circle as white text. Built with D3 v7 and React, the SVG rendering positions circles horizontally with a fixed spacing, and the code demonstrates basic data binding with `selectAll().data().join()` for both circles and text elements.

Hhquazza@gmail.com
82% match
Loading thumbnail…

Fork of practice_with_h

This example demonstrates a circular packing visualization that animates between two views of multi-group data, switching every two seconds between total counts and percentage responses. Circle radii and positions smoothly transition using D3's transition API with a 200-millisecond duration and linear easing, while group labels remain centered within each circle. The visualization is built with D3 v7, using the d3.pack layout algorithm to arrange nodes as non-overlapping circles, and SVG rendering with CSS hover effects. A JavaScript timer toggles the data metric, causing the packing to recalculate and animate the updated positions and sizes.

GGabriel Ing
74% match
Loading thumbnail…

Fork of Fork of Tidied up Bubble Chart

This example creates a bubble chart using D3.js v7's `d3.pack` cluster layout and `d3.rollup` to aggregate total profit by region from a CSV sales dataset. The visualization renders SVG circles with `d3.scaleOrdinal` color mapping based on region, while the bubble radius is determined by the summed profit values. Labels inside each bubble wrap text with a custom `wrap` function, and a tooltip div provides hourly profit details on mouseover. The chart updates hover opacity and tooltip position based on pointer events, with data loaded via `d3.csv` and rendered in a React-free HTML page.

GGabriel Ing
73% match
Loading thumbnail…

Fork of Basic Circle Pack

A fork of the basic circle pack example demonstrates hierarchical data visualization using d3.pack, where circles represent nested nodes and are colored by depth using a linear scale. The view animates between zoom levels via d3.interpolateZoom, triggered by clicking circles or the background. Buttons allow adding and removing data, though the specific data mutation logic is not shown. The visualization renders in SVG with smooth transitions, and labels appear only for the current focus node's children.

554x1
73% 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
72% match
Loading thumbnail…

Fork of Untitled

This interactive visualization uses a circular packing layout to display the hierarchical structure of the flare dataset, with nested circles representing categories and their sub-items sized by a numeric value. Clicking a circle zooms into that node, smoothly animating the view through a tween on the interpolateZoom function while adjusting label visibility and opacity for the new focus. The SVG is rendered with D3 v4, using the d3.pack layout and d3.hierarchy API to compute circle positions, and a linear color scale with HSL interpolation to encode depth. The code is built as a React component, though the visualization itself relies on direct DOM manipulation through D3 selections.

LLaowei42
72% match
Loading thumbnail…

Fork of Tidied Category grouped Bubble Chart

This example shows grouped bubble charts with a categorical color variable that alternates between Item Type and Region every 200 seconds. Built with React and d3.v7, it loads CSV sales data via d3.csv, aggregates units sold with d3.rollup, then applies d3.pack and d3.hierarchy to position bubbles. Interactive tooltips appear on mouseover, and SVG text labels wrap using a custom function. Animation occurs through the setInterval-driven color and data updates.

GGabriel Ing
72% match
Loading thumbnail…

Fork of bubblechart

This interactive bubble chart allows users to explore a multivariate dataset by selecting which numeric columns to map to the x-axis, y-axis, and bubble radius, and which categorical column to use for color encoding. The visualization updates dynamically, using D3.js v7 scales and SVG circles to render the data. Dropdown menus filter numeric and categorical columns from the loaded CSV file, which is fetched from a GitHub repository. The chart employs `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble sizes, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors.

LLayaMyadam@my.unt.edu
71% match