Gender Distribution Chart

100%

Gender Distribution Chart

✓ Published0🌍 Public

Last edited May 11, 2020

Created on May 11, 2020

This chart shows the gender distribution of students across numerous game design and media modules, with stacked bars representing males and females for each course. A radio button toggle switches between absolute counts and percentage-based views, animating the transitions smoothly. The visualization uses D3.js version 3.5.6, leveraging the `d3.layout.stack()` API with dynamic offset switching ("zero" vs. "expand"). The SVG rendering, driven by a CSV data file, sorts modules alphabetically and employs category colors with a custom legend. Hovering highlights individual bars through CSS opacity changes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Gender Distribution Chart

This chart displays the gender distribution of students across numerous game and media production modules, with each bar representing a module and its segments showing male and female counts. The visualization uses D3.js with a stacked bar layout, giving users a radio-button toggle to switch between absolute counts and percentage-based views. The x-axis lists all module names, and the legend identifies the two gender categories. The chart is rendered as an interactive SVG, and users can inspect the gender breakdown for each module.

Mmarksampras

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

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

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

89% match

Loading thumbnail…

Gender Distribution Chart

This interactive stacked bar chart shows the gender distribution of students (female vs. male) across various university modules, using data from a CSV file. It displays the count of each gender per module, with a radio-button toggle that switches the y-axis between absolute counts and percentage-based proportions. The visualization is built with D3.js, using the `d3.layout.stack` API to stack the bars and `d3.svg.axis` for axes. Smooth transitions animate the change between count and percent views via the `.transition()` function.

Aanonymous5776

88% match

Loading thumbnail…

Gender Distribution Chart

This interactive stacked bar chart visualizes gender distribution (female versus male) across numerous university module codes. It uses D3.js to render SVG elements and includes an animated toggle that switches between raw counts and percentage proportions. Users can change the view using radio buttons, which triggers a transition of the bar heights and y-axis tick formatting. The chart reads from a CSV file containing module names and gender counts.

KKeerthiKandadai

88% match

Loading thumbnail…

Fork of Gender Distribution Chart

A stacked bar chart shows the gender distribution of students across university modules, with male and female counts represented per module. The visualization includes a radio-button toggle to switch between absolute counts and percentages, animating the bars and y-axis scale accordingly. Built with D3.js v3, it uses d3.layout.stack for stacking, d3.svg.axis for axes, and transitions to update the chart. Data is loaded from a CSV file, and the chart is rendered as an SVG.

Mmarksampras

86% match

Loading thumbnail…

Fork of Gender Distribution Chart

This example visualizes the gender distribution across university modules, presenting the counts of male and female students as stacked bars for each course. It uses D3.js with an ordinal x-axis and linear y-axis to display the data. The chart supports switching between raw counts and percentage-based views via radio buttons, animating the transitions with `transition()` and `duration()`. Course names are listed vertically on the x-axis, and a legend identifies the gender categories. The visualization reads from a CSV file and employs D3’s stack layout to compute the bar segments.

Mmarksampras

85% match