Basic Scatter Plot

100%

Basic Scatter Plot

✓ Published0🌍 Public

Last edited Dec 19, 2017

Created on Dec 17, 2017

This example plots geographic coordinates of cities from a CSV file as a scatter plot, with longitude and latitude on the axes. A color legend, generated by the d3-legend library, encodes the country of each city. The code uses D3 v4 with an SVG rendering, and includes a tooltip via the d3-tip library to show city details on mouseover. Data comes from a sample cities dataset.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

Basic Scatter Plot

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.

CCurran Kelleher

90% match

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…

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

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

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

76% match

Loading thumbnail…

Scatter Plot using D3.JS

This example visualizes a 3D scatter plot of city-level economic indices, comparing cost of living, rent, local purchasing power, groceries, and restaurant prices across different cities. Two distinct traces plot each city as a marker, with hover text identifying the city name. The code uses the Plotly JavaScript API, specifically `Plotly.newPlot`, to render the chart, while D3.js (version 3.5.17) is used to load CSV data from a GitHub gist via `d3.csv`. The visualization demonstrates integrating D3 for data fetching with Plotly for 3D rendering.

Kkottenikhil

76% match

Loading thumbnail…

Scatterplot basic

This scatterplot displays clustered data from a CSV file, using color to distinguish clusters. Users can brush a region to zoom in, and double-click to reset the view. The visualization is built with D3 v4, using `d3.scaleLinear` for axes, `d3.brush` for selection, and SVG transitions for smooth animations. It renders data points as circles, with a legend for cluster identification.

MMNoichl

76% match