Skip to main content
SimilarExport ZIP
100%

A10_ScatterPlot White Hat

✓ Published0🌍 Public
DDuc Pham
Last edited Apr 15, 2024
Created on Apr 15, 2024
Forked from A6_ScatterPlot

This scatter plot shows the relationship between GDP per capita and happiness score, with each point colored by continent and a legend identifying the seven continent categories. It uses D3 v7 with d3.csv to load data, d3.scaleLinear for x and y axes, d3.scaleOrdinal for colors, d3.axisBottom and d3.axisLeft for axes, and d3.legendColor from the d3-legend library for the categorical legend. The visualization includes a title, axis labels, and a statement that it is a "white hat" visualization.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

A6_ScatterPlot

This scatter plot visualizes the relationship between happiness scores and GDP per capita across multiple continents, with each circle colored according to its continent category. It shows how countries with higher GDP per capita tend to report higher happiness scores, while also revealing regional clusters and outliers. The visualization is built with D3 v7 and rendered as SVG, using a linear scale for both axes and an ordinal color scale for continental groupings. A d3-legend legend provides a color key for the continent categories, and the data is loaded from an external CSV file containing happiness and GDP metrics.

DDuc Pham
91% match
Loading thumbnail…

A10_ScatterPlot Black Hat

This scatter plot highlights deceptive visualization techniques by intentionally omitting a title, axis labels, and legend. It maps happiness scores against GDP per capita from a CSV dataset, coloring points by continent using a d3.scaleOrdinal with seven categorical colors. The chart renders circles positioned via d3.scaleLinear scales for x and y axes, with d3.axisLeft for the vertical ticks. A d3-legend ordinal legend is appended but left unlabeled, reinforcing the “Black Hat” approach to mislead viewers.

DDuc Pham
87% match
Loading thumbnail…

project plot2

This interactive scatter plot shows the relationship between GDP per capita and happiness scores for countries worldwide, with a dropdown menu allowing selection of individual years from 2015 to 2022. Each circle represents a country, positioned by its economic output and well-being score, while color encodes healthy life expectancy using a sequential plasma scale via d3.scaleSequential. Tooltips provide detailed country-specific values on hover. Built with D3 v7, the visualization uses d3.csv to load external data, SVG circles with enter/update transitions for animated year changes, and d3.axisBottom/d3.axisLeft for the coordinate axes.

Kkallappareddygari Lohith reddy
84% match
Loading thumbnail…

project1-plot

This scatterplot visualizes the relationship between GDP per capita and happiness scores across 162 countries from 2015 to 2022, using data from a merged World Happiness Report CSV. Each circle represents a country-year observation, colored by year via `d3.scaleOrdinal` with `d3.schemeCategory10`, with a legend and interactive tooltips. The visualization uses D3 v7 with `d3.csv`, `d3.axisBottom`, and `d3.axisLeft` for axes, and SVG circles for marks. It is rendered as an animated, interactive SVG chart with hover-based tooltips displaying country, year, score, and GDP details.

Kkallappareddygari Lohith reddy
84% match
Loading thumbnail…

World Happiness Scatter Plot

This scatter plot visualizes the relationship between GDP per capita and happiness scores using the World Happiness dataset. Each circle represents a country, positioned along the axes with a light gray background and semi-transparent points to reveal overlapping data. The visualization is built with D3.js, employing `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and custom `xAxisLabel` and `yAxisLabel` functions for clear labeling. Data points are rendered as circles with fixed radius and opacity, and the plot is designed to adapt to its container’s dimensions.

Ssamozarif@gmail.com
82% match
Loading thumbnail…

World Happiness Graph

A linked choropleth map and scatter plot visualize global happiness data, highlighting country scores, GDP per capita, and continent groupings. Interactive tooltips reveal detailed country information on hover. The map uses `d3.geoPath` with a `d3.geoEqualEarth` projection and `d3.scaleLinear` for color encoding. The scatter plot, built with `d3.axisBottom` and `d3.axisRight`, shows a log-scaled GDP axis against happiness scores, colored by continent using `d3.scaleOrdinal`. Data is rendered as SVG from loaded map and country datasets.

Kkaijavanzante@gmail.com
81% match
Loading thumbnail…

q91011

This bubble chart visualizes the correlation between GDP per capita and happiness scores for 20 countries, with bubble radius scaled to population size. Built with D3.js v7 and rendered as SVG, it plots points using linear scales for both axes. The chart includes an interactive tooltip that appears on hover, showing detailed data for each country, and features a legend indicating population size ranges. The data is loaded from a CSV file and processed using D3's `d3.csv` method.

Ppavanpkkalyan3@gmail.com
81% match
Loading thumbnail…

WHR2024

This scatter plot displays the relationship between GDP per capita and happiness scores for countries in the 2024 World Happiness Report. Each black circle represents a country, positioned by its logged GDP contribution and overall ladder score. Built with React and D3 v7, the visualization uses `scaleLinear` to map data coordinates and idempotent `select` operations to render circles and axes. The SVG rendering handles axis labels and margins through helper modules.

XXiaojun
80% match