可视化

100%

✓ Published0🌍 Public

Last edited Nov 11, 2022

Created on Nov 9, 2022

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.

AI-generated description

A scatter plot of [Iris] https://gist.githubusercontent.com/curran/a08a1080b88344b0c8a7/raw/0e7a9b0a5d22642a06d3d5b9bcbad9890c8ee534/iris.csv

MIT Licensed

Similar vizzes

Loading thumbnail…

IternetIndex-GENDERGAP

This visualization plots Internet Gender Gap against Corruption Perception for various countries. Each circle’s position encodes corruption values via a radial scale, while its radius represents the gender gap, and its color maps to corruption perception using a custom ordinal color scale. Hovering reveals a tooltip with exact country details. The code uses D3.js scales and arrays for layout, with React managing state and SVG rendering from CSV data sources.

JJonas Carvalho

91% match

Loading thumbnail…

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

80% match

Loading thumbnail…

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

70% match

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between a country's happiness Score and its perceived corruption level, using data from the World Happiness Report. Each red circle represents a country, positioned by its Score on the x-axis and corruption value on the y-axis. The code uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart, with SVG rendering. It loads the `happiness.csv` file via `csv`, maps numeric fields, and applies margins, axis labels, and a title within the SVG canvas.

Xxyang3672

69% match

Loading thumbnail…

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.

Llakalia@wpi.edu

69% match

Loading thumbnail…

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.

Llakalia@wpi.edu

68% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays a horizontal bar chart comparing the population of the top 10 countries from a CSV file hosted on GitHub. It uses React for component structure and state management, with D3 (v5) for the scales and axes. The SVG rendering maps each country's population to a bar’s width using `d3.scaleLinear`, while `d3.scaleBand` positions the categorical labels along the y-axis. The chart includes blue x-axis gridlines and labeled ticks, presenting a clean, static comparison of the selected data.

Ssudhamshu24

68% match

Loading thumbnail…

Untitled

This interactive scatterplot explores the relationship between a selectable metric (Freedom, Corruption, Generosity, or Health) and depression rates across all ages, filtered by world region. Colored dots represent different years, with tooltips revealing exact values. The visualization uses D3 v6 to load CSV data via `d3.csvParse`, render SVG elements, and update scales, axes, and circles dynamically through dropdown selectors.

NNikithakatta30

67% match