100%

Scatter Plot

✓ Published0🌍 Public

Last edited Sep 18, 2024

Created on Sep 17, 2024

This scatter plot visualizes the relationship between the Cost of Living Index and the Cost of Living Plus Rent Index for countries in 2024, using data from a Kaggle dataset. Each circle is positioned by the two indices and colored by rank from green to red via a linear scale, with a light gray inner rectangle framing the plot. The visualization is built with D3.js, using `scaleLinear` for axes and color, `extent` for data ranges, and custom `xAxis` and `yAxis` functions.

AI-generated description

A simple scatter plot with D3 showing the Cost of Living Index by Country (2024)

Cost of Living Index by Country (2024)

This dataset provides the cost of living index data for countries around the world in 2024. It can be used for comparative analysis of living costs across different regions, helping users understand which countries are more or less expensive to live in. The index is calculated based on a variety of expenses such as groceries, rent, and purchasing power.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot: Rent Index vs Rank

This scatter plot visualizes the relationship between Rent Index and Country Rank using the Cost of Living Index by Country 2024 dataset from Kaggle. Each circle represents a country, with its horizontal position encoding the rent index and vertical position encoding rank. The visualization uses D3’s `scaleLinear` for both axes, `axisLeft` for the y-axis, and the `@curran/axis-labels` library for labeled axes. An inner rectangle highlights the plotting area, while semi-transparent circles (opacity 0.629) reveal overlapping data points.

Sste.jendritz@gmail.com

83% match

Loading thumbnail…

Cost of Living Index by Country

This example displays the first row of a CSV dataset on the cost of living index by country for 2024. It lists key metrics such as the cost of living index, rent index, and local purchasing power index, alongside the country's rank and name. The visualization uses JavaScript to import the data and render it as a JSON string within an HTML `<pre>` element, setting the font size dynamically. The code parses the numeric string values into numbers before displaying them. The dataset originates from a publicly available Kaggle source.

Yyaredmtaye@gmail.com

74% match

Loading thumbnail…

Fork of Cost of Living Vs Purchasing Power

This interactive scatter plot maps 115 countries by cost of living (x-axis) against local purchasing power (y-axis). Circle size reflects global rank, while color encodes the purchasing-power-to-cost ratio, from green ("Excellent") to red ("Poor"). A dashed diagonal line marks equal ratios, with quadrant labels for context. Built with React, D3.js (v7) `scaleLinear` and `axisBottom`, the visualization supports hover tooltips, click-to-select country highlighting, and a clear-selection control. Data comes from a bundled `data.csv` file.

NNita

74% match

Loading thumbnail…

Cost of Living Vs Purchasing Power

This scatter plot shows the relationship between the Cost of Living Index and Local Purchasing Power Index for countries worldwide. Each circle represents a country, positioned by its cost of living on the x-axis and purchasing power on the y-axis. Circle color indicates the value ratio between purchasing power and cost of living, from green (good value) to red (very poor value), while circle radius reflects rank. The visualization uses D3’s `scaleLinear` for axes, and React manages state with click interactions that highlight selected countries, plus a tooltip showing country name and rank.

NNita

73% 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

72% match

Loading thumbnail…

Cost of Living - Parallel Coordinates

A parallel coordinates plot displays the cost-of-living index for 90 cities across six dimensions—consumer price, rent, consumer price plus rent, groceries, restaurant price, and local purchasing power. Each city appears as a polyline connecting its values on vertical axes, with grey background lines for all cities and blue foreground lines for those selected via brushing. The visualization uses D3 v3, reading a CSV file, scaling each dimension with d3.scale.linear, and enabling interactive brush filters that hide non-matching lines.

Mmbostock

70% 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

70% 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

69% match