Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Mar 5, 2026

Created on Mar 5, 2026

This scatter plot visualizes the relationship between age and income, plotting individual data points as steelblue circles within a fixed 700x400 SVG canvas. The visualization loads CSV data from a GitHub repository, converts the age and income values to numbers, and maps them to screen coordinates using d3.scaleLinear scales. Axes are generated with d3.axisBottom and d3.axisLeft to show the age range from 20 to 60 and income range from $30,000 to $90,000. The chart provides a straightforward view of how income varies across different ages in the dataset.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 scatterplot

This fork of the D3 scatterplot visualizes the relationship between age and income for individual data points. The chart displays circular marks positioned along linear scales for both axes, with gridlines and labeled axis titles. The code uses D3’s `scaleLinear`, `max`, `axisBottom`, and `axisLeft` APIs to construct the scales and axes, while `select` and `append` manage the SVG elements. Data is bound through `selectAll('circle').data(...)`, with each circle’s position set via the `cx` and `cy` attributes. No external data source is shown, as the render function expects an array of objects containing `Age` and `Income` fields.

89% match

Loading thumbnail…

Fork of D3 Starter

This area chart visualizes the relationship between Age and Marks, using a light blue fill with a blue stroke to represent the trend. The SVG graphic is rendered using D3 v7, with data loaded from an external CSV file hosted on GitHub. The code sorts the data by age and constructs the area using the `d3.area` generator. Linear scales (`d3.scaleLinear`) map the age and marks values to pixel coordinates, while `d3.axisBottom` and `d3.axisLeft` add the axes, and text elements label the chart, its axes, and title.

Ccsesomarajuaswini@gmail.com

86% match

Loading thumbnail…

Fork of D3 Starter

A line chart shows the relationship between Age and Marks, with age on the x-axis and marks on the y-axis. The visualization loads CSV data from a GitHub repository, sorts the points by age, and renders a single blue path using d3.line with d3.scaleLinear domains and ranges. Axes are added via d3.axisBottom and d3.axisLeft, while text elements label the axes and title. The chart uses SVG rendering and D3 v7 with the module import via an importmap.

Ccsesomarajuaswini@gmail.com

85% match

Loading thumbnail…

Fork of Fork of D3 Starter

This example shows a reusable scatter plot that maps student Age against Marks, with axes and labels generated from a CSV file. The code defines a `drawScatter` function that uses `d3.scaleLinear` to set domains and ranges, then renders circles with `d3.selectAll` and appends axis groups via `d3.axisBottom` and `d3.axisLeft`. Data is loaded asynchronously from a GitHub-hosted CSV using `d3.csv`, and the SVG output is cleared and redrawn on each call.

Ccsesomarajuaswini@gmail.com

85% match

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot shows the relationship between an individual's sleep duration in hours and their age in years, with each data point represented as a steelblue circle. The visualization is built using D3 v6, where the code fetches a text dataset from a GitHub gist, parses the CSV-formatted data, and scales the values linearly for both axes. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with explicit margins defining the plotting area, and the plot is rendered as an SVG element within the HTML page.

Bbhargavinalamothu@gmail.com

81% match

Loading thumbnail…

A6 Scatterplot

This scatterplot visualizes the relationship between age and income, with each circle colored by gender using a categorical color scale. The chart uses D3.js v7 to load CSV data from a GitHub gist, scales the x-axis starting at age 15 and the y-axis from 5000 income, and renders SVG circles with axes labeled "Age" and "Income." A d3-legend color legend titled "Gender" identifies the categories, while the styling sets black axis lines and text. The rendering approach is SVG, with scales defined via `d3.scaleLinear` and `d3.scaleOrdinal`.

SShazil Taqi

81% match

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a simple scatter plot of age versus salary for four sample data points, using circles positioned by linear scales. It renders to an SVG element with D3 v7 for the data-driven graphics and axes. The code also includes a React component that displays a "Hello D3 & React" message, showing integration between the two. The chart is static, with axes generated via `d3.axisBottom` and `d3.axisLeft`, and margins applied within the 600x400 viewport.

Ppavanireddy03sai@gmail.com

81% match

Loading thumbnail…

qu3.6

This scatter plot displays the relationship between age and income across a dataset, with each point colored by gender using a categorical color scale. The visualization loads CSV data from a GitHub repository and uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, `scaleOrdinal`, and `schemeCategory10` to map values to positions and colors. The SVG rendering fills the browser window, with axes labeled and styled via D3 selections.

Yyashwanthkirla95@gmail.com

80% match