Fork of Scatter Plot with Color

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.

87% match

Untitled

This scatter plot displays the relationship between a country's Happiness Score and its rate of depressive disorders, with each point's size representing population and color encoding geographic region. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.scaleOrdinal for the categorical color mapping. SVG circles are positioned via the xScale and yScale functions, with axis labels and tick marks generated using d3.axisBottom and d3.axisLeft within a React-rendered SVG container.

85% match

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.

85% match

Fork of 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`.

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.

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.

Rrallabandisushen@gmail.com

Fork of ICE 6: Scatter Plot Showing Life expectancy vs Happiness Score Scatter Plot

This scatter plot visualizes the relationship between life expectancy and happiness score across countries, with each circle representing a data point. The chart uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to map the CSV data onto an SVG canvas, with green circles and labeled axes. The code loads data from a GitHub-hosted CSV file, parses numeric fields, and renders a titled plot with grid lines and rotated axis labels. Happiness scores appear on the y-axis, while life expectancy spans the x-axis, revealing a positive correlation between the two metrics.