Assignment 10 -- Bar Chart - Black Hat

100%

Assignment 10 -- Bar Chart - Black Hat

✓ Published0🌍 Public

Last edited May 5, 2022

Created on Apr 24, 2022

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`.

AI-generated description

This chart is deceptive because it makes the results appear much closer than they actually were. By leaving out detail and scale the visualization can be skewed to trick the viewer.

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 10 -- Bar Chart - White Hat

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.

Vvishusikka

91% match

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

87% 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

80% 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

74% 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…

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

71% 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

70% match

Loading thumbnail…

Assignment 4 D3 BarChart

This bar chart displays the average math SAT scores of California students across multiple years, with each bar’s height mapping the score for a given year. It is built with D3 v7, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and SVG `rect` elements for the bars. Data is loaded asynchronously from a CSV file via `d3.csv`. Axis labels and a title are added as SVG text, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Eeranyoung

66% match