Fork of bubblechart

100%

Fork of bubblechart

✓ Published0🌍 Public

LLayaMyadam@my.unt.edu

Last edited Apr 26, 2024

Created on Apr 26, 2024

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.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bubble Chart new

This interactive bubble chart visualizes the classic Iris dataset, plotting flower measurements as circles on a scatterplot. Users select from sepal and petal attributes via dropdowns to update the x and y axes. The D3 v6 code loads data with `d3.csv`, creates an SVG canvas, and uses `d3.scaleLinear` and `d3.axisBottom` to map positions and axes. When attributes change, a transition with a 500-millisecond duration animates the circles to their new coordinates, providing dynamic exploration of the data.

Hhuangweijie0310102@gmail.com

80% match

Loading thumbnail…

Fork of Tidied up Bubble Chart

This bubble chart visualizes sales record data loaded from a CSV file via `d3.csv`, grouping transactions by region and sizing circles by total profit. Each circle is color-coded using `d3.scaleOrdinal` and positioned with the `d3.pack` layout, which applies a hierarchical clustering algorithm to arrange the bubbles. Interactive tooltips appear on mouseover, displaying region and profit details in an HTML div. The visualization renders with SVG, styled through CSS hover effects, and includes region labels inside each circle.

Hhquazza@gmail.com

80% match

Loading thumbnail…

Fork of Bubble Chart - Clustered with CSV import + Tooltip

This example demonstrates a clustered bubble chart with interactive tooltips, using sales data from a CSV file. It visualizes two facets of the data side-by-side: one chart sizes bubbles by "Total Profit" and another by "Total Cost", with each bubble labeled by country. The visualization uses D3 v7's `d3.pack()` layout algorithm to create the cluster arrangement, and implements custom tooltips via HTML elements that display country and profit or cost details on mouseover. The code employs D3's `d3.csv()` to import data from a remote gist, and renders resulting SVG circles and text labels within a React framework, with styling applied through CSS.

GGabriel Ing

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

79% match

Loading thumbnail…

Fork of Bubble chart

This fork of D3's bubble chart uses a CSV dataset of car makes to visualize the relationship between average horsepower, torque, and highway MPG. Each circle's x-position maps to horsepower, its y-position to torque, and its radius is scaled to highway MPG. The color of each bubble encodes the car make. The visualization demonstrates a color legend, a bubble-size legend, and a custom tooltip that reveals the make on hover. Rendered with SVG in D3 v7, the chart uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for coloring, and includes both axis labels and a title.

Iindushashi.g@gmail.com

79% match

Loading thumbnail…

Fork of interactive Bubble chart - Engine

This interactive dashboard visualizes car performance metrics, showing relationships between engine displacement, fuel economy, weight, and cylinder count across multiple chart types. Users select from bubble, scatter, bar, line, heatmap, pie, and box plot views via dropdown menu. Built with D3 v7, the visualization uses d3.csv for data loading, d3.scaleLinear, d3.scaleOrdinal, and d3.schemeCategory10 for scales and colors, with SVG-based transitions and tooltip interactions for each chart.

NNita

79% match

Loading thumbnail…

Fork of Bubble chart

This bubble chart visualizes the relationship between BMI and physical health, with bubble size representing mental health. Using D3.js v7, it loads CSV data from a GitHub Gist, scales the axes with `scaleLinear` and `scaleSqrt`, and renders circles as SVG shapes. Animated axes are drawn with `axisBottom` and `axisLeft`, while text labels identify each axis.

Sshreyasribearelly@gmail.com

79% match

Loading thumbnail…

fork of activity_6_question_4

This bubble chart visualizes product data, mapping price to the x-axis, sales volume to the y-axis, and rating to bubble radius, with categories distinguished by color. The D3 v7 code uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for circle sizes, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. The SVG rendering includes a legend, axis labels, and interactive tooltips that display product details on mouseover. Data is loaded from a CSV file using `d3.csv`.

JJaswanthkota@my.unt.edu

79% match