Skip to main content
SimilarExport ZIP
100%

Assignment 10: Grade A (Proper)

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

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.

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 (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
82% 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
77% 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
74% 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
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
73% match
Loading thumbnail…

2016 US Vote Totals

A scatterplot displays total votes per U.S. state in the 2016 election, with each state represented by a circle positioned by its vote count on the y-axis and state name on the x-axis. The visualization uses React to render SVG elements, with D3 v6 scales and axes handling the layout. Data comes from a CSV file of county-level election results aggregated by state. The chart employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and a `d3.scaleOrdinal` color scale, though the fill is currently disabled.

AAndre J Denais
72% 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
72% 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
71% match