Interactive Demographic Donut Chart

100%

Interactive Demographic Donut Chart

✓ Published0🌍 Public

Last edited Jan 24, 2023

Created on Jan 22, 2023

This interactive donut chart visualizes the distribution of players across demographic categories, showing subcategories like age ranges (18–24, 25–34) and gender (male, female) as colored slices with hover tooltips displaying percentages and counts. A dropdown menu lets users switch between age and gender views, triggering animated transitions between datasets. The visualization uses d3.pie, d3.arc, d3.scaleOrdinal, and d3.transition in SVG, with data loaded from a CSV file via d3.csv. Hover interactions and a legend with category labels enhance readability.

AI-generated description

Interactive Donut Chart with Category Menu with D3

This visualization shows the number of players for each demographic category (age and gender). Each slice along with associated color represents a subcategory of the age and gender class. The dropdown at the top allows filtering factories based on the selection of category. Users can are given the default view of the age class or and can select the other category 'gender' through the dropdown menu. Hovering over slices of donut chart shows labels, percent, and the total number of users.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled Document

This interactive donut chart displays survey data across gender, age, and race categories from a local JavaScript dataset. Three buttons let users switch between datasets, triggering a new pie chart with animated arc transitions using `d3.pie`, `d3.arc`, and `transition.attrTween`. The SVG rendering applies category-specific colors via a lookup function and shows tooltips on hover using D3 mouse events. SVG paths are drawn with a donut inner radius, and the chart initializes with the gender data on load.

GGerardoFurtado

84% match

Loading thumbnail…

Donut Chart

This donut chart displays the population distribution across seven age groups, from under 5 to 65 and older, using a ring of color-coded arcs. The chart is built with D3 v3, loading data from a CSV file via `d3.csv` and rendering SVG paths. It uses `d3.scale.ordinal` for color encoding, `d3.layout.pie` to compute arc angles from the population values, and `d3.svg.arc` to define the ring geometry with an inner and outer radius. Each segment includes a label positioned at the arc’s centroid.

Mmbostock

78% match

Loading thumbnail…

Making an Interactive Pie Chart

This interactive donut chart displays income distribution across Sales, Dividends, and Interest using a D3 pie layout and arc generator. Hovering over a slice reveals a tooltip showing the percentage of the total amount, calculated with d3.sum. The chart uses a color scale with ordinal colors, labels positioned via arc centroids, and SVG rendering. Data is loaded from a CSV file, and the tooltip fades in and out based on mouseover and mouseout events.

BbeauMarko

77% match

Loading thumbnail…

Untitled

This donut chart displays the distribution of gender counts from a CSV file, with Male (113) and Female (84) shown as two slices. Built with d3.v4 and SVG, it loads data via `d3.csv`, converts the total column to numbers, and uses `d3.pie()` to compute arc angles. The `d3.arc()` generator creates the paths, while `d3.scaleOrdinal` with `d3.schemeSet2` assigns slice colors, and each slice is labeled with its group name using the arc’s centroid.

IIyke2909

77% match

Loading thumbnail…

teractive Pie Charteew

An interactive donut chart visualizes the distribution of income categories from a CSV dataset, with each slice labeled and colored by category. Hovering over a slice displays a tooltip showing the percentage of the total that slice represents. The chart is rendered as an SVG using D3 v5, employing `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal()` for layout and color encoding, with mouse events to update the tooltip’s opacity and position.

NNarayana Reddy

76% match

Loading thumbnail…

Age range of genders

This visualization presents age-range distributions for male and female populations using a diverging bar chart, with each gender extending from a central axis. Users can toggle between showing combined totals or gender-separated views and optionally sort the age ranges. The chart is built with D3 v3, rendering as SVG with animated transitions. It loads data from a CSV file, stacks the gender values using `d3.layout.stack`, and maps ordinal age ranges to y-axes, while linear x-scales handle population counts formatted with `d3.format`. Color scales differentiate genders and age ranges, with tooltips providing additional detail.

PPetrando

76% match

Loading thumbnail…

Making an Interactive Pie Chart

This interactive donut chart displays income sources—Sales, Dividends, and Interest—with each slice labeled and colored via a d3.scaleOrdinal. It uses d3.pie and d3.arc to generate the SVG paths, while mouseover events calculate percentages from the CSV data and reposition a tooltip with d3.select. The chart responds to hovers by increasing slice opacity and shows precise share values, with styling in CSS.

BbeauMarko

76% match

Loading thumbnail…

Donut Chart D3

This interactive donut chart displays categorical data as colored arcs, with a hover effect that enlarges the selected segment. Built with React and rendered as SVG, it uses D3’s `pie` generator to compute arc paths and `scaleOrdinal` for the yellow, red, blue, and green color mapping. On mouse enter, the corresponding arc is redrawn with a larger `arc` radius, while a separate `hoveredArc` path is drawn beneath. The data is hardcoded as an array of `x` and `y` values.

SSiddharthMittal07

76% match