Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published1🌍 Public
RRithvik
Last edited Oct 26, 2025
Created on Oct 26, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of HTML Starter

This example displays a static bar chart of country populations, reading from a CSV file with `d3.csv` and rendering rectangles with `d3.selectAll` and `data.join`. It uses D3 v7 within a plain HTML page, with data loaded asynchronously and converted to numbers. The visualization demonstrates basic data binding and SVG shape creation, though the rendered bars are all fixed at 300 by 300 pixels, so the chart does not reflect population values visually.

Vvoid-LSTM
80% match
Loading thumbnail…

Fork of HTML Starter

This scatter plot visualizes the relationship between height and weight for individuals in a demographic dataset, with points colored by gender (blue for male, pink for female). The visualization uses D3 v6 to load CSV data from a GitHub repository, then renders circles on an SVG canvas. D3's `scaleLinear` and `extent` functions map the raw measurements to pixel coordinates, while `axisLeft` and `axisBottom` create labeled axes for weight and height. The chart fills the browser window and includes custom axis label styling.

Ssahithya.voleti@gmail.com
79% match
Loading thumbnail…

Fork of Hello HTML

This example displays a CSV dataset loaded from a GitHub Gist, summarizing the total row count and previewing the first five records in an HTML table. It then renders an SVG bar chart showing the first column as categorical labels on the x-axis and the second column as quantitative values on the y-axis using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. The chart title and axes are added via D3 selections. Styling uses embedded CSS, and data loading relies on `d3.csv`.

Ssowjanyateppali4202@gmail.com
79% match
Loading thumbnail…

Fork of HTML Starter

This interactive bar chart visualizes the distribution of tree species from a CSV dataset, displaying the count of each species alongside tooltips that reveal average height and circumference. Built with D3 v7, the visualization employs `d3.csv` for data loading, `d3.rollups` for aggregation, and `d3.scaleBand` and `d3.scaleLinear` for axes. Bars animate upward on load, use a green sequential color scale, and respond to hover with opacity changes. The SVG rendering includes rotated x-axis labels and a styled title.

Aanirudhrao345@gmail.com
79% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This reusable scatter plot, written with D3 version 6, displays a set of numeric x/y data points as steelblue circles. The example fetches its data from a JSON file hosted in a GitHub gist, then maps the raw values to numbers. It builds an SVG canvas and uses `d3.scaleLinear` with `d3.extent` to compute the axes, which are rendered with `d3.axisBottom` and `d3.axisLeft`. The chart includes labeled X and Y axes, with the plotting logic encapsulated in a function for reuse.

Bbhargavinalamothu@gmail.com
79% match
Loading thumbnail…

Fork of HTML Starter

This example loads a user-supplied raw CSV file and presents a data summary alongside a preview table of the first ten rows. The D3 v7 code uses `d3.csvParse` with `d3.autoType` to parse the data, then computes column-level statistics such as minimum, maximum, mean, and unique value counts. A static SVG picture demonstrates five basic shapes—rectangle, circle, polygon, line, and text—styled via external CSS. The interface includes a text input and button for fetching new data URLs, with results rendered into the summary and table containers.

Ppriyankachary1701@gmail.com
79% match