Skip to main content
SimilarExport ZIP
100%

ICE8CAmap

✓ Published0🌍 Public
Ddandamidhun41613@gmail.com
Last edited Nov 9, 2025
Created on Nov 9, 2025
Forked from D3 Starter

This choropleth map displays synthetic crime totals for each Canadian province, colored on a yellow-to-red sequential scale. It relies on the D3.js v7 API, projecting province boundaries with `d3.geoAlbers()` and rendering them as SVG paths through `d3.geoPath()`. The map loads GeoJSON from the `click_that_hood` repository, assigns random values, and includes an interactive legend with a color gradient and axis.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE8Wmap

This map shows global crime rates by country, using a yellow-to-red color scale to represent the range of synthetic crime rate values. Built with D3.js, it renders a Natural Earth projection using `d3.geoNaturalEarth1()` and draws country boundaries with `d3.geoPath()`. The code generates random crime rates and merges them with TopoJSON country data from the world-atlas package via `topojson.feature()`. It also adds a graticule layer with `d3.geoGraticule()` and an interactive color legend with axis labels.

Ddandamidhun41613@gmail.com
82% match
Loading thumbnail…

ICE-8_Q1.2_Canada_CostIndex_Map

This choropleth map displays Canadian provinces colored by an arbitrary cost index, with gray indicating missing data. Built with D3 v7, it loads a Canada GeoJSON file and joins it to the linked dataset on province name. The map uses a Mercator projection via `d3.geoMercator` and renders paths with `d3.geoPath`. A sequential color scale maps the cost index values, and interactive tooltips appear on mouseover, while a linear gradient legend explains the color encoding.

LLikhitaMudagereShivaraj@my.unt.edu
81% match
Loading thumbnail…

ICE-8_CanadaMap

This example visualizes a map of Canada with its provinces distinguished by light blue fill and white borders, rendered as scalable vector graphics. It loads TopoJSON data from a GitHub gist and uses d3.geoMercator for projection, with d3.geoPath converting geographic coordinates into SVG paths. The code employs topojson.feature for extracting province geometries and topojson.mesh for drawing internal boundaries, while d3.json handles asynchronous data loading.

Jjgaur96@gmail.com
79% match
Loading thumbnail…

Country map ICE 8

This choropleth map shows crime rate values for U.S. states, encoded with a threshold color scale ranging from light blue to dark navy. The map renders SVG paths via `d3.geoPath` with a `d3.geoAlbersUsa` projection, using TopoJSON data from the us-atlas repository. State values are loaded from a CSV file and mapped to fill colors, with a legend displaying the color bins alongside interactive tooltips on hover.

GGuntupalli Mohan kalyan
79% match
Loading thumbnail…

ICE 8-1.2

This choropleth map displays the crime rate per 100,000 people across U.S. states, using a sequential blue color scale where darker shades indicate higher rates. Hovering over a state reveals a tooltip with the exact value, while states without matching data appear gray. The visualization loads CSV data and U.S. TopoJSON boundaries, then renders them as SVG paths via `d3.geoPath` with an Albers USA projection. It uses D3 v7 for data binding, color encoding, and interactive tooltips, with state names normalized and matched against FIPS codes for labeling.

Ssakethpapareddy@gmail.com
78% match
Loading thumbnail…

ice - 8

This visualization shows crime rates across Indian states and union territories using an interactive choropleth map, with a sidebar providing a color legend and details about the hovered region. It combines D3.js version 6 for data parsing and SVG path generation via `d3.geoPath` with a custom `d3.geoTransform` projection, and Leaflet 1.7.1 for map rendering and interaction. The map loads state boundaries from a GeoJSON URL and colors each polygon based on crime rates from a CSV file using a sequential `d3.scaleSequential` with the `d3.interpolateYlOrRd` color scheme.

Ccharchana0527@gmail.com
78% match
Loading thumbnail…

ICE8_ Map

This choropleth map displays population distribution across selected countries, using an orange sequential color scale to encode values from a CSV dataset. Built with D3.js v7 and TopoJSON, the visualization projects country boundaries with `d3.geoNaturalEarth1` and renders them as SVG paths via `d3.geoPath`. Hovering triggers a tooltip showing country ID and formatted population, while a gradient legend with an axis communicates the color scale. The base geometry comes from the world-atlas TopoJSON file, and countries without data appear gray.

Ssaitejak1619@gmail.com
77% match
Loading thumbnail…

ICE 8 - Country Map

This example displays a choropleth map of the United States, with each county filled in green and outlined in brown, and hovering turns a county yellow. It uses the D3.js library's `geoPath` and `geoAlbersUsa` projection to render the map, drawing from the `us-atlas` counties-10m GeoJSON data source. County data is loaded via a JSON request, and the map’s SVG elements are built dynamically using D3’s selection and data-binding methods.

Ssalimjivani
76% match