Jinsu Bubble

100%

✓ Published1🌍 Public

Last edited Nov 19, 2021

Created on Nov 19, 2021

This bubble chart displays hierarchical data as a packed circle layout, with each bubble sized by a logarithmic scale and colored by category. The visualization uses D3 v7’s `d3.hierarchy` and `d3.pack` to compute the layout, rendering SVG circles and text labels for each node. Tooltips show the full ID and category on hover, while a color legend built with a custom `colorScale` function explains the category mapping. Data is loaded from a CSV via `d3.csv`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Jinsu - Bubblechart

This bubble chart visualizes gene panel data by category, using circle area to represent values and color to distinguish groups such as Origin, Kinase Family, and Related Disease. Built with React and D3 v7, it computes a hierarchical pack layout via `d3.pack` and `d3.hierarchy`, then renders SVG circles and labels with `d3.select` and `d3.join`. A color legend is generated from `d3.scaleOrdinal` with `d3.schemeTableau10`, and tooltips display the full id and category. The data comes from `panel_data.csv`.

MMinwoo Pak

88% match

Loading thumbnail…

Fork of Jinsu Bubble

This visualization displays song popularity and genre using a bubble chart, with each bubble sized by popularity and colored by genre according to a Tableau10 ordinal scale. The chart packs hierarchical leaves via `d3.pack` and renders SVG circles, labels, and tooltips from a CSV dataset. A legend built with custom selection methods shows genre color mappings. The code uses D3 v7 APIs including `d3.hierarchy`, `d3.map`, `d3.InternSet`, and `d3.scaleOrdinal`.

Wwaterm80

83% match

Loading thumbnail…

Bubble Chart

A bubble chart encodes hierarchical data as a packed circle layout, with each circle’s area proportional to a numeric value and color representing its top-level package. The visualization uses D3 v4’s `d3.pack` and `d3.hierarchy` to compute the layout, then renders SVG circles and clipped text labels. Data comes from the Flare class hierarchy stored in a CSV file. Hovering reveals the full class name and formatted value via SVG `<title>` elements.

Mmbostock

75% match

Loading thumbnail…

Exploración1

This example visualizes a dataset of yearly counts as a circular bubble chart, where each circle’s size encodes a numeric value and its color represents a category derived from the data’s ID. The visualization uses D3.js v5 to load a CSV file with `d3.csv`, then applies the `d3.pack` layout to compute circle positions and radii, with `d3.hierarchy` structuring the data. Each leaf node is drawn as an SVG `<circle>` with a fill color from `d3.scaleOrdinal(d3.schemeCategory20c)`, and text labels are added with clipping paths to keep them inside the circles. The chart also includes tooltips via `<title>` elements showing the exact value for each circle.

663anp3ca

74% match

Loading thumbnail…

Untitled

A force-directed bubble chart visualizes a small dataset of 12 items, each with categorical attributes. The visualization initially displays all nodes as colored circles that can be dragged and selected. Buttons allow users to split the bubbles into separate clusters by Location, Group, Class, or Type, with titles indicating the active categories. Using D3 v4, the chart employs `d3.forceSimulation` with `d3.forceCollide`, `d3.forceManyBody`, `d3.forceX`, and `d3.forceY` to position the nodes. The SVG circles and text labels are rendered from a CSV file. Users can interactively drag and select individual bubbles to highlight them.

JJoker-tr

73% match

Loading thumbnail…

D3 v5 Circle-Packing

This visualization shows a hierarchical dataset as nested circles, with each circle’s size encoding a numeric value and its color representing depth in the tree. Built with D3 v5 and rendered as SVG, it uses `d3.stratify` to convert the tabular flare.csv data into a hierarchy, `d3.pack` for layout, and `d3.scaleSequential` with `d3.interpolateMagma` for coloring. Hovering highlights a node and its ancestors via the `mouseover` and `mouseout` events.

DDylan

73% match

Loading thumbnail…

Bubble Chart with Different Colors

This example shows a bubble chart of school and student metrics across categories, encoding schools per 1000 on the x-axis, students per 1000 on the y-axis, earnings as bubble radius, and category as color. It loads CSV data from a GitHub gist and renders an SVG using d3.csv, d3.scaleLinear, d3.scaleSqrt, d3.scaleOrdinal with d3.schemeCategory10, d3.axisBottom, and d3.axisLeft to produce axes, labels, and a color legend.

HHarshithaAmbilpur

72% match

Loading thumbnail…

Circle-Packing

This example visualizes a hierarchical dataset as a circle-packing layout, where each leaf node is a circle sized by its value and nested groups are represented by larger containing circles. It shows the structure of a module tree from a CSV file, with color indicating depth and text labels clipped to leaf circles. The code uses `d3.stratify` to build the hierarchy from flat data, `d3.pack` for layout, and `d3.scaleSequential` with the `interpolateMagma` color scheme. Hovering highlights a node and all its ancestors via `d3.selectAll` with the `node--hover` class, rendered as SVG elements in a `<g>` container.

HHugoberry

72% match