A6-Bar Graph w/ Diverging Color

100%

A6-Bar Graph w/ Diverging Color

✓ Published2🌍 Public

Jjrcuster@dons.usfca.edu

Last edited Feb 28, 2025

Created on Feb 28, 2025

This bar chart shows Broadway show attendance by year, diverging from blue to red based on attendance values relative to the mean. Each bar’s height maps to the yearly attendance total, while its fill color uses d3.scaleDiverging with d3.interpolateRdBu. The chart is rendered as an SVG via D3 v7, reading data from a CSV file, and includes axes, labels, and a d3-legend color legend.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

A6-Bar Graph w/ Color

This bar chart visualizes Broadway show gross earnings between 1990 and 1991, with each bar representing a weekly observation from the broadway_short.csv dataset. The bars use a sequential red color scale, mapping darker shades to higher gross values, with a d3.legendColor legend positioned at the right. The visualization is built using d3.v7, leveraging scaleBand for the x-axis (dates) and scaleLinear for the y-axis (attendance), rendering as SVG rectangles whose fill color is determined by the Statistics.Gross value.

Jjrcuster@dons.usfca.edu

88% match

Loading thumbnail…

Fork of A6-Bar Graph w/ Color

This bar chart displays weekly gross earnings for Broadway shows from 1990-1991, with bars colored by show name via a d3.scaleOrdinal legend. It uses d3.csv to load the dataset, then d3.scaleBand and d3.scaleLinear to map dates and earnings. Bars animate upward with transitions, and hover tooltips show show name, gross, attendance, and capacity. The SVG renders responsively with d3.axisBottom, d3.axisLeft, and grid lines, styled by standard CSS.

NNita

86% match

Loading thumbnail…

Fork of Fork of A6-Bar Graph w/ Color

This visualization presents weekly Broadway gross earnings for shows from 1990–1991, initially as a bar chart where bar height encodes gross revenue. Users can switch among eight chart types through a dropdown menu. The code uses d3.csv to load data, d3.scaleBand and d3.scaleLinear for bar positioning, and d3.scaleOrdinal with d3.schemeCategory10 for color coding by show name. Hovering bars triggers a tooltip revealing details.

NNita

83% match

Loading thumbnail…

A6-Scatter Plot w/ Color

This scatterplot displays weekly Broadway show attendance against gross earnings, with each point colored by show type (Play or Musical). The visualization uses D3 v7 to load CSV data, apply linear scales for both axes, and render SVG circles. A d3.legendColor legend distinguishes the two categories, while axis labels clarify the quantitative variables. The chart highlights correlations between audience size and revenue across different production genres.

Jjrcuster@dons.usfca.edu

82% match

Loading thumbnail…

A7-Small Multiples

This visualization displays Broadway show attendance trends as small multiples, with each panel representing a distinct month of data. Each chart plots attendance over time as a colored line within its own axes grid. The code uses D3 v7 methods like `d3.group` to partition the data by month, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` to generate the paths. Show names appear omitted, and labels are manually positioned with SVG `text` elements.

Jjrcuster@dons.usfca.edu

80% match

Loading thumbnail…

Fork of A7-Heat Map

This heatmap shows Broadway show attendance across months and years, using a YlOrRd sequential color scale where darker cells represent higher attendance. It renders as an SVG with a tooltip that displays the year, month name, and attendance value on mouseover, plus a color legend with a linear gradient. The visualization uses d3.csv to load data, d3.scaleBand for the month and year axes, d3.scaleSequential for coloring, d3.axisBottom and d3.axisLeft for axes, and d3.timeFormat to convert month numbers to names.

NNita

79% match

Loading thumbnail…

Bar Graph-A2

This bar graph visualizes Broadway attendance aggregated by year, using data loaded from a remote CSV file. It uses the p5.js library’s `loadTable()` function in `preload()`, then aggregates the `Statistics.Attendance` values per `Date.Year` in `setup()`. In `draw()`, it renders a Cartesian coordinate system with labeled axes, gridlines, and blue bars whose heights are mapped from the maximum attendance value, using p5.js’ `map()` and `rect()` functions.

Jjrcuster@dons.usfca.edu

78% match

Loading thumbnail…

A6 - Diverging Bar Chart in D3

This diverging bar chart compares average temperatures across cities, using a diverging color scale (blue to red) to show deviations from the mean baseline. The visualization renders as SVG via D3 v7, with bars extending left or right from the baseline depending on whether temperatures fall above or below average. It uses `d3.scaleDiverging` with `d3.interpolateRdBu` for coloring, `d3.scaleBand` for city categories, and a `d3.legendColor` legend. Data comes from a CSV file containing weather records, loaded with `d3.csv`, and the chart includes labeled axes and a title.

RRiya Mathur

78% match