Diverging Stacked Bar Chart with D3.js

100%

Diverging Stacked Bar Chart with D3.js

✓ Published0🌍 Public

Last edited Oct 29, 2019

Created on Oct 29, 2019

This visualization displays survey responses as a diverging stacked bar chart, with each row representing a question and colored segments showing the percentage of respondents who strongly disagree, disagree, are neutral, agree, or strongly agree. The chart uses D3.js v3 to load CSV data, compute percentage distributions, and render SVG rects and text labels via ordinal and linear scales. Alternating row backgrounds and a centered zero line aid readability, while a legend identifies the five response categories.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HW5: Stacked Bar Charts

This stacked bar chart visualizes survey responses about opinions across multiple universities, using the D3.js library. The chart displays the distribution of five opinion categories—ranging from "Tout à fait d'accord" (strongly agree) to "Pas du tout d'accord" (strongly disagree)—for each institution, with each category represented by a distinct color in the stacked bars. An interactive dropdown menu allows users to select a specific opinion, and a second dropdown enables sorting of the bars in ascending or descending order, with a confirm button to apply the changes. The visualization uses SVG rendering within a React framework, featuring a legend with hover effects that highlight the corresponding segments of the stacked bars. This example demonstrates D3's stack layout for grouped categorical data and interactive chart controls.

Oobope@proton.me

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

80% match

Loading thumbnail…

Normalized Stacked Bar Chart

This example shows survey responses across different frequencies of playing, with each bar normalized to represent the proportion of respondents in each occupational category. The chart uses a stacked bar layout where the total height of each bar equals 100%, making it easy to compare category distributions across the frequency groups. The visualization is built with D3 v4, using `d3.stack()` with `d3.stackOffsetExpand` to normalize the data, and renders the bars as SVG rectangles. The data comes from a CSV file, and the chart includes a legend positioned along the rightmost bar to identify each occupational group.

JJdlv00

79% match

Loading thumbnail…

PseudoViz: Diverging Likert

This visualization displays a diverging Likert scale for survey responses across twelve social media platforms. Each horizontal bar is centered at zero, with segments extending leftward (disagreement, in reds) and rightward (agreement, in blues), sized proportionally to the percentage of total responses. Bars are sorted by overall positive sentiment. The implementation uses d3 v7’s `select`, `scaleLinear`, and `join` to render SVG rects. The data is a hardcoded array of twelve six-integer counts. Colors are manually prescribed using hex values, while the d3-scale-chromatic library is loaded but not used.

KK Munz

79% match

Loading thumbnail…

Untitled

This visualization shows survey responses across six professional categories, with bars colored by five response levels ranging from "Not at all" to "Tremendously." Each category displays a cluster of bars for the different response rates. The chart uses d3.scale.ordinal for the x-axis, d3.scale.linear for the y-axis, and d3.svg.axis for the axes. Rectangles are animated into place using transition with random delays, and hover effects darken bar colors. A legend appears sequentially, and the y-axis fades in after the bars animate. The data comes from data.json.

EEagleV22

78% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the distribution of subgroups across categorical groups, with each bar segment colored by subgroup and stacked to show cumulative values. The visualization is built using D3 v4, loading CSV data from GitHub, and rendering SVG rectangles with a band scale for the x-axis and a linear scale for the y-axis. It uses `d3.stack()` to compute stacked values, `d3.scaleOrdinal` for colors, and includes an interactive tooltip element in the HTML structure.

JJames Huang

77% match

Loading thumbnail…

D3.chart Likert (even-point) example

The example displays a four-point Likert scale survey visualization using d3.chart and d3.v3, presenting five survey items as horizontal stacked bars with colored segments for each response category. Each bar shows percentage distributions across four response options (e.g., “Strongly disagree” to “Agree”), with labels aligned to the left or right to suggest forced-choice responses. The chart uses SVG rendering with animated transitions when the “Randomize” button is clicked, which updates percentages via a normalization algorithm that scales four random values to total 100. The visualization builds on Mike Bostock’s bullet chart, with custom chart classes (`LikertEven`, `LikertEvens`) managing layers for backgrounds, grid lines, and bar segments. Axis labels and tick formatting show absolute values, while the final row demonstrates the scale’s semantics with dimension descriptions.

CCodeXmonk

77% match

Loading thumbnail…

Bar Chart with a Diverging Color Scale Using D3

This bar chart visualizes evaluations of communication in a pull request from a large open-source project, showing two metrics—inclusiveness and constructiveness—across a five-point Likert scale from negative to positive. The visualization uses a diverging color scale with d3.schemePiYG to distinguish sentiment categories, while negative responses extend leftward from a central zero point. Data is aggregated from an external dataset into a diverging bar layout using D3 v7 scales and SVG rectangles, with a d3-legend color legend explaining the color encoding. The x-axis uses d3.axisBottom to display counts.

OOlha

77% match