Fork of Scatter Plot

100%

Fork of Scatter Plot

✓ Published0🌍 Public

Qquan281999

Last edited Mar 27, 2023

Created on Mar 27, 2023

This example visualizes geographic coordinates of cities in the Greater Toronto Area as a scatter plot, with each point positioned by latitude and longitude. The city of Bolton is highlighted in red against black points for other locations. Built with D3 v7, it uses `d3.csvParse` to load data from a CSV file and renders the plot via `d3.scaleLinear` for axes and `d3.axisLeft` and `d3.axisBottom` for tick marks. The interactive visualization updates smoothly when new data is loaded asynchronously.

AI-generated description

A scatter plot of the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Basic Scatter Plot

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.

SSSabu

73% match

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

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

73% match

Loading thumbnail…

Fork of Scatter Plot

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.

Ggharakhani1986

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

71% match

Loading thumbnail…

Fork of DataViz-Plot2

This example visualizes the locations of crimes from a CSV dataset as a scatter plot, mapping latitude and longitude coordinates to x and y positions. The code loads the data using `d3.csv`, filters out invalid entries, and renders each point as an SVG circle with tooltips. The visualization includes linear scales, axes with labels, and a title, all created with D3 v7. The source dataset is linked from Google Drive, and the chart is built exclusively with SVG elements.

Hharikrishnasair@gmail.com

69% match

Loading thumbnail…

Fork of Scatter Plot

A scatter plot shows NHL playoff performance across teams and years, plotting each team-season as a colored circle based on goals scored against year, with team membership encoded by color. The visualization includes axes, labels, and an interactive color legend that highlights points from a selected team when hovered. Built with D3 v7, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.csvParse` to load and map the dataset, while custom modules manage axes and legend rendering. Data comes from a CSV of NHL playoff records.

Sstchiang

69% match

Loading thumbnail…

Fork of Graph to london

This example visualizes London Underground stations as an interactive scatterplot, with each station positioned by its longitude and latitude coordinates from a JSON dataset. The visualization includes zoom and pan abilities, longitude and latitude axes, and station labels. The code uses D3 v4 with d3.scaleLinear for coordinate mapping, d3.axisBottom and d3.axisLeft for grid lines, and d3.zoom for user interaction. Stations are rendered as orange SVG circles on a white background, with a toggle button to switch to a map view.

Bbrett@cloudaccelerator.co

69% match