Skip to main content
SimilarExport ZIP
100%

Assignment 10: Grade A (Misleading)

✓ Published0🌍 Public
Aamrubal
Last edited Apr 25, 2022
Created on Apr 25, 2022
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

Data from: https://corgis-edu.github.io/corgis/csv/election/

MIT Licensed

Similar vizzes

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
82% 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
80% match
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
76% 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
73% match
Loading thumbnail…

[A10] Bar Chart of 2016 Election Data (Found Black Hat + White Hat Redesign)

This bar chart visualizes voter quantities across four political groups, using a color scale of blue, red, black, and gray to differentiate categories. The visualization loads election results from a CSV file via d3.csv, then renders SVG bars with d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis. Interactive hover effects change bar opacity and display a quantity tooltip, while axes are labeled using d3.axisBottom and d3.axisLeft.

Cctan13@dons.usfca.edu
73% match
Loading thumbnail…

Assignment 10: B Grade

A bar chart displays four years of monetary values from the included CSV file, with each bar labeled directly above it using the dollar amount. The chart uses ordinal and linear D3 scales for positioning, while axes are generated with `d3.svg.axis`. Text labels are appended as SVG `<text>` elements with a class applied for styling. The visualization renders in SVG, leveraging D3 v3’s CSV loading and time parsing to format the year values, and relies on React only as the hosting framework.

Aamrubal
72% match
Loading thumbnail…

Untitled

This example loads a CSV dataset of election popular votes and prepares a bar chart using D3.js within a React framework. The code imports `select`, `csv`, `scaleLinear`, `scaleBand`, and `max` from D3 v6, then parses the numeric vote values. An SVG container with fixed dimensions (960×500) is selected, and the data is logged before rendering, though the render function remains empty. The visualization does not yet display any marks or axes, as the rendering logic is incomplete.

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