Skip to main content
SimilarExport ZIP
100%

Bubble Chart

✓ Published0🌍 Public
HHarshithaAmbilpur
Last edited Jul 21, 2023
Created on Jul 20, 2023
Forked from Hello VizHub

This bubble chart displays the relationship between the number of women and men at various universities, with bubble size representing the gender gap. The visualization uses a scatter plot layout where each school is positioned by their female and male student counts, and the radius of each bubble scales with the gap between these values. The chart is built using D3 v6, employing linear scales for the x and y axes, a square-root scale for bubble radius, and an ordinal color scale to distinguish schools. Data is loaded from an external JSON file, and the visualization includes a color-coded legend rendered as SVG.

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 Fork of Gender Distribution Chart

This interactive stacked bar chart displays the gender count for each university module, with a radio-button toggle to switch between absolute counts and percentage proportions. Built with D3.js (version 3.5.6), the visualization uses `d3.layout.stack` to aggregate the male and female data from a CSV file, and animates transitions between the two modes using D3's `.transition()` method. The chart renders as an SVG with rotated x-axis labels, a legend, and hover effects that reduce rectangle opacity.

NNarayana Reddy
76% 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
76% match
Loading thumbnail…

Gender Distribution Chart

This interactive chart visualizes gender distribution across university modules, displaying stacked bars for male and female counts that can be toggled between raw values and percentages via radio buttons. The visualization uses D3.js (v3) with SVG rendering and includes animated transitions when switching between the two display modes. Data comes from CSV files containing module codes and gender-specific enrollment numbers. The chart features a color-coded legend and a hover tooltip, with axes labeled and rotated for readability.

KKeerthiKandadai
76% match
Loading thumbnail…

Gender - Version 1.2

This interactive sunburst chart visualizes the gender distribution of participants across university modules, rendering hierarchical data as an animated radial diagram. Users toggle between male and female datasets via a dropdown menu, with data loaded from separate JSON files. The visualization highlights selected branches on mouseover, displaying the percentage, raw count, and path breadcrumb in the center. Built with D3 v4’s `d3.partition` and `d3.arc`, it uses color-coded segments to represent academic departments.

KKeerthiKandadai
76% match
Loading thumbnail…

Gender Distribution Chart

This stacked bar chart shows the gender distribution of students across university modules, with each bar divided into female and male counts. Users can toggle between raw counts and percentages of total enrollment, which animates the bar heights and adjusts the y-axis tick format. Built with D3.js (version 3.5.6), the visualization uses `d3.layout.stack` and ordinal/linear scales, rendering as SVG with transition effects triggered by radio button inputs. Data is loaded from CSV files containing module codes and gender counts.

KKeerthiKandadai
76% match
Loading thumbnail…

Gender Distribution Chart

This stacked bar chart visualizes the gender distribution of students across university modules, with bars representing counts of males and females for each course. Users can toggle between absolute counts and percentage-based views via radio buttons, which recalculates the stack layout with d3.layout.stack and triggers smooth transitions. Built with D3.js version 3.5.6, the chart loads data from a CSV file and renders as SVG, featuring rotated x-axis labels and a color-coded legend to distinguish genders.

Mmarksampras
75% match
Loading thumbnail…

Fork of Gender Distribution Chart

This visualization displays the gender distribution of students across university modules using stacked bar charts, with each bar representing a module’s female and male enrollments. It supports toggling between absolute counts and percentage views via radio buttons, triggering animated transitions that rescale the bars. The chart uses D3.js v3’s ordinal and linear scales, stacked layout, and SVG rendering, with data loaded from a CSV file. Tooltips and a categorical color legend enhance interactivity, while axis labels and rotated module names aid readability.

NNarayana Reddy
75% match
Loading thumbnail…

Fork of Gender Distribution Chart

This visualization displays the gender distribution of students across university modules using stacked bar charts, with each bar representing a module’s female and male enrollments. It supports toggling between absolute counts and percentage views via radio buttons, triggering animated transitions that rescale the bars. The chart uses D3.js v3’s ordinal and linear scales, stacked layout, and SVG rendering, with data loaded from a CSV file. Tooltips and a categorical color legend enhance interactivity, while axis labels and rotated module names aid readability.

NNarayana Reddy
75% match