Basic Scatter Plot

100%

Basic Scatter Plot

✓ Published0🌍 Public

Last edited Dec 17, 2017

Created on Dec 17, 2017

This basic scatter plot maps the longitude and latitude of cities from a CSV sample dataset, showing their geographic positions. Each circle represents a city, plotted with D3's `d3.scaleLinear()` for the x and y axes. The visualization uses the D3 v4 library alongside `d3.legendColor` to generate a color legend, though the color encoding is disabled in this version. Axes are rendered via `d3.axisBottom` and `d3.axisLeft`, with grid lines and labels for clarity. The data is loaded using `d3.csv`, parsing the lat and lng values for each point.

AI-generated description

Part of the video course: D3.js in Motion.

An example scatter plot with color legend using D3 and d3-legend.

This shows the "Iris" dataset. Originally published at UCI Machine Learning Repository: Iris Data Set, this small dataset from 1936 is often used for testing out machine learning algorithms and visualizations. Each row of the table represents an iris flower, including its species and dimensions of its botanical parts, sepal and petal, in centimeters.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/ecb09f2605c7fbbadf0eeb75da5f0a6b'>Stylized Scatter Plot with Color Legend</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/7a65777a1e310b76aca5d499e967c467'>Stylized Scatter Plot with Color Legend</a>

forked from <a href='http://bl.ocks.org/SSabu/'>SSabu</a>'s block: <a href='http://bl.ocks.org/SSabu/d8088db277c38474f478f3b80ba94ed2'>Global Cities Scatterplot</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Scatter plot

This scatter plot displays city areas in square meters along the x-axis with city names on the y-axis, using a linear scale for area and a point scale for cities. The visualization renders purple circles with hover effects, and includes axis tick lines and labels for readability. The code uses D3 v5 modules including `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `csv` to load and parse the data from a CSV file, with the chart drawn as an SVG.

Vvladvaculin

80% match

Loading thumbnail…

Scatterplot

This scatterplot displays the populations of six cities, with circles positioned along a point scale for city names and a linear scale for population values. The visualization uses D3 v7’s `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to render an SVG chart with gridlines and labeled axes. Population data is loaded from a CSV file via `d3.csv`, and tick labels are formatted using `d3.format` to abbreviate large numbers. The circles are styled with a steelblue fill, and the chart includes a descriptive title.

Ssheafallick

78% match

Loading thumbnail…

CITY ATTRIBUTES

This visualization uses a city attributes dataset to display the geographic distribution of cities in a scatter plot, plotting longitude against latitude as steelblue circles. It then presents a bar chart that aggregates the data by country, showing the count of cities per nation using D3.js’s `d3.rollup` for grouping and `scaleBand`/`scaleLinear` for axes. The SVG rendering relies on D3 v7, with both charts generated from a CSV file fetched via `d3.csv`. Axes are added using `d3.axisBottom` and `d3.axisLeft`, while the bar heights reflect the computed country counts.

CChaturyaAkhilaPallem@my.unt.edu

77% match

Loading thumbnail…

Fork of D3 Scatter Plot: geonames_cities100000.csv

This visualization displays a scatter plot of global cities with a population exceeding 100,000, projecting geographic coordinates onto a world map. Point color is interpolated from blue to red based on population with d3.interpolate, encoding magnitude. The plot uses SVG circles with a fixed radius and 0.8 opacity, rendered via D3 v6 imported APIs. The axes employ linear scales for longitude and latitude across fixed ranges, with data loaded asynchronously from a CSV using the d3.csv function.

DDaniel Ribaudo

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

75% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between two numeric variables from a CSV dataset, plotting each point with x and y coordinates. It uses D3 version 6 with an SVG rendering approach, employing `d3.scaleLinear` to map the data domains to pixel ranges and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded asynchronously via `d3.csv`, and circles are appended and joined to the data using `.join('circle')`. The plot is styled with a teal fill and includes axis labels for "Numbers" and "Amount."

Bbugfree55

75% match

Loading thumbnail…

files

This example displays a dense scatter of geographic coordinates, plotting the sets of longitude and latitude points from a CSV file as small dots. An SVG canvas renders the points, with the visualization’s intended purpose being to reveal the underlying shape or pattern of the data—likely a coast or border—as the points are ordered sequentially. The code uses d3.select to append the SVG and relies on the D3 v4 library for basic rendering, though it does not yet map the data to visual elements. The default text label remains, awaiting replacement by the user’s implementation.

HHakkahi

75% match

Loading thumbnail…

scatterPlot

A scatter plot displays letters from a CSV file against their corresponding numeric values as circles. The chart uses D3 v5 with an SVG rendering, loading data via `d3.csv` and scaling positions with `scaleLinear` for the x-axis and `scalePoint` for the y-axis. Axes are generated using `axisBottom` and `axisLeft`, with tick lines spanning the plot area.

VVvgupta

75% match