Skip to main content
SimilarExport ZIP
100%

Fork of Fork of D3 Starter

✓ Published0🌍 Public
Ccsesomarajuaswini@gmail.com
Last edited Mar 28, 2026
Created on Mar 28, 2026
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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
86% match
Loading thumbnail…

Fork of D3 Starter

This interactive scatter plot visualizes student test scores, plotting Math scores on the x-axis and Science scores on the y-axis, with points colored red or green depending on study hours. The reusable `scatterPlot` function dynamically creates linear scales, axes, and labels using `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. Hovering over a point reveals a tooltip with the student’s name, scores, and study hours. Data loads from a remote CSV via `d3.csv` and renders as SVG circles within a fixed 600×450 canvas.

Kkmuddana@gitam.in
86% match
Loading thumbnail…

Fork of HTML Starter

This example presents a reusable D3 v7 scatter plot that visualizes a small CSV dataset of individuals, plotting their age against their ID number. The chart uses the `d3.scaleLinear` API for both axes, with points rendered as circles using the D3 `.join()` pattern for efficient SVG creation. The code defines a chart factory function, following Mike Bostock’s reusable chart design, allowing customization of the x and y columns and point radius. The data is loaded via `d3.csv` with `d3.autoType` for automatic type inference.

RRithvik
85% match
Loading thumbnail…

Fork of D3 Starter

This example shows a pie chart of student marks distribution, with each slice labeled by the student’s name. It loads CSV data from a GitHub repository, parses the marks as numbers, and uses `d3.pie()` to compute slice angles and `d3.arc()` to generate SVG path shapes. The chart applies a categorical color scale (`d3.schemeCategory10`) and positions labels using `arc.centroid()`. The visualization renders in SVG within a 500×400 viewport, using D3 v7 loaded via an import map.

Ccsesomarajuaswini@gmail.com
85% match
Loading thumbnail…

Fork of D3 Starter

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.

Ccsesomarajuaswini@gmail.com
85% 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
84% match
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a connected scatterplot showing how a numeric value changes over time, with a time-scaled X axis and linear Y axis. The visualization renders as an SVG using D3 v7, loading CSV data from a remote GitHub repository. The code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to draw the line and circular points. It also uses `d3.timeParse` to format dates and `d3.csv` for asynchronous data loading.

CCrystal Lee
84% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of sleep duration against age, with each circle representing a person’s data point. The visualization uses D3.js v6 to load a CSV dataset, apply linear scales, and render axes with labels. Circles are drawn with an SVG selection join, while the chart is built as a reusable function with configurable properties for width, height, data, margins, and radius. The plot is sized to fill the browser window and updates its dimensions accordingly.

Bbhargavinalamothu@gmail.com
84% match