Skip to main content
SimilarExport ZIP
100%

Gender Distribution Chart

✓ Published0🌍 Public
Kkalyanreddy997
Last edited Apr 1, 2020
Created on Apr 1, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Gender Distribution Chart

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.

NNarayana Reddy
94% match
Loading thumbnail…

Fork of Gender Distribution Chart

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.

NNarayana Reddy
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
93% 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
92% 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…

Age Distribution Chart

This interactive stacked bar chart displays age distributions across provinces, rendered with SVG and animation via D3.js (version 3.5.6). Users can toggle between raw counts and percentage of total using radio buttons, which triggers transitions recalculating the stack layout with `d3.layout.stack()` and updating the y-axis tick format. The chart reads from data3.csv and uses `d3.scale.ordinal()` for the x-axis, category20 colors for age bands, and a custom tooltip on hover.

LLex
78% match
Loading thumbnail…

Infection Type Chart

A stacked bar chart displays infection case counts across Chinese provinces, segmented by transmission type: Travel, Relative, Social, and Unknown. Users toggle between absolute counts and percentage-normalized views via radio buttons, triggering animated transitions. The visualization uses d3.layout.stack for stacking, d3.scale.ordinal for the x-axis, and SVG rectangles with smooth transitions. Data comes from data3.csv, sorted alphabetically by province, with a color-coded legend and hover tooltips for additional detail.

Kkalyanreddy997
78% match
Loading thumbnail…

Infection Type Chart

A stacked bar chart displays infection case counts across Chinese provinces, segmented by transmission type: Travel, Relative, Social, and Unknown. Users toggle between absolute counts and percentage-normalized views via radio buttons, triggering animated transitions. The visualization uses d3.layout.stack for stacking, d3.scale.ordinal for the x-axis, and SVG rectangles with smooth transitions. Data comes from data3.csv, sorted alphabetically by province, with a color-coded legend and hover tooltips for additional detail.

Kkalyanreddy997
78% match