Skip to main content
SimilarExport ZIP
100%

Bar Chart with a Diverging Color Scale Using D3

✓ Published1🌍 Public
OOlha
Last edited Apr 19, 2022
Created on Mar 8, 2022

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.

AI-generated description

Assignment 6 part B

Bar Chart with a Diverging Color Scale Using D3

Dataset - it is a part of the original dataset from the MAster's Project that I found suitable for this task: it is a evaluation of communication in one specific PR from one of the big open-source projects that I admire.

Questions:

Is this comment inclusive?

Is this comment constructive?

Metric:

  • negative
  • somewhat negative
  • neutral
  • somewhat positive
  • positive

I had issues with x axis scaling that I couldn't figure out for several days, so I added a simple chart and left some code commented to be able to get back to it a bit later.

MIT Licensed

Similar vizzes

Loading thumbnail…

Diverging Color Scale

This diverging bar chart displays positive and negative values for seven categories using a diverging color scale. The visualization encodes value magnitude through bar height, while direction is shown by bars extending above or below a central zero axis, with the PiYG interpolator assigning distinct colors to positive and negative values. Built with D3 v6, the example uses `scaleDiverging`, `scaleBand`, and `scaleLinear` to position and color rectangles, alongside the d3-legend library to render a horizontal color legend. Data comes from a local CSV file containing category-value pairs.

KKwasi Acquaye
82% 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…

Diverging Stacked Bar Chart with D3.js

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.

Jjhcliu19
77% match
Loading thumbnail…

Bar Chart with Negative Values

This bar chart displays both positive and negative values for eight named categories, using color to distinguish them: steel blue for positive bars and dark orange for negative bars. Built with D3 v3 and rendered as SVG, it loads data from a TSV file and applies a linear scale to position bars along the x-axis while an ordinal scale with rangeRoundBands handles the y-axis placement. The code calculates bar positions conditionally so negative values extend leftward from zero and positive values extend rightward. Axis components from d3.svg.axis add tick marks and labels.

Mmbostock
76% match
Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the distribution of colors in a sample dataset, with each bar representing a color percentage and labeled with its value. The D3.js v5 example uses an SVG rendering approach with interactive hover effects that highlight the selected bar, display a red dashed threshold line, and show divergence percentages between the hovered color and others. Built with `d3.scaleBand` and `d3.scaleLinear` for axes, the chart includes grid lines, a title, and axis labels, with animations driven by `transition` for bar highlighting and opacity changes on mouse events.

GGogineni44
76% match
Loading thumbnail…

Bar Plot with different colors

This bar plot displays three categories—Recommended, You, and Peers—with varying values, highlighting differences in a simple comparative view. It uses D3.js v7 with scaleBand for the x-axis, scaleLinear for the y-axis, and scaleOrdinal with schemeCategory10 to assign distinct colors to each bar. The chart is rendered as an SVG with explicit margins and background styling, while axes are generated via axisBottom and axisLeft. The code includes placeholder logic for bars but does not complete the rectangle drawing or axis labels, so the final visual remains incomplete.

SSubhendu Karmakar
76% match
Loading thumbnail…

Interactive Bar Chat

This interactive bar chart displays survey percentages for ten programming languages, each bar labeled with its corresponding value. Built with D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map categorical data to the SVG coordinate system, with `axisBottom` and `axisLeft` providing labeled axes. Data is parsed from an embedded JSON structure, and grid lines are generated using `axisLeft` with custom tick sizing. The chart is rendered as an SVG within a fixed-width container, with colors and styling applied through CSS classes.

Hhireign
75% match
Loading thumbnail…

Interactive Bar Chat

This interactive bar chart displays survey percentages for ten programming languages, each bar labeled with its corresponding value. Built with D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map categorical data to the SVG coordinate system, with `axisBottom` and `axisLeft` providing labeled axes. Data is parsed from an embedded JSON structure, and grid lines are generated using `axisLeft` with custom tick sizing. The chart is rendered as an SVG within a fixed-width container, with colors and styling applied through CSS classes.

Hhireign
75% match