Jinsu - Bubblechart

100%

Jinsu - Bubblechart

✓ Published0🌍 Public

Last edited Nov 19, 2021

Created on Nov 18, 2021

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

AI-generated description

Boilerplate code for a React + D3 visualization with:

Example of D3 as React Component
CDN links for React, ReactDOM, and D3
Basic React boilerplate
Variables for width, height and margins
useData hook to fetch a CSV URL.
VizContainer component that:
- Abstracts SVG/group container elements
- Follows the margin convention

MIT Licensed

Similar vizzes

Loading thumbnail…

Jinsu Bubble

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

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

80% match

Loading thumbnail…

Jinsu - Request

This example shows a React and D3.js scatterplot of a hepatitis C dataset loaded from a CSV file, with the margins clearly outlined for debugging layout. The visualization uses `useData` to fetch and parse the data with `d3.csv`, then renders it inside a `VizContainer` that abstracts the SVG and group elements following the margin convention. The code defines fixed dimensions and applies a shared `VizContainer` component to structure the chart, while the data itself is only loaded without any mapping, leaving the plot empty until further customization.

MMinwoo Pak

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

70% match

Loading thumbnail…

D3-Bubble Chart

This example displays the Iris dataset as a bubble chart, plotting sepal width on the x-axis and petal width on the y-axis. Circle size encodes sepal length, while color distinguishes species (setosa, virginica, versicolor) via a scaleOrdinal with a custom range. Built with D3 v7, it uses d3.csv for data loading, d3.scaleLinear for positioning and size, and SVG circles for rendering. The chart also includes axis labels and size legend annotations.

CChandana Srinivas

70% match

Loading thumbnail…

Bubble Chart

This bubble chart visualizes the relationship between age and BMI for approximately 250 individuals, with circle size encoding insurance charges and color distinguishing gender. Built with D3 v7 in a React-agnostic HTML page, it uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for male/female coloring, and `Math.sqrt` to map charges to radius. Data loads asynchronously from a CSV file via `d3.csv`, and the SVG rendering includes custom axes, labels, and a legend showing size and color ranges.

AArun Pratap

69% match

Loading thumbnail…

Bubble Chart

This bubble chart displays the count of different fruit types in a dataset using a pie chart layout with animated, exploding slices. Each slice is colored distinctly and rendered with SVG paths and a smooth transition. The visualization is built with D3 v3, using the `d3.layout.pie` layout and `d3.svg.arc` for arc paths, while the `transition` API animates the slices outward into a dramatic exploded effect. Data is loaded from a local CSV file, and the color palette comes from `d3.scale.category20`.

DDarienLiang

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

68% match