Skip to main content
SimilarExport ZIP
100%

fork country

✓ Published0🌍 Public
Rrushithareddyy
Last edited Jul 21, 2023
Created on Jul 21, 2023

This interactive scatterplot explores global health indicators across countries, plotting health expenditure against life expectancy with each point colored by continent. Users select which attribute appears on each axis via dropdown menus, and hovering over the color legend highlights points from that continent while fading others. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color encoding, and renders all marks as SVG circles with opacity transitions. Data is loaded as CSV from a GitHub gist.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of country

This interactive scatterplot visualizes COVID-19 metrics across countries, plotting attributes like new cases against total cases on logarithmic-scaled axes. Each circle represents a country, colored by continent, with a legend to the right. The visualization uses React with D3 v5 scales (`scaleLinear`, `scaleOrdinal`) to render SVG marks and axes. Data is loaded asynchronously from a CSV file using D3's `csv` method, with dropdown menus allowing users to switch between different case and death metrics for the x and y axes.

Rrushithareddyy
87% match
Loading thumbnail…

Interactive Color Legend Scatter Plot for Health Expenditure Vs Life Expectancy

This interactive scatter plot visualizes the relationship between health expenditure and life expectancy across countries, with continents encoded by color. A dropdown menu allows users to switch which attribute maps to the X and Y axes, while hovering over the color legend highlights points from that continent and fades others. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG circles rendered via the `Marks` component. Data comes from a CSV file loaded with `d3.csv`.

Aaishwarya8615
84% match
Loading thumbnail…

Fork of D3 scatterplot

This scatterplot displays the relationship between health and population from the Gapminder health-income dataset, with each point representing a country. The visualization uses D3 v7 to fetch CSV data, scale both axes linearly based on the data extent, and render points as SVG circles. Axes are added using `axisLeft` and `axisBottom` from D3's scale API, with data mapped through `scaleLinear` and the extent function. The chart fills the entire browser window, with custom margins and styled tick text.

AAnshul Rawat
81% match
Loading thumbnail…

Fork of countries

This scatterplot of countries uses urban population as the x-axis and country names as the y-axis, with circles colored by each nation’s official language. Hovering over the color legend filters the displayed points to only those matching that language, dimming non-matching data. The visualization is built with React, D3 v5’s `scaleLinear`, `scaleOrdinal`, and `extent` for scales, and custom React components for axes, marks, and the interactive legend. Data loads from a CSV via `d3.csv`, and all elements render as SVG inside a single `<svg>` canvas.

Rrushithareddyy
81% match
Loading thumbnail…

Interactive Color Legend Scatterplot to determine Healthcare Expenditure per year

This interactive scatterplot visualizes healthcare expenditure against year for different continents. The visualization uses d3.scaleLinear for X and Y axes and d3.scaleOrdinal for color mapping. A color legend allows users to hover over continent names, filtering and highlighting corresponding data points while fading others. Built with React and d3.v5, the SVG rendering uses CSV data loaded via d3.csv.

Aaishwarya8615
80% match
Loading thumbnail…

Fork of Fork

This visualization uses D3.js to plot COVID-19 data from a WHO global dataset, showing total cases against total deaths for each country as individual circles. The scatter plot uses D3's `csv` loader and `scaleLinear` functions to map the data, with axes labeled "Total Cases" and "Total Deaths." Circles are rendered in steelblue, and the chart is drawn as an SVG in a React application. The code defines its own width, height, and margins, using D3's `axisBottom` and `axisLeft` to generate the axes.

66264kusuma@gmail.com
80% match
Loading thumbnail…

Fork of Interactive Color Legends with informative Tooltips and dropdown menu

This interactive scatterplot explores correlations in life expectancy data, plotting user-selected variables on the X and Y axes via a dropdown menu. A color legend, encoded using `d3.scaleOrdinal` with `schemeCategory10`, distinguishes the continents. Clicking a legend item emphasizes data points from that region, while hovering reveals a tooltip with detailed information about each data point. The visualization uses D3 v5, SVG, and transitions to animate updates between different variable selections.

XXiaoyu Su
80% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes COVID-19 total cases over time for nine countries, with each country represented by a distinct color. Hovering over a legend item highlights that country’s data points while fading all others. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and color mapping. The data comes from the JHU COVID-19 dataset loaded via `d3.csv`, rendered as SVG circles with hover-driven opacity changes through React state.

Aamanoakane
79% match