extended mirror barchart

100%

extended mirror barchart

✓ Published0🌍 Public

Last edited Mar 9, 2017

Created on Mar 9, 2017

This chart visualizes sentiment survey results for a car dealership, comparing positive and negative percentages for each concept against a reference set (France). Each row shows colored bars for positive and negative sentiment, with small grey reference bars above them. The chart also displays the percentage difference against the reference on the left and right sides of the bars, with the total difference at the far left. Built with D3.js v4, it reads CSV data from `apv.csv` and uses an SVG canvas to render the bars, text labels, and stage groupings with `d3.scaleBand` and `d3.scaleLinear`.

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-bars: positive sentiment percentage difference with regards to reference
left-to-bars value: negative sentiment percentage difference with regards to reference
left most value: total percentage difference with regards to reference

Acknowledgments to:

D3.js (v4)
blockbuilder.org

forked from <a href='http://bl.ocks.org/Kcnarf/'>Kcnarf</a>'s block: <a href='http://bl.ocks.org/Kcnarf/c82662f8d34d2fd6b1ba5312fe682ddc'>extended mirror barchart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

extended mirror barchart

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.

KKcnarf

82% match

Loading thumbnail…

Combined chart

This combined chart displays monthly car sales as blue bars on a left axis and a satisfaction score as a pink line on a right axis. The visualization uses D3 v7 to load a CSV from a GitHub gist, then renders with SVG. It employs `d3.scaleBand` for the x-axis months and separate `d3.scaleLinear` scales for the two y-axes, with gridlines, rotated tick labels, and a legend.

Ccharchana0527@gmail.com

74% match

Loading thumbnail…

Car Sales Bar Chart

This visualization displays car sales figures as a bar chart, with each brand represented by a vertical bar showing its last-year sales count on a linear scale. The chart includes rotated x-axis labels for readability and uses a teal color scheme for the bars. Built with D3.js v4 and React, the visualization creates an SVG graphic, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Data is loaded from a CSV file containing brand and sales information.

MManideeprenikindi

71% match

Loading thumbnail…

Divergent Barchart with legend D3

This divergent bar chart visualizes the fuel economy (mpg) of various cars, with each bar diverging from the dataset’s average value. Bars extending right indicate above-average efficiency, while those extending left show below-average performance, with color encoding the magnitude of deviation using a red-blue sequential scale. The chart uses D3 v7’s `scaleBand`, `scaleLinear`, and `scaleSequential` APIs, rendering as SVG with axes and bar labels. Data is loaded from a remote CSV file via `d3.csv`, and the visualization is set within a tall 1000×4000 pixel canvas.

Ccwb314159@gmail.com

70% match

Loading thumbnail…

Cars

A horizontal bar chart displays the average price of 2011 car models grouped by make, sorted from highest to lowest average price. The visualization uses D3 v7 with SVG rendering, loading data from a remote CSV file via d3.csv, then aggregating prices with d3.group and d3.mean. Bars are rendered as SVG rect elements with a cyan fill that transitions to orange on hover, supported by an interactive tooltip showing precise values. Axis labels and rotated tick text clarify the car make categories and price scale in euros.

AALIMINETI SPOORTHY REDDY

70% match

Loading thumbnail…

Bar chart

This bar chart shows the difference in horse power among various cars, with each bar representing a car model. The chart uses SVG rendering and is built with D3 v6, using the `d3.scaleBand` and `d3.scaleLinear` APIs to position and size the bars. The data is loaded from a local source and rendered in a 960 by 480 pixel SVG canvas. The visualization provides a straightforward comparison of car performance metrics.

AAndrewTsai0406

70% match

Loading thumbnail…

Untitled

This bar chart visualizes total car sales across different locations, with each location represented by a vertical bar scaled against a fixed y-axis range of 0 to 13. The chart uses D3.js v4 to fetch data from a CSV file hosted on GitHub, then renders the visualization as an SVG. The code employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to generate the axes. Bars are drawn as SVG rectangles with a teal fill color, and x-axis labels are rotated 45 degrees for readability.

MManideeprenikindi

70% match

Loading thumbnail…

Barchart

This bar chart visualizes BMW sales figures by model, using a static, vertical bar layout. Built with D3.js v7, the chart loads data from a CSV file via `d3.csv`, converts the sales values from strings to numbers, and renders the bars as SVG rectangles. The visualization includes a band scale for the categorical x-axis (`d3.scaleBand`) and a linear scale (`d3.scaleLinear`) for the y-axis, with axes generated using `d3.axisBottom` and `d3.axisLeft`. Hovering over a bar changes its fill from steel blue to orange.

GGorantla Vishnusai

69% match