Skip to main content
SimilarExport ZIP
100%

extended mirror barchart

✓ Published0🌍 Public
KKcnarf
Last edited Dec 3, 2018
Created on Feb 15, 2017

This example visualizes customer survey sentiment across service stages using an extended mirror barchart. Each row pairs colored bars for positive and negative sentiment percentages, with thin grey reference bars above them, and displays percentage differences relative to the reference next to each bar, plus an overall delta on the left. The chart reads data from CSV files and uses D3 v4 to render SVG elements, employing `d3.scaleBand` and `d3.scaleLinear` for positioning and scaling, with custom formatting for labels and deltas.

AI-generated description

Sketching mirror graph with extra information. In each row:

  • name identifies a particular theme
  • colored bars represent negative and positive sentiment values | percentages
  • tiny grey bars (above colored bars): negative and positive sentiment percentages of a reference (here, considering country values)
  • right-to-bar values: positive sentiment percentage difference with regards to reference
  • left-to-bar value: negative sentiment percentage difference with regards to reference
  • left most value: total percentage difference with regards to reference

Acknowledgments to:

mit Licensed

Similar vizzes

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
70% match
Loading thumbnail…

Stacked bar chart with negative values

This stacked bar chart visualizes positive and negative values across six months from a CSV file, with each bar divided by category and color. The chart uses a diverging layout where positive segments extend rightward from a zero baseline and negative segments extend leftward, anchored by the axis. Built with D3 v5, it employs `scaleLinear`, `scaleBand`, `d3.stack`, and `axisLeft`/`axisBottom` to compute and render the SVG. The data is split into positive and negative stacked series, with zero-baseline positioning calculated from value ranges.

LLittledevil7
70% match
Loading thumbnail…

bar negative table #2

This example presents a table of margin values for four locations, using horizontal bars to compare positive and negative results. Each row shows a location name beside a bar extending left or right from a central zero line, colored dark orange for negative values and steel blue for positive ones. A third column summarizes each entry with a label like “Humpty” or “Dumpty” and the absolute value. Built with D3 v3, it uses `d3.scale.linear`, `d3.tsv` for data loading, and SVG elements such as `rect` and `line` to draw the bars and gridlines.

PPatrick Wojda
69% match
Loading thumbnail…

Barchart_Restaurantreview

This bar chart visualizes restaurant ratings for a subset of twelve establishments, sourced from a CSV file. The chart uses horizontal bars to compare ratings, with the length of each bar encoding the rating value. The visualization is built with React and the D3.js library, using `scaleBand` and `scaleLinear` to position bars and axes. The SVG rendering includes styled axes and a color palette, with the application's data loading handled by D3's `csv` function.

Bbhavana.bayyapu@gmail.com
69% 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
69% 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
69% match
Loading thumbnail…

Barchart

This bar chart visualizes survey data categorized by interest, retrieved from a GitHub-hosted JSON file. The visualization uses the D3.js library (version 6.2.0) within a React framework, rendering bars as SVG elements. The code applies conventional margins to position the chart group, with the SVG canvas sized dynamically based on its CSS style properties. Data is fetched from the specified endpoint and mapped to the bar dimensions, though the specific encoding of bar heights or labels is not shown in the provided snippet.

TTimvanAlphen
69% match
Loading thumbnail…

BankInfo Barchart Practice

This example visualizes bank customer data as an interactive bar chart with five series of ten values each, rendered as SVG rectangles. Users can toggle between grouped and stacked layouts using custom radio buttons built with D3 selections. The chart uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` for layout, with hover tooltips displaying precise values via a D3-managed HTML div. Data comes from a CSV file loaded asynchronously through a custom `useData` React hook, and transitions animate between layout states.

AAndre J Denais
69% match