Assignment7 Reusable Scatter Plot

100%

Assignment7 Reusable Scatter Plot

✓ Published0🌍 Public

Last edited Mar 30, 2026

Created on Mar 30, 2026

This reusable scatter plot visualizes the relationship between population and area for the top 100 cities worldwide, with each data point representing a city. The chart uses D3 v7's `d3.csv` to load data from a local CSV file, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` to render the axes. The `scatterPlot` function encapsulates the chart configuration, accepting data and margin settings as parameters, making it easily reusable for different datasets. Points are drawn as SVG circles with steelblue fill and opacity, while axis labels are positioned using SVG text elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes the top 100 global cities by population on the x-axis and area on the y-axis. The chart loads data from a CSV via `d3.csv`, converts fields to numbers, and renders SVG circles using `d3.scaleLinear` for both axes. It calls `d3.axisBottom` and `d3.axisLeft` for ticks, with labeled axes added as SVG text. The reusable `scatterPlot` function encapsulates scaling, axes, and circles, making the visualization configurable through a `config` object specifying value accessors and margins.

445.saiful@gmail.com

87% match

Loading thumbnail…

Reusable Scatter Plot

This reusable scatter plot displays population versus area for geographic data, with points colored by continent. The visualization uses D3.js v7 to load data via `d3.tsv`, applying a custom chart module that defines scales, axes, and tooltips. It renders circles positioned with `scaleLinear` and colored via `scaleOrdinal`, while interactive mouseover events trigger tooltips showing the point's label and values.

AAnurup Reddy

83% match

Loading thumbnail…

Scatter Plot with D3.js

This scatter plot displays the population of the top 10 most populous countries, with countries arranged on the y-axis and population values on the x-axis. Built with D3.js v7, it uses `scaleLinear` and `scalePoint` to map data from a CSV file to SVG coordinates, with circles rendered for each country. The chart includes grid lines via `axisBottom` and `axisLeft`, and formats population numbers using `format('.3s')` to display values in billions.

CCarloWK1202

80% match

Loading thumbnail…

Scatter Plot

A scatter plot displays the populations of the top 10 most populous countries, with circles positioned along a linear x-axis for population counts and a point scale y-axis for country names. The code uses D3 v7 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render an SVG visualization. Population values from the CSV data are multiplied by 1000, and the x-axis tick labels are formatted with `format('.3s')` to display values in billions. Grid lines extend across the chart via tick sizing, and the circle radius is fixed at 18 pixels.

Kkezianathania021@gmail.com

80% match

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top ten most populous countries, with country names on the y-axis and population values on the x-axis. Using D3 v7, the code loads data from a CSV file, creates a linear scale for population and a point scale for countries, and renders circles with steelblue fill. Axis labels and grid lines are generated using `axisBottom` and `axisLeft`, with population formatted in billions. The visualization is rendered as SVG within an HTML page.

KKaleb LaBarrie

80% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot compares the area and population density of world countries, with each point colored by continent and labeled with a tooltip showing population, area, and density. The visualization is built as a reusable D3 function, using `d3.csv` to load `world_population.csv`, `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and `d3.symbol` for point shapes. The chart includes axis caps, a legend, and hover tooltips, rendered as SVG with smooth transitions.

MMd Fahimul Kabir Chowdhury

80% match

Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a population scatter plot, displaying the relationship between years and population size as individual steel-blue circles. The chart renders in full-screen SVG, with axes and labels for both dimensions. Built with D3 v7, the visualization uses `d3.csv` to load the population dataset, `d3.scaleLinear` for positioning, and `d3.axisBottom` and `d3.axisLeft` to draw the scales. The code is structured as a reusable `scatterPlot` function, which the main script configures via method chaining for dimensions, radius, color, and margins, then binds to the DOM with `d3.select('#chart').call(chart)`.

Aamalli7433@gmail.com

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

79% match