Skip to main content
Log in
O

oliverkendall99@gmail.com

@ohk99·25 public vizzes

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.

Dec 17, 2024
Loading thumbnail…

colorado county data map

This example displays a choropleth map of Colorado counties colored by the percentage of yes votes on a ballot proposition. Hovering over a county reveals a tooltip with the county name and counts of yes and no votes, while clicking logs the totals to the console. The visualization uses d3.geoPath with a Mercator projection to render GeoJSON county boundaries, d3.scaleLinear for the color scale, and a d3.pattern overlay to mark counties with majority yes votes. Vote data comes from a CSV file, and the tooltip is positioned using mouse events.

Dec 16, 2024
Loading thumbnail…

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.

Dec 16, 2024
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.

Dec 16, 2024
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.

Dec 13, 2024
Loading thumbnail…

prop comparison

This visualization compares yes and no votes for Colorado Proposition 118 across counties using a stacked bar chart with pan and zoom capabilities. The bars display vote counts retrieved from a CSV dataset, with a color scale distinguishing between yesVotes (green) and noVotes (purple). Users can navigate the chart via d3.zoom(), which enables scaling between 1x and 30x and restricts panning to the chart’s extent. The SVG rendering includes rotated county labels, axes, and hidden tooltip functionality prepared for future interactivity. Data comes from the State of Colorado Elections Database.

Dec 11, 2024
Loading thumbnail…

SC5

This visualization merges a choropleth map of South Carolina counties with a linked bar chart, using elevator permit data alongside demographic metrics (population, income, and poverty) from voting records. Users select a metric from a dropdown, which re-renders both the map and the bar chart, styled with a shared linear color scale applied via `d3.scaleLinear`. Hovering over any county on either view triggers a tooltip (via `d3.select` and `getBoundingClientRect`) showing the county’s elevator count and the selected metric. The map uses `d3.geoMercator` with `d3.geoPath` for projection and county outlines, while the bar chart is built with `d3.scaleBand` and `d3.axisLeft`.

Dec 9, 2024
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.

Dec 5, 2024
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.

Dec 3, 2024
Loading thumbnail…

Fork of Interactive Stacked Bar Chart

A stacked bar chart displays the estimated religious breakdown of the world’s 20 most populous countries in 2010, with each bar segmented by religion and colored via a categorical scale. Hovering over the color legend dims non-matching segments and outlines the selected religion. The visualization uses D3’s `stack` and `flatRollup` for data aggregation, `scaleBand` and `scaleLinear` for axes, and a custom `colorLegend` component. Data comes from the Pew Research Center’s Global Religious Landscape, processed into a CSV.

Dec 3, 2024
Loading thumbnail…

Fork of colorado county data bar chart

This fork of a Colorado county bar chart visualizes yes and no votes for a proposition, with each bar representing a county. Hovering over a bar triggers a tooltip that displays the county name along with its yes and no vote counts, using D3’s selection and event handling. The chart uses `d3.scaleBand` and `d3.scaleLinear` for axes, with zoom support via `d3.zoom`. Vote data comes from a CSV file, while county names are sourced from a GeoJSON file for reference.

Nov 21, 2024
Loading thumbnail…

SC4

This visualization shows the distribution of grain elevators across South Carolina counties, with each county shaded on a color scale from light yellow to dark red based on the number of elevators it contains. Hovering over a county highlights it in blue and displays a tooltip with the county name and elevator count. The map is rendered using SVG paths from a GeoJSON file, projected with `d3.geoMercator` and `d3.geoPath`, while elevator data is loaded from a CSV. The color scale uses `d3.scaleLinear` with `d3.extent` to set the domain, and tooltips are implemented as a D3 selection appended to the page.

Nov 21, 2024
Loading thumbnail…

Fork of Fork of WAEVData_Fork of Chloropleth

Two side-by-side SVG maps display Colorado counties using a blue choropleth fill. The code loads geographic boundaries from an EarthPy GeoJSON file and merges them with EV data from a CSV, though the data merge is not yet implemented. It uses d3.geoMercator, d3.geoPath, and Promise.all to load both sources, with each map rendered in its own SVG element. The visualization demonstrates a static county-level map without interactive or data-driven color encoding.

Nov 19, 2024
Loading thumbnail…

colorado data

This visualization maps elevator installations across South Carolina counties, coloring the map by a selected metric (population, income, or poverty). A bar chart displays the same metric per county, with tooltips revealing the elevator count for each. The code uses D3.js v6 with a Mercator projection (`d3.geoMercator`) and `d3.geoPath` to render the U.S. counties. The visualization reads from local data files and a dropdown menu (`#dataSelector`) dynamically re-renders both the map and the bar chart, using `d3.scaleLinear` for color mapping and `d3.scaleBand` for the chart axes.

Nov 19, 2024
Loading thumbnail…

Fork of Choropleth

This interactive dashboard combines a choropleth map with a linked scatter plot to explore country-level data. Users can select attributes for the x- and y-axes of the scatter plot and toggle between linear and logarithmic scales, while the map’s color encodes a chosen variable. The visualization uses D3 v6 with a `d3.geoEqualEarth` projection, `d3.geoPath` for map rendering, and `d3.scaleOrdinal` for categorical colors. A tooltip provides details, and transitions animate axis updates.

May 12, 2024
Loading thumbnail…

Fork of WAEVData (Fork of Choropleth by bepnye)

This visualization explores the distribution of electric vehicles (EVs) across Washington State counties, linking a choropleth map with a scatter plot of EV count versus real GDP per capita. Circles are sized by population and colored by county type (urban or rural), while the map uses a green gradient to show EV density. Users can hover for details, brush on the scatter plot to zoom, and double-click to reset. The visualization uses D3 v6 with `d3.geoPath`, `d3.scaleLinear`, brush interactions, and tooltips, reading data from a GeoJSON file and CSV source.

May 10, 2024
Loading thumbnail…

Fork of Chloropleth

This fork of a choropleth map pairs a geographic view of countries colored by birth rate with a scatter plot of fertility rate against life expectancy, with point size encoding population. Both SVG panels are rendered side by side using D3.js v6, with the map drawn via `d3.geoEqualEarth` and `d3.geoPath`. The scatter plot uses `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisRight` for ticks, while country data comes from a 2023 CSV and continent assignments from a JSON file. Hovering synchronizes highlights across both views.

May 2, 2024
Loading thumbnail…

scatterplot of world health data

A scatterplot displays the relationship between life expectancy and birth rate for countries in the 2023 world-data-2023.csv dataset. The visualization uses D3 v4 to render an SVG with axes, circles, and interactive hover effects. It loads data via `d3.csv`, scales the X-axis from 50 to 100, and computes the Y-axis domain from the birth rate values. Mouseover changes circle fill from green to red, demonstrating event handling in D3.

May 1, 2024
Loading thumbnail…

SC Counties2

This example displays a choropleth map of South Carolina counties, coloring each county blue or red based on whether its ID matches the value "06". It renders the GeoJSON data as SVG paths using D3's `geoPath()` projection. The code loads D3 via UNPKG, fetches geographic data from a raw GitHub GeoJSON URL, and demonstrates importing from local ES6 modules alongside D3's `select` API.

May 1, 2024
Loading thumbnail…

SC Counties

This example renders a choropleth map of US counties from TopoJSON data using D3 v5 and the `d3.geoPath` API. Each county is drawn as an SVG path, colored blue by default, with red highlighting for counties whose ID matches `'06'`, and tooltips via appended `title` elements. The map loads external US county geometry from a remote URL, while `topojson.feature` converts the data for rendering in an SVG container.

May 1, 2024
Loading thumbnail…

south carolina counties

This example displays a map of South Carolina counties, coloring each county path either red or blue based on its state ID. It loads geographic data from a remote JSON file and uses TopoJSON to convert it into GeoJSON features for rendering. The visualization relies on D3’s `select` and `attr` methods to configure an SVG canvas, while `d3.geoPath` is used to generate the path data for each county shape. The code also demonstrates importing local ES6 modules and logging county geometry coordinates.

May 1, 2024
Loading thumbnail…

scatterplot of doctors and life expectancy

A scatterplot displays the relationship between flipper length and body mass for three penguin species, colored green, blue, and gray, using data from a GitHub-hosted CSV. The visualization is rendered in SVG via D3 v6, with axes created using `scaleLinear`, `axisLeft`, `axisBottom`, and `extent`. Circles are bound to data through `selectAll` and `join`, while a title and axis labels are appended as SVG text elements. The example uses React-style JavaScript but relies on imperative D3 DOM manipulation.

Apr 30, 2024
Loading thumbnail…

scatterplot of doctors vs. life expectancy

This scatter plot visualizes the relationship between flipper length and body mass among three penguin species, with each point colored by species. The data comes from a PengBird CSV file. Built with React and d3.v6, the visualization uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and `select` with `join` to render SVG circles. A mouseover handler logs point data but shows no tooltip. The plot includes axis labels and a title, rendered across the full browser window.

Apr 30, 2024
Loading thumbnail…

Fork of Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population values and country names, with axes customized via `axisBottom` and `axisLeft`. Population values are formatted with `format('.3s')` to abbreviate large numbers, and the data is loaded asynchronously from a CSV file using `d3.csv`. The SVG rendering includes a title and axis label for clarity.

Apr 30, 2024
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a minimal React-based setup that renders a single circle in an SVG container and logs messages to the console. The page displays a large “Hello HTML!” message alongside the SVG, demonstrating basic DOM manipulation with D3.js. The code uses `d3.select` to target the SVG element and appends a circle with specified `cx`, `cy`, and `r` attributes. A separate CSS file styles the message and removes default body margins, while the HTML file links the stylesheet and loads the bundled JavaScript.

Apr 29, 2024