IternetIndex-GENDERGAP

可视化

This visualization compares Internet Gender Gap and Corruption Perception across countries, using a radial scatter plot where circle position reflects corruption scores and size encodes gender gap. Each point is colored on an ordinal corruption scale, and hovering reveals a tooltip with exact values. Built with React and D3 v6, the code uses `scaleLinear`, `scaleOrdinal`, `csv` loading, and custom legends, with data from GitHub-hosted CSV files.

Qqwxyyigesm

91% match

LoveWord

An animated scatter plot visualizes the relationship between corruption perception and internet gender gap across countries, with a dynamic circle layout that shifts positions over time. Each circle’s color encodes corruption perception and radius reflects the gender gap, while hover interactions reveal detailed country-specific values in a tooltip. The visualization updates every 100 milliseconds by fetching new data from a remote CSV file, combining React state management with D3.js (v6) scales and transitions to animate the SVG marks. The code uses D3’s `csv` loader and custom legends to interpret the streaming dataset.

JJonas Carvalho

81% match

Untitled

This interactive scatterplot compares a selected social indicator against age-standardized depression rates across countries, with each circle representing a year's data for a chosen region. Users can switch the x-axis between Freedom, Corruption, Generosity, and Health, and filter by geographic region via dropdown menus. Built with React and D3 v6, the visualization uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render SVG circles, with a color-coded legend distinguishing years. Data comes from the `data.csv` file, and the title suggests a thematic focus on societal factors versus depression.

NNikithakatta30

69% match

Gapminder Data in React and D3 - interactive regions

This interactive Gapminder visualization, built with React and D3, maps country-level indicators like income per capita, life expectancy, and fertility rate over time (1950-2015). Users can switch axes, scrub through years with a slider, and hover or click the color legend to highlight or select world bank regions. The map background uses `geoNaturalEarth1` and `geoPath` from D3, while SVG circles are scaled with `scaleSqrt` and colored via `scaleOrdinal`. Data is fetched from a Gapminder summary CSV.

69% match

Gapminder Data in React and D3 - rotated menu, added color and legend

This interactive scatter plot visualizes Hans Rosling’s Gapminder data from 1950, showing countries as colored circles positioned by year (x-axis) and a user-selected metric (y-axis) via a rotated dropdown menu. Each circle encodes its World Bank region through color, with a legend clarifying the mapping and tooltips revealing country names. Built with React and D3 (v5), the visualization uses `scaleLinear`, `scaleOrdinal`, and SVG rendering, with axes, color legend, and marks generated as reusable React components. The code loads data via D3’s `csv` method and filters out zero values before plotting.

Gapminder Data in React and D3 - 1 menu

This scatterplot displays Gapminder country-level data from 1950 onward, plotting year on the x-axis and one of four selectable attributes (income per capita, total population, life expectancy, or fertility rate) on the y-axis. Each circle represents a country, with its color fixed and a native SVG `<title>` tooltip revealing the country name. Built with React and D3 v5, it uses `scaleLinear` axes, `csv` loading, and `format` for tick labels, while a `react-dropdown` menu updates the y-axis attribute via React state.

Gapminder Data in React and D3 - world map background

This visualization displays Gapminder country data—including income per capita, total population, life expectancy, and fertility rate—as colored circles plotted over a world map background. A dropdown menu allows switching the y-axis attribute, while circles are color-coded by World Bank global region. The map is rendered using `d3.geoNaturalEarth1` and `d3.geoPath` with TopoJSON world atlas data, while React manages component state and D3 scales handle axes and color encoding.

Gapminder Data in React and D3 - worldmap colored

This visualization displays historical Gapminder country data—including income, population, life expectancy, and fertility—on a world map colored by World Bank region, with a scatterplot overlay showing data over time. The React app uses D3 v5 scales (scaleLinear, scaleOrdinal) and geoNaturalEarth1 projection with geoPath to render the atlas, while the dropdown menu switches the y-axis metric. Data is loaded via d3.csv from a Gapminder summary, and country colors are matched via a lookup table.