Skip to main content
SimilarExport ZIP
100%

Scatterplot

✓ Published0🌍 Public
MMatan
Last edited Nov 8, 2020
Created on Nov 8, 2020
Forked from Scatterplot

This visualization displays world population trends over time, using a smooth area chart rendered with SVG and D3.js. The y-axis shows population in abbreviated billions, while the x-axis maps years using a time scale. The code builds the chart with `d3.area`, `scaleTime`, `scaleLinear`, and axis components, using a curveBasis for the path. Data comes from a CSV file loaded via `d3.csv`. The chart includes labeled axes and a title, with gridlines created via tick sizes.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot

This scatterplot visualizes world population over time as an area chart. The x-axis maps time using `d3.scaleTime`, while the y-axis uses `d3.scaleLinear` for population values, with gridlines and red axis labels. The code loads a CSV dataset via `d3.csv`, converts the population to numbers and year to dates, then renders the area path using `d3.area` and `curveBasis`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, with tick styling and a title, all output as SVG.

DDifan Gu
91% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes world population over time, with a maroon filled area chart showing the trend. The visualization uses an SVG canvas with margins and a time-scaled x-axis alongside a linear y-axis in billions. The code leverages d3.v6 functions including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft`. Data is loaded from a CSV file on VizHub and rendered using D3’s data-join and path generators.

WWayne716
91% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes world population trends over time using D3 v6, drawing an SVG area chart where the x-axis maps years via a time scale and the y-axis represents population counts with a linear scale. The code loads CSV data from a VizHub dataset, applies a curve basis to the area generator, and customizes axes with tick formatting that abbreviates large numbers (e.g., converting G to B). Gridlines, axis labels, and a title are styled through CSS classes, while the chart employs margins and a translated group for layout.

WWayne716
91% 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
90% match
Loading thumbnail…

scatter plot

A scatter plot displays population figures for ten countries, with each circle positioned along a linear population axis and a point scale for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, rendering SVG circles with a steelblue fill. Data comes from a CSV file, with populations multiplied by 1000 and formatted using `format('.3s')` to show billions. Gridlines extend across the plot, and axis labels are added via appended SVG text elements.

Llinkshady
85% match
Loading thumbnail…

Scatter plot

This scatter plot shows population counts for several countries, with each country positioned along the y-axis and its population scaled along the x-axis. The visualization uses D3 v5 within a React framework, rendering to SVG. It employs `d3.csv` to load data, `d3.scaleLinear` for the x-axis, `d3.scalePoint` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` for labeled gridlines. A custom tick formatter abbreviates large numbers, and circles are appended with a fixed radius of 10.

VVPTomi
85% match
Loading thumbnail…

World Population Area Chart

This visualization shows world population trends over time as a smooth area chart, with a title, labeled axes, and grid lines. The React app uses D3 v5 to load a CSV dataset, parse dates and population numbers, and render SVG shapes. It creates linear and time scales, applies a basis curve to the area path, and adds formatted axis ticks, all styled with CSS. The chart is generated within an SVG canvas with explicit margins.

Ddacoylo
85% match
Loading thumbnail…

World Population Area Chart with D3.js!

This area chart visualizes world population trends over time using a smooth, filled path. The chart leverages D3.js v5 within a React scaffold, encoding time on the x-axis and population on the y-axis via `scaleTime` and `scaleLinear`. Data is loaded from a CSV using `d3.csv`, and the area is generated with `d3.area` and `curveBasis`. The SVG rendering includes axes from `axisBottom` and `axisLeft`, with data sourced from United Nations World Population Prospects 2017.

Fforcox43
85% match