Skip to main content
SimilarExport ZIP
100%

Accidents on the Road - Choropleth

✓ Published4🌍 Public
TTaustus
Last edited Sep 21, 2020
Created on Aug 19, 2020
Forked from HTML Starter

A choropleth map of Russia colors each federal region according to the rate of car accidents per capita, using a threshold scale with ranges like low, medium, and high. Hovering over a region highlights it and reveals a tooltip with the region’s name and value. The visualization also labels major cities with circles. Built with D3 v3, it uses `d3.geo.path`, `d3.geo.albers`, and TopoJSON for map rendering, while reading data from CSV and TSV files.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Accidents on the Road - Choropleth

This choropleth map visualizes road accident data across Russian regions, coloring each region according to a normalized value using a per-region threshold scale with custom color domains. The visualization includes city markers and a legend, with tooltips showing regional names and values on hover. Built with D3 v3, it uses `d3.geo.albers` projection, `d3.geo.path`, and TopoJSON to render geographic boundaries, while data from a CSV file drives the color assignments via `d3.scale.threshold`. The map also handles missing region data by mapping certain administrative codes to equivalent values.

HHui Zhang
95% match
Loading thumbnail…

Accidents on the Road - Choropleth

This choropleth maps road accident deaths across Russian regions, using a threshold color scale from light green to dark red, and includes interactivity where hovering highlights a region and displays its name and fatality count on a tooltip. It also plots major cities as points and includes a vertical legend. Built with D3.js v3, it uses the `d3.geo.albers` projection and `d3.geo.path` to render the map geometries from TopoJSON, while `d3.csv` and `d3.tsv` load the accident and city data, and SVG shapes, transitions, and the `d3.select` API handle the visualization and mouseover effects.

TTaustus
94% match
Loading thumbnail…

Accidents on the Road - Choropleth

This choropleth map visualizes road accident deaths across Russian regions for 2012, using a threshold color scale to differentiate mortality rates per region. It shows a hover tooltip displaying the region name and death count, alongside labeled city markers. The visualization is built with D3 v3, using `d3.geo.albers` projection, `d3.geo.path`, and `d3.scale.threshold` for coloring, with SVG rendering and animated transitions for hover effects. Data comes from a CSV file and a TopoJSON map, with city coordinates from a TSV file.

KKoGor
93% match
Loading thumbnail…

Accidents on the Road - Choropleth

This visualization presents a choropleth map of road accident deaths across Russian regions, with color-coded polygons indicating mortality rates and city markers overlaid on major population centers. Hovering over a region reveals its name and death count via a tooltip. The map is rendered using D3 v3’s `d3.geo.albers` projection and `d3.geo.path` on topojson data, while a `d3.scale.threshold` maps death values to a green-to-red color scale. Accident statistics come from a CSV file, and city coordinates are loaded from a TSV file.

KKrishu
93% match
Loading thumbnail…

Accidents on the Road - Choropleth

This choropleth visualizes road accident data as a map of regions, colored by the number of incidents. The map shows geographic patterns of accident frequency, with darker shading indicating higher counts. Built with React and D3 v5, it uses `d3.csvParse` to load the input data and `topojson` to render the geographic boundaries. The `d3.geoPath` generator draws the region shapes, while a color scale encodes the accident values. A legend and tooltip provide context, with the tooltip appearing on hover to display the region’s specific accident count. The rendering uses SVG paths with styling defined in CSS.

TTaustus
88% match
Loading thumbnail…

Country Map --Russia--IC8

This example displays a choropleth-style map of Russia, with each state filled in red and outlined in black, rendered as SVG paths on a bisque-colored background. The visualization uses D3’s `geoPath` with the `geoNaturalEarth1` projection, centered on Russia, and loads TopoJSON data via `topojson.feature` to draw regional boundaries. Users can pan and zoom the map using D3’s `zoom` behavior. An ordinal color scale (`scaleOrdinal` with `schemeCategory10`) is defined, though only the red fill is currently applied.

Rrajasrilekkala
75% match
Loading thumbnail…

Choropleth worldmap with cities

This interactive choropleth world map uses a categorical color scale to depict each country’s income group, with a clickable legend that filters and highlights matching regions plus dims others in SVG. It supports pan and zoom via d3.zoom. The map also plots major Russian cities with their absolute locations using data from a local TSV file. Built with React and D3 v5, it renders countries from TopoJSON using d3.geoPath with a natural Earth projection, while `d3.scaleOrdinal` maps income groups to a spectral palette.

PPeter S
75% match
Loading thumbnail…

Choropleth Map

A choropleth map visualizes epidemic risk class by country, using color to indicate risk levels from low to very high. Drawn with d3.geoPath and a natural Earth projection, the map supports pan and zoom, with hover tooltips displaying country, risk class, and rank. Data comes from a CSV file joined with world-atlas TopoJSON. A legend uses d3.scaleOrdinal and the RdPu color scheme to explain the ordinal classes.

Bbeca8675
74% match