Stacked-bar with own data

100%

Stacked-bar with own data

✓ Published0🌍 Public

Last edited Jan 30, 2025

Created on Jan 30, 2025

A stacked bar chart visualizes the total distance of physical activities per year, with bars segmented by sport type (Run, Ride, Walk, and Hike combined). The chart uses an SVG rendering pipeline with D3 v7’s `d3.csv` for data loading, `d3.group` and `reduce` for aggregation, and `d3.stack` to compute stack offsets. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while a categorical `d3.scaleOrdinal` assigns colors to the four activity categories. The data originates from a personal fitness tracking CSV, with distances converted from meters to kilometers.

AI-generated description

example copied from d3-graph-gallery

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity-6_Task-2_Ques2

This example shows a stacked horizontal bar chart of activity breakdowns by sport, displaying cardio, strength, and flexibility percentages for ten sports from a CSV file. It uses D3 v7 with SVG rendering, loading data via `d3.csv` and constructing the visualization with `d3.stack`, `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom`. The chart includes a legend, axis labels, and colored segments with numeric scaling from 0 to 100.

VVasanth Krishna

79% match

Loading thumbnail…

Stacked Bar Graph

This example shows a stacked bar graph where each bar represents a total value composed of three categorical segments, using data from an external CSV file. The visualization renders as an SVG chart with a light gray background, axes, a title, and a color-coded legend. It loads the dataset with `d3.csv`, transforms the columns into numeric values, and uses `d3.stack` to arrange the segments. The chart draws rectangles via SVG and scales the axes using `d3.scaleBand` and `d3.scaleLinear`, with colors assigned by `d3.scaleOrdinal` and `d3.schemeCategory10`.

NNukaShravanKumar

79% match

Loading thumbnail…

stacked bar

A stacked bar chart displays records published by month in 2015, broken into four categories: Geographic, Dataset, Application, and WebService. The chart uses D3.js (v3.5.5) to load the CSV data from `views.csv`, compute cumulative y-values for each segment, and render colored rectangles per category. An ordinal x-scale maps months, a linear y-scale encodes total counts, and a legend identifies the color-coded categories. The SVG rendering includes axes formatted with the `.2s` tick format and uses `d3.svg.axis` for the bottom and left axes.

MMbrownshoes

78% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart visualizes the frequency of game-playing habits across different age groups, with each bar segment representing a specific frequency category. The data is loaded from a CSV file using d3-dsv, then processed with d3-array to compute totals and sorted in descending order. The chart uses d3-scale for positioning and color encoding, d3-shape to compute stacked positions, and d3-axis for the axes, with y-axis labels formatted using SI prefixes via d3-format. The visualization is rendered as SVG, displaying the full distribution of responses across all age cohorts.

JJdlv00

78% match

Loading thumbnail…

Stacked-bar-example

This stacked bar chart displays the distribution of three subgroups across multiple categorical groups, with each bar segment colored distinctly to show proportional composition. The visualization uses D3 v7 to load CSV data via `d3.csv` from a GitHub-hosted dataset, then applies `d3.stack()` and `d3.scaleBand()` to structure and position the bars. Colored segments are rendered as SVG rectangles using `d3.scaleOrdinal` for color mapping, with axes generated through `d3.axisBottom` and `d3.axisLeft`.

GGabriel Ing

78% match

Loading thumbnail…

Stacked bars

Stacked bars shows four horizontal bars sorted in descending order, each with a cumulative value label at its right edge. The example uses d3.scale.linear for the x-axis range, d3.scale.ordinal with a custom color range for the bars, and d3.selectAll to bind the data array to SVG groups. The code draws rectangles with varying widths based on the data, while text elements display a running total that accumulates as the bars are processed. The data is hardcoded as an array, and the visualization is rendered in SVG with a gray background and black border.

AAlexDaGr8

77% match

Loading thumbnail…

Task 6.2

This example shows a stacked horizontal bar chart comparing five sports across five attributes—Popularity, Physical Intensity, Strategy, Teamwork, and Entertainment Value—using data from a CSV file. The visualization uses D3 v7 with SVG rendering, employing `d3.stack()` to create stacked segments, `d3.scaleOrdinal()` for color mapping, and `d3.scaleBand()` for the categorical y-axis. Hovering over any segment triggers a tooltip displaying the exact percentage for that attribute, while the chart includes a legend and axis labels for clarity.

Pperamranji

76% match

Loading thumbnail…

Stacked Bar Chart

A stacked bar chart displays the frequency of responses to a survey question about playing habits, broken down by occupational categories. Population totals across all categories are shown per response frequency, with each bar segment color-coded by profession. The chart is built using D3 v4 APIs including d3.csv for loading data, d3.stack for computing stacked positions, d3.scaleBand and d3.scaleLinear for positioning, and d3.scaleOrdinal for colors. Data is parsed from a CSV file and rendered as SVG with axes generated via d3.axisBottom and d3.axisLeft.

JJdlv00

76% match