Chroropleth Map with slider (d3v7)

100%

Chroropleth Map with slider (d3v7)

✓ Published0🌍 Public

Last edited Apr 23, 2024

Created on Apr 23, 2024

A choropleth map of Oklahoma counties displays student-to-teacher ratios, with an interactive range slider. The map’s fill colors update over time as users drag the slider from 1987 to 2010. The visualization is built with D3 v7, using `d3.geoConicConformal`, `d3.geoPath`, and `topojson.feature` to render map shapes from a loaded JSON file. The slider event triggers a `switch` to update county colors based on yearly data.

AI-generated description

Choropleth Map with slider that is based on this sample from https://gist.github.com/darrenjaworski/5397202.

The example has been upgraded from d3v3 to d3v7.

MIT Licensed

Similar vizzes

Loading thumbnail…

Oklahoma Counties

This example displays a map of Oklahoma’s counties, drawn as individual gray paths with darker borders between counties and a thicker outline around the state. Hovering over any county turns it orange. The map loads county geometries from a TopoJSON file and renders them as SVG using `d3.geo.path` with a null projection, meaning coordinates are used directly. The code relies on `topojson.feature` to convert the Topology into GeoJSON and `topojson.mesh` to draw the county and state boundary lines.

MMTClass

74% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays U.S. state-level data with interactive filtering, allowing users to select a category and see the corresponding color shading update across the map. The visualization uses D3 v5 and TopoJSON to render the geographic boundaries via `d3.geoPath`, while a color legend component updates dynamically based on the selected filter. State polygons are drawn in an SVG container, and the filtering logic re-applies a color scale to the shapes. The map loads and processes CSV data with a custom utility, and styling is defined in a separate CSS file.

DDolbyref113

73% match

Loading thumbnail…

Homework 7

This map shows Oklahoma counties overlaid on OpenStreetMap raster tiles, with a crimson semi-transparent point pattern and county mesh outlines. The visualization combines tiled map imagery via `d3.tile` with geographic county boundaries from a TopoJSON file, projected using `d3.geoMercator` and rendered as SVG paths through `d3.geoPath`. Quake data appears as filled circles, though no dataset is explicitly loaded here. The code uses D3 v4, TopoJSON, and the `d3-tile` plugin to compose the interactive layout.

AAnaMal08

73% match

Loading thumbnail…

Choropleth

A choropleth map visualizes the reported incidence of Lyme disease across U.S. counties for each year from 2000 to 2015. An interactive slider lets viewers animate through the years, updating the color fill of each county based on its case rate. The visualization employs D3.js (v3), using `d3.geo.albersUsa` for the map projection, `d3.geo.path` to render geographic shapes, and `d3.nest` to organize the CSV data by county and year. A tooltip, styled with the `d3.select` API, reveals the reported cases for 2000 and 2015 and the change between them on hover. County boundaries are drawn from a TopoJSON file, with state borders outlined in white.

CCrunchytoastmmm

72% match

Loading thumbnail…

new data with json

This choropleth map displays county-level ozone concentrations across the United States from 2000 to 2021. A vertical slider and play button animate through years, with the sequential YlGnBu color scale mapping ozone levels while gray indicates missing data. Built with React and D3 v5, it uses `geoPath` with an Albers USA projection and TopoJSON county/state boundaries, rendering SVG paths with hover tooltips showing county names and values.

CChase Hall

72% match

Loading thumbnail…

Choropleth population map

A choropleth map of the United States displays state-level population counts from 1990, using a color gradient from light orange to dark red. The map is rendered as SVG with D3 v3, leveraging `d3.geo.path` and TopoJSON for state boundaries. Population data from a CSV file is joined to state IDs, and a custom `d3.scale.quantize` interpolates colors across 100 steps. Hovering over a state triggers a tooltip and animates opacity, while the legend and interactivity are built with jQuery and D3 transitions.

Vvishusikka

72% match

Loading thumbnail…

Choropleth Map of County Data

A choropleth map shades U.S. counties by poverty rate, with a color legend and state boundaries overlaid. The visualization loads GeoJSON topology and CSV data via promises, then uses `d3.geoPath` and TopoJSON to render county shapes, while `d3.scaleThreshold` and `d3.schemeGreens` map poverty percentages to fill colors. County paths include tooltips showing the exact rate, and an axis below the map labels the legend’s tick values.

YYash G

72% match

Loading thumbnail…

Choropleth Map of County Data

A choropleth map of U.S. counties visualizes poverty rates as filled paths, with a color legend and axis labeling the percentage scale. Built with d3.v5, it loads TopoJSON county boundaries and a CSV of poverty data, then uses d3.geoPath to render SVG shapes and d3.scaleThreshold with d3.schemeGreens for the color encoding. State borders are drawn as white mesh lines, and hover tooltips show each county’s exact rate.

Yyqinolive

72% match