Untitled

100%

✓ Published0🌍 Public

Last edited Mar 2, 2021

Created on Mar 2, 2021

An interactive scatterplot maps World Health Organization data, plotting urban population growth against the percentage of the population living in urban areas. Each circle represents a country, with its fill color encoding the total fertility rate using a threshold scale and a blue color scheme; missing values appear pink. The visualization uses D3.js 5.15.0, including `d3.scaleThreshold`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, to render axes, legends, and circles as SVG with mouseover events.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Untitled

This interactive visualization displays regional population data over time, where each region appears as a color-coded circle whose radius corresponds to a selected year’s population value. A slider controls the year from 1946 onward, triggering a smooth transition that resizes the circles to reflect changing data. The SVG renderer uses D3.js v3 scales and axes, with circle positions fixed by an ordinal x-axis and a linear y-scale for sizing. Hovering reveals tooltips with region and population details, while the data is loaded from an external CSV file.

Ssgalhamdani

81% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes world population growth from 1960 to 2015, using a filled area chart beneath a red dot for each year. The visualization employs d3.scaleTime and d3.scaleLinear for axes, d3.area with curveBasis for the smooth region, and d3.axisBottom/axisLeft with tick formatting. Data loads from a CSV file via d3.csv. The SVG rendering includes labeled axes and a title, with population values formatted in billions.

Ggregosaure

81% match

Loading thumbnail…

Untitled

This example displays a scatter plot of vaccination data across countries, with each circle representing a country’s number of vaccinated individuals against its population. The visualization uses d3.v4 to append SVG circles to a div, mapping data fields to x and y coordinates. The code sets up margins, dimensions, and scales, though the actual scale functions are not fully defined in the provided snippet. The dataset contains country names, vaccination counts, and population figures, rendered as green dots.

PPeiyuan Xu

81% match

Loading thumbnail…

Interactividad

This interactive scatter plot displays global health and economic data, plotting life expectancy against GDP per capita, with circle radius encoding population and color distinguishing continents. Built with React and D3.js v7, the visualization uses `d3.scaleLog` for the x-axis, `d3.scaleLinear` for y and radius, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. The code implements enter/update/exit logic for SVG circles, enabling dynamic highlighting. Hovering over a circle triggers a custom tooltip showing country, population, GDP, and life expectancy, with other circles dimmed via `d3.selectAll` and opacity styles. Data comes from a remote rosling.json file.

Mmaxthamt

80% match

Loading thumbnail…

Untitled

This area chart visualizes global population growth over time, with a maroon filled region beneath a smooth curve and labeled axes. The visualization maps years to the x-axis and population to the y-axis, using data from a CSV file. Built with D3 v5, it employs `scaleTime` and `scaleLinear` for scales, `area` with `curveBasis` to generate the path, and `axisBottom` and `axisLeft` for axes. Population values are formatted with `format('.1s')` to display billions.

Lliechtia

80% match

Loading thumbnail…

World Population

This scatterplot visualizes world population data, plotting each country’s growth rate against the log10 of its population density. Circles are sized by population and colored by continent, with a dropdown filter and a range slider to narrow results. Hovering reveals the country name and dashed guide lines. The implementation uses D3 scales and axes, `d3.sliderBottom` for brushing, and SVG elements for rendering, with data sourced from a custom dataset.

11807589994@qq.com

79% match

Loading thumbnail…

Untitled

A world map displays cities with populations exceeding 50,000 as semi-transparent teal circles scaled by population size. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to render landmasses, country interiors, and graticules from World Atlas TopoJSON data. City coordinates and populations are loaded via d3.csv, with circles positioned using the projection and sized through a linear scale. The SVG is built in React, with static styling applying a light fill to land and subtle borders.

VVineel Gannu

79% match

Loading thumbnail…

Untitled

A dot plot displays population counts for the world's most populous countries, with each circle's vertical position encoding the population value and horizontal position distributed by country name. The chart uses D3 v5's scaleLinear, scalePoint, axisLeft, axisBottom, and csv loading to parse the data file. SVG circles are rendered on a 960×500 canvas, with gridlines, rotated country labels, and a title, while populations are formatted using abbreviations like "B" for billions.

AAbishek-Dulal

79% match