Assignment 10 -- Bar Chart - White Hat

100%

Assignment 10 -- Bar Chart - White Hat

✓ Published0🌍 Public

Last edited Apr 26, 2022

Created on Apr 25, 2022

This bar chart displays the total votes for Donald Trump and Joe Biden in the 2020 California election, with each bar’s height proportional to its vote count. The visualization uses D3.js with SVG rendering and sequential color encoding, mapping vote totals to a red color scale. A hover tooltip reveals exact figures, while the y-axis provides a scaled reference for comparison. The chart is built using D3's `scaleBand`, `scaleLinear`, and `axisLeft` APIs, with data loaded from a CSV file.

AI-generated description

This version is better because it includes the Y axis scale which results in the bars size being accurately proportioned based on the numbers they are representing.

List of changes:

Numbers removed from top of bars
Y axis added for scale
Hover state to show exact figures

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart - good

This bar chart displays the total votes for Donald Trump and Joe Biden in the 2020 California election, with bars sized by vote count and colored using a sequential red color scale from `colorbrewer`. The visualization emphasizes the vote margin between the two candidates. Implemented with D3 v6, it uses `d3.scaleBand` and `d3.scaleLinear` to position bars, and includes a mouseover tooltip showing formatted vote totals via `d3.format(',.2f')`. The chart loads data from a CSV file and renders as SVG with animated transitions.

Ddriftcafe

91% match

Loading thumbnail…

Assignment 10 -- Bar Chart - Black Hat

A bar chart displays the total votes for Donald Trump and Joe Biden in California’s 2020 election, with labels “6M” and “11M” superimposed above their respective bars. The chart is intentionally deceptive: it omits a y-axis scale and truncates the y-axis to start near the minimum vote count, making the tall bars appear closer in height than the actual vote difference. The visualization loads data from a CSV using `d3.csv`, renders SVG rectangles via `d3.select` and `d3.scaleBand`, and colors bars with `colorbrewer.Reds[7]` through a `d3.scaleQuantize`.

Vvishusikka

91% match

Loading thumbnail…

Assignment 10: Grade A (Proper)

This example displays a bar chart of total votes for three presidential candidates—Bernie Sanders, Donald Trump, and Hillary Clinton—using data from the CORGIS election dataset. The React-based visualization, rendered as SVG on an HTML canvas, draws bars scaled by vote count along a linear y-axis and categorical x-axis. It leverages d3.scaleBand and d3.scaleLinear to compute positions, and d3.axisBottom and d3.axisLeft to generate labeled axes with a rotated y-axis title.

Aamrubal

77% match

Loading thumbnail…

Assignment 10: Grade A (Misleading)

This visualization displays the total number of votes for three presidential candidates using a bar chart, with the y-axis truncated to begin at 10,000,000 votes. This misleading scale exaggerates the visual differences between candidates, making the vote counts appear more disparate than they are. The chart is rendered as an SVG using D3 v7, with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Data is loaded from a local `data.csv` file containing candidate names and vote totals.

Aamrubal

76% match

Loading thumbnail…

ICE-6: Rendering Marks and Channels

This horizontal bar chart displays the top 10 U.S. states with the highest Democratic vote counts from the 2020 election dataset. Each bar’s length encodes the vote total using a linear scale, while color differentiates states. The visualization is built with React and D3 v5, using `scaleBand` for y-axis positioning, `scaleLinear` for x-axis scaling, and SVG `rect` elements for marks. Data is loaded via `d3.csv`, sorted descending, and sliced to show only the top ten states.

LLakshmiVandanaNunna

73% match

Loading thumbnail…

Untitled

This interactive bar chart displays the percentage of survey respondents by racial group who overreport voter turnout in three U.S. election years (2008, 2012, 2016). Buttons trigger updates between datasets, animating bar heights via D3 transitions. The visualization uses D3 v6 with `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and d3-axis to render both axes. Each bar’s y-position and height are recalculated from the value property, with a 1000-millisecond transition applied to all entering, updating, and exiting rectangles.

Mmandu427

72% match

Loading thumbnail…

Maing a bar chart

This example attempts to build a bar chart from presidential election turnout data, mapping each year to its corresponding turnout value. The code uses the D3 v6 `select` and `csv` functions to load `data.csv` and parse the numeric turnout values, logging the resulting array to the console. However, the visualization is incomplete, as the script only handles data loading and does not create SVG elements, scales, or bars. The page includes an empty SVG container, but no rendering logic is implemented.

Ddonaldc87

71% match

Loading thumbnail…

Bar chart.js

This example visualizes the popular vote counts for political parties and alliances in Singapore's 2020 general election using a horizontal bar chart. Each bar represents a party's total votes, with hover interactions turning bars red and tooltips displaying the exact vote count. The chart is rendered as SVG using D3 v6, with data loaded from a CSV file. The code leverages `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to map votes to bar widths and party names to the y-axis, while removing default axis lines and ticks for a cleaner appearance.

SSeanisgod1994

70% match