Fork of D3 scatterplot

fork country

This interactive scatterplot explores global health indicators across countries, plotting health expenditure against life expectancy with each point colored by continent. Users select which attribute appears on each axis via dropdown menus, and hovering over the color legend highlights points from that continent while fading others. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color encoding, and renders all marks as SVG circles with opacity transitions. Data is loaded as CSV from a GitHub gist.

Rrushithareddyy

Fork of D3 Scatter Plot

This scatter plot visualizes health expenditure data over time, with each circle representing a year’s expenditure value. The visualization uses D3 v6’s `csv` loader to fetch data from a GitHub Gist, then maps it through `scaleLinear` scales for the x and y axes. Axes are rendered with `axisBottom` and `axisLeft`, while circles are drawn using SVG elements. The code explicitly parses the `year` and `Expenditure` columns as numbers, and the chart fills the entire browser window with margins applied to the plot area.

KKhatera Alizada

D3 Stuff:Scatterplot

This scatterplot displays the percentage of population covered by health services across various countries, with each blue circle positioned along a linear coverage scale on the x-axis and a point scale of country names on the y-axis. The visualization uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `format` to render an SVG, pulling data from a local CSV file. Grid lines extend from the y-axis, and the chart includes a bottom axis with formatted numeric ticks.

Ddanjaruss

Fork of Scatterplot

This fork of a scatterplot displays the population of four countries, with circles sized uniformly and positioned along a point scale for country names and a linear scale for population values. The code uses d3.csv to load data, d3.scaleLinear and d3.scalePoint for scales, and d3.axisBottom and d3.axisLeft for axes with tick formatting. Rendering occurs via SVG, with grid lines and labels styled through CSS. The chart title and axis labels are appended directly within the SVG group.

PPiotr Paszek

Fork of Circles with D3

A D3.js scatter plot displays country-level COVID-19 data, plotting population density against median age for a dataset loaded from mergedata.json. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for gridlines, and d3.selectAll with data binding to render interactive circles. A tooltip, styled with CSS, appears on mouseover to show the country name, population density, and median age, while the circles change color on hover.

SSreenath Vadlamudi

Basic Scatter Plot

This scatter plot visualizes the relationship between income per person and health expectancy across countries, with circle size encoding population and color distinguishing world regions. Data comes from the World Wealth & Income Database and the Global Health Observatory. The visualization uses d3.scaleLog for the income axis, d3.scaleLinear for health, and d3.scaleSqrt for population-based circle radii. SVG rendering includes custom axes with gridlines and a categorical color legend built with d3.legendColor.

CCurran Kelleher

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot displays the relationship between BMI and life expectancy across countries in 2021, with each circle representing a country. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render the scales. Interactive hover effects trigger a tooltip that shows the country name, BMI, and life expectancy values. The chart is rendered as an SVG with animated transitions on circle hover, changing the fill color from steelblue to orange.

Ssravya7136@gmail.com

Fork of Fork of Circles with D3

This scatter plot displays the relationship between population density and median age for various countries. Circles are colored steelblue and turn orange on hover, with a tooltip revealing the country name and both values. Built with D3.js, the visualization loads data from `mergedata.json` and uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and SVG circle elements with mouse event handlers to control tooltip opacity.

MMonish Galla