Fork of Scatter Plot

100%

Fork of Scatter Plot

✓ Published0🌍 Public

Ggharakhani1986

Last edited Jul 12, 2022

Created on Jul 12, 2022

This example displays a scatter plot of country reserves, with each circle’s horizontal position mapped to the reserve value and vertical position to the country name using a point scale. The visualization uses D3.js (v7) to load CSV data, build linear and point scales, and render axes with tick formatting. Grid lines are created by negative tick sizes, and axis labels are added manually, with circles styled via CSS.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

83% match

Loading thumbnail…

Fork of Scatter Plot

This visualization shows the ten most populous countries as a dot plot, with population on the x-axis and country names on the y-axis, using D3 v6’s `scaleLinear` and `scalePoint` to map data. It is rendered as SVG, loading population data from a CSV file, and employs `axisBottom` and `axisLeft` to draw gridlines and labels, styling text via CSS.

MMajaha21

82% match

Loading thumbnail…

Scatter Plot

A scatter plot displays individual data points positioned by two numeric variables, with each point rendered as a small circle. The visualization uses D3.js v6 and is built with a simple SVG container. The code applies the `d3.scaleLinear` function to map x- and y-values to pixel coordinates, then appends `circle` elements to the chart area. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from an external CSV file using `d3.csv`, and the plot updates dynamically once the data is parsed.

JJames Huang

80% 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

80% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This example demonstrates an animated, reusable D3 scatter plot built with the reusable chart pattern. It visualizes country-level time series data, plotting each country's values for two different years on the x and y axes, with circles positioned using linear and band scales. The chart updates every two seconds by randomizing one country's data, triggering a re-render to illustrate dynamic data binding and transitions. Rendered as SVG with axes and circles, it emphasizes the modularity of D3's data-join and the flexibility of reusable chart components.

Mmukundakrishna.r@gmail.com

80% match

Loading thumbnail…

ScatterPlot

A scatter plot displays population totals for ten countries, with each circle positioned along a linear population axis and a point scale for country names. The chart uses D3 v5, loading data from a CSV file and rendering to SVG. It applies `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, with formatted tick labels that convert billions to abbreviated notation and grid lines via tick sizes.

KKyllVis

79% match

Loading thumbnail…

D3 Scatter Plot - using point

A scatter plot displays population figures for ten countries, using circular points positioned along a categorical y-axis for country names and a linear x-axis for population values, with axes labeled in billions via tick formatting. The visualization is built with D3 v7, loading data from a CSV file and rendering SVG elements. It uses `scaleLinear` and `scalePoint` for scales, `axisBottom` and `axisLeft` for axes, and sets point radius to eight pixels with steelblue fills.

YYoung Song

79% match

Loading thumbnail…

d3 Scatter Plot

This example visualizes the population of the ten most populous countries as a scatter plot. It uses D3 v5 to load a CSV file and scales, with `scaleLinear` mapping population to the x-axis and `scalePoint` mapping country names along the y-axis. Circles represent each country, with tick marks and labels styled via CSS. The SVG-based chart renders axes with `axisBottom` and `axisLeft`, and uses text elements to label the chart and its population axis.

JJohnPaulPagelerJr

79% match