Fork of Scatter Plot of Happiness and Y axis attributes

100%

Fork of Scatter Plot of Happiness and Y axis attributes

✓ Published0🌍 Public

Last edited May 21, 2023

Created on May 21, 2023

Forked from Scatter Plot of Happiness and Y axis attributes

This interactive scatter plot explores the relationship between the rate of depression across all ages and selected well-being indicators from the World Happiness Report. Users can switch between economy, social support, generosity, freedom, and perception of corruption using a dropdown menu, which updates the y-axis and its label. Built with React and D3 v5, the visualization uses D3’s `scaleLinear` and `extent` to compute scales, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render SVG axes and circles. Point positions are set via `cx`/`cy` attributes, with tooltips formatted using D3’s `format`.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot of Happiness and Y axis attributes

This scatter plot visualizes the relationship between happiness scores and several country-level attributes, including economy, social support, generosity, freedom, and perceived corruption, using data from the World Happiness Report. An interactive dropdown menu allows the viewer to switch the y-axis attribute, updating the visualization dynamically. The plot is rendered as an SVG using React and D3 v5, with `d3.scaleLinear` handling axis scaling and `d3.extent` and `d3.format` for domain and tick formatting. Axis components and data marks (circles) are implemented as reusable React components, with tooltips showing the happiness score on hover.

NNikithakatta30

92% match

Loading thumbnail…

Fork of Scatter Plot of Happiness and Y axis attributes

This interactive scatter plot explores the relationship between the Happiness Score and five selectable y-axis attributes (Economy, Social Support, Generosity, Freedom, and Perception of Corruption) using the Iris Dataset. A dropdown menu updates the y-axis scale and label dynamically, with circles rendered via React and SVG. The visualization uses d3.scaleLinear for axes, d3.csv for data loading, and d3.format for tick labels, all coordinated through React state to trigger re-renders.

NNikithakatta30

90% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot displays country-level well-being indicators, with happiness score on the x-axis and a selectable y-axis metric (economy, social support, generosity, freedom, or corruption). Each circle represents a country, with an HTML `<title>` tooltip showing its exact happiness score. The React-based visualization uses D3 v5 scales (`scaleLinear`), axes (`AxisBottom`, `AxisLeft`), and CSV data loading (`d3.csv`) from a GitHub gist. Users switch the y-axis via a dropdown, triggering React state updates that re-render the SVG marks.

NNikithakatta30

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

85% match

Loading thumbnail…

Fork of Scatter Plot with Color

This scatter plot visualizes the relationship between Happiness Score and ageStandard, with each point colored by country. The visualization uses React with SVG rendering, employing d3’s scaleLinear for axes, scaleOrdinal for categorical color mapping, and format for tick labels. Data is loaded from a CSV via d3.csv and parsed with numeric coercion. Hovering over a circle reveals a tooltip showing the happiness score.

NNikithakatta30

84% match

Loading thumbnail…

World Happiness Scatter Plot with Menus

This interactive scatter plot explores relationships among well-being indicators for 156 countries, using data from the World Happiness Report. Two dropdown menus let users select which metrics to compare on the x- and y-axes, including happiness score, GDP, school years, health expenditure, and employment rate. The visualization uses React for UI state management and d3.scaleLinear for positioning axes and d3.scaleOrdinal for coloring points. SVG circles render each country, with hover tooltips showing the x-axis value.

Mmkt-ds

84% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes depression data across different age groups, allowing users to dynamically select which attributes appear on the x and y axes via dropdown menus. Built with React and D3 v5, the visualization uses d3.scaleLinear and d3.extent to map data points as SVG circles, with axis components rendered through custom React components. The dataset is loaded asynchronously using d3.csv from a remote URL. Users can switch between sepal measurements and species attributes, with axis labels updating accordingly to reflect the selected variables.

NNikithakatta30

83% match

Loading thumbnail…

Happiness and Depression rates with color legend

This scatter plot visualizes the relationship between Happiness Scores and depression rates across all ages, with points colored by year and a color legend that supports interactive filtering. Hovering over a legend year highlights only the corresponding data points and fades the rest. The visualization uses React components for rendering SVG elements, with D3 scales like `scaleLinear` and `scaleOrdinal` to map data to positions and colors. Data is loaded via D3’s `csv` from a GitHub gist, and axes are built using custom React components.

NNikithakatta30

83% match