Cost of living map with colorscale and country pop-up

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.

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.

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.

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.

Ddeepthinaidu2001@gmail.com

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.

87% match

Cost of living map with Radar Chart Pop-up

A world map uses a color gradient to display the cost-of-living index per country, with blues indicating higher costs and reds indicating lower costs. Clicking a country opens a modal pop-up containing a radar chart that breaks down that nation's rent, groceries, restaurant prices, and purchasing power. Built with D3.js, the visualization uses `geoNaturalEarth1` and `geoPath` for the map projection and rendering, while the radar chart is drawn with `radialLine`. Data comes from the included CSV file.

86% match

Cost of living map with Radar Chart Pop-up Final

An interactive world map visualizes the cost of living index per country using a color scale from dark green to dark red. Clicking a country opens a modal pop-up containing a radar chart that breaks down the cost of living into five attributes: rent, cost of living plus rent, groceries, restaurant prices, and purchasing power. The visualization uses d3.geoPath for the map projection and d3.radialLine for the radar chart, with data loaded from a CSV file and topojson for country boundaries.

85% match

Cost of living map with Radar Chart Pop-up REV1

This interactive visualization presents a world map where each country is color-coded according to its cost of living index, ranging from blue for high costs to red for low costs. Clicking on a country opens a modal pop-up containing a radar chart that compares that country’s rent, groceries, restaurant prices, and purchasing power indices. Built with D3.js and topojson-client, the map uses d3.geoNaturalEarth1 projection and d3.geoPath for rendering, while the radar chart is constructed using d3.radialLine. Animated transitions and custom CSS styling enhance the user experience.