Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 30, 2026

Created on Mar 30, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment7 Reusable Scatter Plot

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.

445.saiful@gmail.com

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

84% match

Loading thumbnail…

Fork of Scatter Plot

This fork of a scatter plot displays the top ten most populous countries using a circular point for each nation, with population on the x-axis and country names on the y-axis. The code loads population data from a CSV file using `d3.csv`, scales the values with `scaleLinear` and `scalePoint`, and renders an SVG via D3 v5. It uses `axisLeft` and `axisBottom` to draw gridlines, custom tick formatting to abbreviate large numbers, and assigns each circle a color from a rotating palette.

Eevonne0930.cs11@nycu.edu.tw

84% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This visualization combines a scatter plot with line charts to explore university rankings, plotting countries on a shared x-axis band scale and metrics like research environment, quality, and industry impact on a y-axis from 0 to 100. It renders red circles for student-to-staff ratios alongside steelblue line paths per university, using the D3 v6 APIs `scaleBand`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft`. The data comes from a CSV of University Ranks, fetched via `d3.csv` and parsed with custom numeric conversions. The reusable `scatterPlot` module demonstrates a configurable chart factory pattern with setters for width, height, and value accessors.

Vvinodreddysagam929@gmail.com

82% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example visualizes the relationship between student population and student-to-staff ratio in a scatter plot, with each circle representing a university. It loads CSV data from a GitHub URL, parses it, and maps the selected columns to x and y positions using D3’s `scaleLinear`. The chart uses `axisBottom` and `axisLeft` for axes, while circle colors come from `scaleOrdinal` (though the color mapping is static to species names not present in this dataset). The reusable `scatterPlot` function encapsulates the chart’s configuration, and SVG rendering is used throughout.

Ssagamreddy929@gmail.com

82% match

Loading thumbnail…

Fork of Reusable Scatter Plot

This scatter plot visualizes population against area for countries, with each point colored by continent. The reusable chart module follows Mike Bostock’s `chart()` pattern, using `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding, and `d3.axisBottom`/`d3.axisLeft` with gridlines. Data loads via `d3.tsv` from a GitHub gist, and interactive tooltips appear on `mouseover` using D3 v7 selections.

Sshabanasyed2266@gmail.com

82% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a reusable scatter plot that maps daily visitors on the x-axis against sales on the y-axis, with each point sized by a fixed radius. The visualization loads CSV data from a GitHub gist, parsing numeric fields for day, sales, profit, orders, and visitors. Built with D3 v6, the code uses scaleLinear for axes, extent to compute domains, and axisLeft/axisBottom for rendering ticks. The scatterPlot function follows a reusable pattern, making it configurable via method chaining for width, height, margins, and data accessors, while SVG circles are joined to the DOM using selectAll and data.

HHariniPotla@my.unt.edu

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

81% match