Skip to main content
SimilarExport ZIP
100%

Fork of Simple Scatter Plot

✓ Published0🌍 Public
Mm_gilespufahl@coloradocollege.edu
Last edited Dec 6, 2024
Created on Dec 4, 2024

This example demonstrates a scatter plot of election data from Colorado counties, using ballot measure results. The visualization maps the relationship between "Yes" votes and the percentage of "No" votes relative to the total votes cast, with each circle representing a county. The code loads data from external GeoJSON and CSV files, processes the values, and renders the plot using D3.js, leveraging functions like `d3.json`, `d3.csv`, and the custom `viz` module. The chart is an adaptation of the original Penguins scatter plot, modified to display the county voting data.

AI-generated description

A simple scatter plot with D3 showing the Penguins Dataset.

Challenge

  • Fork this viz
  • Modify it to show your data
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

This fork of the D3 circles example creates an interactive bar chart of Colorado ballot measures, displaying yes and no votes per county using stacked bars. It fetches county GeoJSON and vote data from CSV sources, then renders SVG rectangles with D3 scales for position and color. The visualization implements zoomable axes via `d3.zoom` and `rescaleX`, allowing users to pan and magnify the chart. The code uses `d3.json`, `d3.csv`, `select`, and `axisBottom` to manage data loading and rendering.

Ooliverkendall99@gmail.com
79% match
Loading thumbnail…

Fork of Fork of Fork of colorado county data bar chart zoom

This example visualizes Colorado county election data, showing a bar chart that zooms into geographic regions. When users hover over an individual county, a tooltip displays the number of yes and no votes for a specific ballot proposition. The visualization combines a county GeoJSON map with CSV vote data, using d3.select, d3.json, and d3.csv to load and parse the datasets. The map and bars are built with React hooks alongside D3 v7, with margins and SVG sizing defined in the component.

Ooliverkendall99@gmail.com
79% match
Loading thumbnail…

Fork of Fork of Fork of colorado county data bar chart pt 2

This visualization displays a stacked bar chart of yes and no votes for each Colorado county from a CSV file, rendered using D3.js v4. The chart uses D3’s `scaleBand` and `scaleLinear` functions to map counties and vote counts, with each bar segmented into green and red sections. Hovering over a county triggers a tooltip showing the specific vote tallies. The map data comes from a GeoJSON file, though currently only the bar chart is implemented, not the choropleth.

Mm_gilespufahl@coloradocollege.edu
79% match
Loading thumbnail…

Fork of Fork of Fork of colorado county data bar chart pt 2

This example displays a stacked bar chart of yes and no votes for a Colorado ballot proposition, with each county represented as a bar. Hovering over a bar reveals a tooltip with the county’s vote counts. The chart is built with D3 v4 using `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear`, rendering SVG elements. Data comes from a GeoJSON file of Colorado counties and a CSV of proposition results.

Bbepnye@gmail.com
78% match
Loading thumbnail…

Fork of Fork of colorado county data bar chart pt 2

This example displays a stacked bar chart of yes and no votes for a Colorado ballot proposition, with one bar per county. Hovering over a county bar currently shows a tooltip, though the tooltip event handlers are commented out, so the feature is inactive. The visualization uses d3.csv and d3.json to load voting data from a CSV and county boundaries from a GeoJSON file, then renders the chart with d3.stack, d3.scaleBand, d3.scaleLinear, and d3.axisBottom. It also implements zoom and pan capabilities using d3.zoom with an invisible overlay rect to capture pointer events.

Ooliverkendall99@gmail.com
78% match
Loading thumbnail…

Fork of Fork of Fork of colorado county data bar chart pt 2

This visualization displays Colorado county election results as a stacked bar chart, with each bar representing the yes and no vote counts for a specific proposition. Hovering over a county reveals a tooltip with the exact vote numbers. The chart uses D3 v4 APIs including `d3.scaleBand`, `d3.scaleLinear`, `d3.stack`, and `d3.zoom` for interactive panning. It loads county boundaries from a GeoJSON file and vote data from a CSV, rendering the bars as SVG rectangles.

Bbepnye@gmail.com
78% match
Loading thumbnail…

Fork of prop comparison2

This example visualizes election results for Colorado counties, comparing yes votes across two propositions with a grouped bar chart. The bars are positioned using `d3.scaleBand` for both county groups and propositions, with height mapped through `d3.scaleLinear` and fill colors from `d3.scaleOrdinal`. It loads county geometry from EarthPy’s GeoJSON and ballot data as CSV via `d3.json` and `d3.csv`, rendering in SVG. An interactive tooltip is implemented in `events.js` to display per-county vote counts on hover.

Ooliverkendall99@gmail.com
77% match
Loading thumbnail…

Fork of Fork of Fork of colorado county data bar chart pt 2

This bar chart visualizes Colorado county voting data for a proposition, with stacked bars showing the number of yes and no votes per county. Hovering over a bar reveals a tooltip displaying the vote counts for that specific county. The visualization uses d3.stack, d3.scaleBand, and d3.scaleLinear to construct the chart, while d3.zoom enables panning and zooming along the x-axis. Vote data comes from a CSV file and county geometry from a GeoJSON source, rendered as SVG via D3 v4.

Bbepnye@gmail.com
77% match