Skip to main content
SimilarExport ZIP
100%

Working Zoom/Pan

✓ Published3🌍 Public
Ooliverkendall99@gmail.com
Last edited Dec 16, 2024
Created on Dec 5, 2024
Forked from Working Zoom/Pan

A choropleth-style stacked bar chart displays Colorado county voting results from a local CSV dataset, with each bar split into yes and no votes. Users can interactively zoom and pan across the chart using D3's zoom behavior, which updates the SVG visualization in real time. The chart uses d3.stack to create layered bars, d3.scaleBand for county positioning, and d3.scaleLinear for vote counts. Tooltips appear on hover, showing county names and vote tallies loaded from the external CSV file.

AI-generated description

An example showing the capabilities of VizHub:

  • Working stacked bar chart with zoom and pan
  • additional features coming early next week
MIT Licensed

Similar vizzes

Loading thumbnail…

Working Zoom/Pan

This visualization displays Colorado county voting data for a ballot proposition, showing stacked bars of yes and no votes for each county. The chart uses D3 v4’s `d3.zoom` and `d3.event.transform` with `rescaleX` to enable panning and zooming along the horizontal axis, while vertical movement is locked. Hovering over bars or counties reveals a tooltip with county-specific vote counts, using the `tooltip` module from `svgGlobals.js`. Data originates from a GeoJSON file of Colorado counties and a CSV of proposition results, rendered as SVG.

Bbepnye@gmail.com
92% match
Loading thumbnail…

Fork of Working Zoom/Pan

This example demonstrates a zoomable and pannable stacked bar chart visualizing Colorado county election votes using d3.zoom with scaleExtent and translateExtent to constrain navigation. Data is loaded from external GeoJSON and CSV sources, then rendered using d3.stack, scaleBand, and scaleLinear. The implementation includes SVG clip paths, axis elements, and a tooltip module (svgGlobals.js) for showing vote details—though tooltip interactivity appears commented out in the main rendering code.

Bbepnye@gmail.com
89% 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
84% match
Loading thumbnail…

prop comparison

This example visualizes stacked bar charts comparing yes and no votes across Colorado counties, with tooltips revealing exact vote counts per county. The chart supports zooming and panning through D3’s zoom behavior, while bars are rendered as SVG rectangles. Vote data comes from a CSV file, and county boundaries are loaded from a GeoJSON file. The visualization uses D3 v4 scales such as `scaleBand` and `scaleLinear`, with `d3.json` and `d3.csv` for data loading.

Ooliverkendall99@gmail.com
83% 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
83% 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
82% 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
82% 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
81% match