Skip to main content
SimilarExport ZIP
100%

Fork of Cost of Living World Map

✓ Published0🌍 Public
Sste.jendritz@gmail.com
Last edited Nov 2, 2024
Created on Nov 2, 2024

A world map visualizes the cost of living index by country, using a color gradient where blue indicates higher costs and red indicates lower costs. The visualization loads geographic data as TopoJSON from a URL, converts it to features with `topojson-client`, and renders it using `d3.geoPath` and the Natural Earth projection, with country colors mapped from a CSV data file.

AI-generated description

Simple world map showing cost of living index per country represented by color gradient. Closer to blue is high cost of living while closer to red is low cost of living.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Cost of Living World Map With Country Selection and Color Scale

This world map visualizes the cost of living index per country using a red-to-blue color gradient, with blue representing higher costs and red lower costs. The view includes a graticule and outline, and hovering over a country displays its name in green text. Built with D3.js and topojson-client, the map uses `geoNaturalEarth1` projection, `geoPath`, and `scaleSequential` with `interpolateRgbBasisClosed` to map data from a CSV file to country features. The legend and interactive selection are partially implemented in the code.

Sste.jendritz@gmail.com
92% match
Loading thumbnail…

Cost of Living World Map

This map visualizes the cost of living index across countries, using a blue-to-red color gradient where blue indicates higher costs and red indicates lower costs. Built with D3.js, it applies the `geoNaturalEarth1` projection and `geoPath` to render country outlines from TopoJSON data, while a `scaleSequential` color scale encodes the numeric index from the CSV dataset. The map also includes graticule lines and an outline for geographic context.

Sste.jendritz@gmail.com
87% match
Loading thumbnail…

Cost of Living World Map With Country Selection

This interactive world map visualizes the cost of living index by country, using a red-to-blue color gradient where blue indicates higher costs. Hovering over a country reveals its name in green text. The visualization uses D3.js with `geoNaturalEarth1` projection and `geoPath` to render map features from TopoJSON data, while a sequential color scale maps the index values. The cost of living data is loaded from a local CSV file.

Sste.jendritz@gmail.com
85% match
Loading thumbnail…

Cost of living map with colorscale and country pop-up

This interactive SVG world map visualizes the cost of living index per country, using a color gradient from red (low cost) to blue (high cost). It employs D3's `geoNaturalEarth1` projection and `geoPath` to render countries, with data from a CSV file. Users can hover to see country names and click to display a modal with the country's name and index value. The map fetches world atlas data from a URL and processes it with `topojson`.

Sste.jendritz@gmail.com
84% match
Loading thumbnail…

Cost of Living World Map With Country Selection and Color Scale

This interactive choropleth maps the global cost of living index, encoding each country’s relative expense with a red-to-blue color gradient derived from a sequential scale. Hovering over a country displays its name, while clicking attempts to open a modal window, which is only partially implemented. The visualization uses D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render the world map, along with a custom `colorLegend` component. Data comes from a local CSV file, with geographic boundaries loaded from a TopoJSON world atlas.

Sste.jendritz@gmail.com
83% match
Loading thumbnail…

map visualization

This map visualization displays global cost of living indices using a color scale from yellow to blue, with gray indicating missing data. It uses D3 v7 to load TopoJSON world geography and CSV country data, generating simulated cost values for each nation. The visualization employs d3.geoNaturalEarth1 projection with d3.geoPath to draw country boundaries as SVG paths, and includes an interactive hover tooltip that reveals each country’s index value. A sequential color legend with a linear gradient and axis is rendered at the bottom right to show the value range from 30 to 100.

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

Fork of map

This interactive world map colors each country by economy group using a categorical ordinal scale with a spectral color scheme. Users can pan and zoom the map through d3.zoom, while hovering highlights individual countries. The visualization loads geographic data from the world-atlas TopoJSON dataset and joins it with TSV metadata, rendering with d3.geoPath and a natural Earth projection. A custom color legend component displays the ordinal scale, and the code imports utilities from d3 v5 and topojson.

RRahulChaitu999
77% match