Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Oct 4, 2026

Created on Sep 26, 2026

This example uses D3 v7 to create a scatterplot of agricultural data, mapping length of growing period (LGP) and growing-season temperature as positional encodings, with crop category available for color and growing-season precipitation for size. The chart renders as an SVG with axes, margins, and a summary panel displaying row count, field names, and statistical summaries like mean and median. Data loads from a CSV via `d3.csv`, with numeric coercion applied to specified columns using `+d[c]`. The code demonstrates basic D3 selections, scales, extents, and formatting through `d3.extent`, `d3.mean`, `d3.median`, and `d3.format`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

This HTML starter demonstrates the use of D3 v7 to build an SVG scatterplot with axes and summary statistics. It loads a CSV from a GitHub gist and maps quantitative columns like Horsepower, Torque, and MPG to x-position, y-position, and size, while a categorical Layout column drives color. The code uses `d3.csv`, `scaleLinear`, `scaleOrdinal`, `extent`, `mean`, and `median` APIs to process data and render marks.

EEarlAmematekpo16

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

82% match

Loading thumbnail…

Fork of HTML Starter

This D3.js (v7) visualization displays flower measurements as a scatterplot, mapping petal length onto the horizontal axis, petal width onto the vertical axis, and encoding flower height through point area while using color for the categorical flower type. The SVG chart, rendered within a 900×520 canvas, loads data from a remote CSV using `d3.csv`, then sets up linear axes via `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft`. A summary block above the plot reports row count, data fields, value ranges, and the mean and median for petal length, computed with `d3.mean`, `d3.median`, and `d3.extent`.

PPurva Suresh

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

81% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the data-loading process for a garden dataset, displaying summary statistics including file size in kilobytes, row count, and column count within a styled summary box. The visualization uses D3 v7’s `d3.csv` method to parse a CSV file fetched from a GitHub Gist, routed through a proxy URL to bypass CORS restrictions. A static SVG circle provides decorative context, while the script dynamically updates the DOM via `d3.select` and `textEl.html`. Error handling displays failure messages if the fetch or parsing encounters issues, and the console logs the first five rows for verification.

Ssaiabhishekmunnangi@gmail.com

81% match

Loading thumbnail…

Fork of HTML Starter

This scatter plot maps fruit dimensions, plotting width on the x-axis and height on the y-axis, with each point’s shape encoding the fruit type via a categorical legend. The visualization uses D3.js v7, employing `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` to assign shapes, and `symbol()` to generate the marks. Data is loaded from a remote CSV file containing fruit measurements, fetched asynchronously and parsed with `csvParse`. Axes and labels are drawn using `axisLeft` and `axisBottom`, while the legend is constructed manually with positioned shape glyphs.

Ssahithya.voleti@gmail.com

81% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates the end-to-end process of loading a remote CSV dataset and generating a data-driven SVG visualization. The page presents key statistics, a preview table of the first five rows, and a custom SVG plot where each mark represents one CSV row, with shape and color mapped to the category column and position determined by row index and value. The implementation uses D3.js v7 to fetch and parse the data with `d3.csv` and `d3.autoType`, then dynamically builds the table and SVG elements using JavaScript DOM manipulation and the SVG API.

Ssakethpapareddy@gmail.com

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

81% match