Skip to main content
SimilarExport ZIP
100%

ICE-8_Q1.2_Canada_CostIndex_Map

✓ Published0🌍 Public
LLikhitaMudagereShivaraj@my.unt.edu
Last edited Nov 10, 2025
Created on Nov 10, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE8CAmap

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.

Ddandamidhun41613@gmail.com
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
81% match
Loading thumbnail…

Fork name: ICE-8-Q1.2-World-Map-CostIndex

This world choropleth colors countries by a cost index, where values above 100 indicate higher-than-baseline costs and values below 100 indicate lower costs. The map uses an SVG projection with D3 v7’s `geoNaturalEarth1` projection, `d3.geoPath`, and a sequential `d3.interpolatePlasma` color scale. Country geometries come from a remote GeoJSON file, and hovering displays a tooltip with each country’s specific index value. Countries without data appear in a muted gray, while a fixed legend explains the color scale.

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

Fork of ICE-8_Q1.2_India_CostIndex_Map

This choropleth map shows Indian states colored by their living cost index, with gray indicating missing data. Built with D3 v7, it loads GeoJSON boundaries via `d3.json` and renders paths with `d3.geoPath` using a Mercator projection fitted to the SVG. State names from the GeoJSON join with a hardcoded cost-index map, and a sequential YlGnBu color scale encodes values. Hovering displays a tooltip with the state name and index.

Jjanisha30gowda@gmail.com
76% match
Loading thumbnail…

ICE-8_Q1.2_India_CostIndex_Map

This choropleth map visualizes living cost index values across Indian states, with darker blue-green hues representing higher costs and gray indicating missing data. The visualization joins a hardcoded cost dataset to GeoJSON features using the ST_NM property, then applies a d3.geoMercator projection fitted to the SVG canvas. Interactive tooltips display state names and index values on hover via d3.event handlers, while a sequential color scale (d3.scaleSequential with d3.interpolateYlGnBu) and attached legend provide the visual encoding. The GeoJSON source is a remote GitHub repository for India state boundaries.

Jjanisha30gowda@gmail.com
76% match
Loading thumbnail…

Question 2 Canada Provincial Wellbeing Index

This choropleth map displays illustrative wellbeing scores (0–100) across Canadian provinces and territories, with a yellow-green sequential color scale and an interactive tooltip showing exact values on hover. Built with D3 v7, it loads GeoJSON province boundaries from the codeforgermany/click_that_hood repository and renders them as SVG paths using d3.geoPath with a Mercator projection fitted to the container. A legend with a linear gradient and axis communicates the color scale, and the chart redraws responsively on window resize.

Vvunnamnandini13@gmail.com
76% match
Loading thumbnail…

ICE-8 — USA States Map (Cost Index)

A choropleth map of India displays state-level living cost indices, using a linked dataset and geographic features joined by the `ST_NM` property name key. The visualization encodes values through a `d3.scaleSequential` with the `d3.interpolateYlGnBu` color interpolator, while gray shades indicate missing data. Built with D3 v7, it renders as SVG using `d3.geoMercator` projection fitted to the viewport and `d3.geoPath` for drawing state boundaries. Interactive tooltips appear on mouseover, showing each state's index value.

Jjanisha30gowda@gmail.com
75% match
Loading thumbnail…

Canada Map

This example presents a choropleth-style map of Canada’s provinces, rendered as orange SVG paths with white strokes on a blue background. It uses `d3.json` to load the `provinces-10m.json` TopoJSON dataset from the `canada-atlas` package, then converts it to GeoJSON via `topojson.feature`. The `d3.geoPath` generator applies a `d3.geoMercator` projection with a scale of 1500 to draw each province boundary, with styling handled through static attributes.

NNitheeshSama
74% match