Fork of Gender Distribution Chart

100%

Fork of Gender Distribution Chart

✓ Published0🌍 Public

Last edited May 4, 2021

Created on May 4, 2021

This chart compares the distribution of male and female cases across Chinese provinces using stacked bar charts, with radio buttons to toggle between raw counts and percentage of total illness. The visualization uses D3.js v3, including d3.layout.stack for stacking, d3.svg.axis for axes, and D3 transitions to animate the re-scaling of bars when switching modes. Data is loaded from a CSV file, and the color scale uses d3.scale.category20 to distinguish between genders. The chart includes an interactive legend and hover effects on the SVG rectangles.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Gender Distribution Chart

NNarayana Reddy

100% match

Loading thumbnail…

Gender Distribution Chart

A stacked bar chart displays gender distribution across Chinese provinces, with male and female counts stacked per province. Users toggle between raw counts and percentages of total illness via radio buttons, triggering animated transitions that rescale the y-axis and re-stack the bars. The visualization uses D3.js version 3.5.6 with the `d3.layout.stack` API, ordinal and linear scales, SVG axes, and transition methods. Data comes from two CSV files, though only `data3.csv` containing provincial gender counts drives this chart. Hovering highlights bars through CSS opacity changes.

Kkalyanreddy997

94% match

Loading thumbnail…

Gender Distribution Chart

This interactive stacked bar chart displays gender distribution across Chinese provinces using data3.csv, with raw counts and percent-of-total views toggleable via radio buttons. D3 v3’s layout.stack, ordinal xScale, and linear yScale render the bars, while transition functions animate changes between modes. The SVG visualization includes rotated province labels, a color-coded legend, and a tooltip; it also references data2.csv in the repository, though the active chart focuses on the provincial male/female dataset.

WW9183907

90% match

Loading thumbnail…

Gender Distribution Chart

This interactive stacked bar chart visualizes gender distribution across Chinese provinces, with controls to toggle between raw counts and percentage-of-total values. The visualization uses D3.js v3, loading province and gender data from CSV files and animating transitions between the two display modes via `transition()` calls. The chart resets the stack layout's offset between "zero" and "expand" to switch counting methods, while axis tick formats change accordingly. A custom legend maps categorical colors to gender segments, and hover effects reduce rectangle opacity for emphasis.

LLex

90% match

Loading thumbnail…

Age Distribution Chart

This stacked bar chart visualizes the age distribution of illness cases across Chinese provinces, with each bar segmented into ten-year age brackets from 0-10 to 90-100 years. Users can toggle between raw case counts and percentage-of-illness views via radio buttons. Built with D3.js version 3.5, the visualization uses `d3.layout.stack` for stacking, `d3.scale.ordinal` and `d3.scale.linear` for axes, and includes smooth transitions when switching between count and percent modes. The data comes from a CSV file, with SVG rendering and interactive hover effects.

Kkalyanreddy997

84% match

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

78% match

Loading thumbnail…

Fork of Infection Type Chart

This fork of the Infection Type Chart visualizes stacked bar counts of infection types—Unknown, Social, Relative, Travel—across Chinese provinces, with an animated toggle between absolute case numbers and percentage shares. Using D3 v3 with SVG, it employs `d3.layout.stack` to arrange the series and transitions to update bar geometry and axes on user input. The chart sorts provinces alphabetically, rotates x-axis labels, and includes a hand-built legend and hover tooltip styling from `styles.css`.

NNarayana Reddy

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

78% match