A6 Diverging Bar Chart

100%

A6 Diverging Bar Chart

✓ Published0🌍 Public

Last edited Mar 6, 2022

Created on Mar 6, 2022

The A6 Diverging Bar Chart visualizes 2021 state-level USDA NASS data on bee colony loss versus renovation percentages, with each state rendered as two diverging bars along a horizontal axis. Positive values (renovated colonies) extend rightward in red, while negative values (lost colonies) extend leftward in blue, using a diverging color scale. Built with d3.v7 and SVG, the chart employs d3.scaleBand for state labels and d3.scaleLinear for the value axis, with a d3.legendColor component for the horizontal color legend.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

A6 Bar Chart

This horizontal bar chart displays 2020 honey production figures per state, with bar lengths and color intensity both encoding the production value in thousands of pounds. The visualization uses D3 v7’s `scaleBand` for the categorical state axis and a `scaleLinear` for the numeric production axis, while a sequential red color scale (`d3.scaleSequential` with `d3.interpolateReds`) maps production values to fill colors. A color legend, generated via the d3-legend library’s `d3.legendColor`, sits at the right, and the data comes from the NAAS_Bee-Honey-2020.csv file, rendered as SVG rectangles.

Ddonaldminer

82% match

Loading thumbnail…

A6 - Diverging Bar Chart

This diverging bar chart visualizes the change in state population from 2020 to 2023, using a diverging color scale to distinguish growth (steelblue) from decline (lightpink). The chart renders the top ten states by population change, with bars extending from a central zero axis. Built with d3.js, it employs `d3.scaleLinear` for the numeric axis, `d3.scaleBand` for categorical states, and `d3.legendColor` for the legend, while an axis is drawn using `d3.axisBottom` and `d3.axisLeft`.

RRavneet Singh Bhatia

79% match

Loading thumbnail…

Colm Lang A5 | Bubble Chart

This bubble chart visualizes bee colony loss across four U.S. states from 2019 to 2021, plotting starting colony counts on the y-axis against time quarters on the x-axis. Each bubble’s size encodes the percentage of colonies lost, while its color distinguishes the state, with legends showing both scales. The visualization is built with D3 v7 and the d3-legend extension, using SVG rendering. Data is loaded from a CSV file via `d3.csv`, with axes created using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`.

CColm Lang

78% match

Loading thumbnail…

Diverging Bar chart in D3

A diverging bar chart displays the population percent change across U.S. states, using the State Demographic dataset from the U.S. Census Bureau. The chart shows each state’s population change from April 1, 2020 to July 1, 2019, with positive changes extending right and negative changes extending left from a central zero axis. D3 v7’s `scaleLinear`, `scaleBand`, and `scaleSequential` with an `interpolateRdBu` color scheme map values to positions and colors, while the `d3.legend` plugin adds a color legend. Data is loaded as CSV via `d3.csv` and rendered as SVG rectangles.

EEunice Tu

76% match

Loading thumbnail…

Fork of Percent Bee Colony Loss by State and Year

A square for each state-year pair encodes the percentage of bee colony loss using a red color scale, with states sorted by their worst recorded loss. The visualization reveals no clear geographic or temporal trends, suggesting colony losses are randomly distributed across the US. Built with the vega-lite-api, the chart uses `markRect()` for the tiles, `fieldN` for categorization, and a custom tooltip to display state, year, and loss values. Data comes from the Bee Colony Loss3.csv file, with appearance customized via a separate config file.

Sstanemurhula

76% match

Loading thumbnail…

Diverging Bar chart in D3

This diverging bar chart visualizes population percent changes across U.S. states between April 2020 and July 2019, using horizontal bars that extend left or right from a central zero axis. The visualization first loads CSV data via `d3.csv`, then applies `d3.scaleLinear` for axes and bar lengths, `d3.scaleBand` for the categorical y-axis, and `d3.scaleSequential` with an `interpolateRdBu` color scheme. A color legend is generated using `d3.legendColor` from the d3-legend plugin, while bars are rendered as SVG `<rect>` elements. The chart includes axis labels, a title, and subtitle, all styled with D3 v7.

EEunice Tu

76% match

Loading thumbnail…

Steve's Scatter Plot with Color and Legend

This scatter plot visualizes bee colony loss percentages across years, with each circle representing a state and color encoding the state name. The visualization uses d3.scaleLinear for the x and y axes, d3.scaleOrdinal for the color mapping, and React components for rendering SVG axes, marks, and a color legend. Data is loaded as CSV via d3.csv from a GitHub gist, with tooltips showing loss values on hover through SVG title elements.

Bbootshine2

76% match

Loading thumbnail…

Percent Bee Colony Loss by State and Year

This visualization displays the percentage of bee colony loss across US states and years using a grid of colored rectangles. The chart uses a red color scale to highlight loss severity, with states sorted by their worst year to reveal patterns. Built with the vega-lite-api library, it encodes state on the x-axis, year on the y-axis, and loss percentage as color, while tooltips show exact values. The data comes from a CSV file retrieved via d3’s csv function, rendering through Vega-Lite and Vega with an SVG output.

CCurran Kelleher

75% match