Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Mar 8, 2026

Created on Mar 8, 2026

A pink scatter plot compares laptop Cost and Quantity_Sold using data from laptop_sales_160.csv. The visualization maps price on the x-axis and units sold on the y-axis, with each circle representing a product. The code loads data with d3.csv, converts fields to numbers, and uses d3.scaleLinear with d3.axisBottom and d3.axisLeft for axes. Circles are appended as SVG elements with explicit x, y, and radius attributes, and axis labels are added as text elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example compares laptop cost and quantity sold across 160 records from a CSV file. A yellow line chart traces quantity sold over the record index, while thin orange bars represent cost values on the same axes. The visualization uses D3 v7 with SVG rendering, employing `d3.csv`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft`. Axes, labels, and a legend for both series are included.

Kkruthanreddy812@gmail.com

89% match

Loading thumbnail…

Fork of Fork of HTML Starter

This visualization displays the average quantity of laptops sold at each price point, using a monotone smoothing spline to connect aggregated data points. The chart is built with D3.js v7, loading CSV data from a GitHub Gist and using `d3.rollups` to group records by cost and calculate the mean quantity sold. The line is rendered as an SVG path with `d3.line` and `d3.curveMonotoneX`, with red circles marking each aggregated value and axes provided by `d3.axisBottom` and `d3.axisLeft`.

Kkruthanreddy812@gmail.com

86% match

Loading thumbnail…

Fork of HTML Starter

This bar chart displays laptop sales quantities by company, sourced from the laptop_sales_160.csv file. It uses D3.js v7 to bind the data, create a band scale for the x-axis, and a linear scale for the y-axis. The SVG rendering shows yellow bars for each company, with axes and labels generated using d3.axisBottom and d3.axisLeft.

Kkruthanreddy812@gmail.com

85% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between laptop cost and quantity sold, using data loaded from a CSV file via `d3.csv`. Points are rendered as SVG circles with axes created through `scaleLinear`, `axisBottom`, and `axisLeft`. The chart uses a reusable function pattern, where the `scatterPlot()` module configures dimensions, margins, and accessors before being called on an SVG selection. The visualization fills the browser window and applies a custom font from Google Fonts for all text elements.

Kkruthanreddy812@gmail.com

84% match

Loading thumbnail…

Fork of HTML Starter

This example shows a bar chart of laptop sales by company, using a CSV dataset of 160 records. The visualization encodes each company’s total Quantity_Sold as the height of a steelblue rectangle, with an ordinal x-axis and linear y-axis. It is built with d3.csv, scaleBand, scaleLinear, and axisBottom/axisLeft, rendering to SVG. The chart loads data asynchronously and maps the CSV’s numeric column before drawing the bars.

Kkruthanreddy812@gmail.com

83% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes laptop sales data, plotting cost on the x-axis against quantity sold on the y-axis. Each circle represents a data point colored by area using `d3.scaleOrdinal` with `schemeCategory10`. Built with React hooks, the code uses `useRef` and `useEffect` to manage the SVG lifecycle, clearing previous renders before appending new ones via `d3.select`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while scales use `d3.scaleLinear` and `d3.extent`. The data is loaded asynchronously from a CSV file hosted on GitHub.

Kkruthanreddy812@gmail.com

82% match

Loading thumbnail…

Fork of Fork of D3 Starter

This visualization displays laptop sales as a pie chart, with each slice representing the total quantity sold per company. It uses D3.js version 3, specifically leveraging the `pie` and `arc` generators to compute slice geometry, and `scaleOrdinal` with `schemeCategory10` to assign colors. The data is loaded from a remote CSV file via D3's `csv` function, then aggregated by company before rendering. The chart is drawn as an SVG element, centered within a 600x450 pixel canvas, with a 150-pixel radius for the pie.

Kkruthanreddy812@gmail.com

82% match

Loading thumbnail…

Fork of Fork of D3 Starter

This example visualizes laptop sales distribution by company using a pie chart, with each slice labeled by its percentage of the total. Data is loaded from a CSV file via a GitHub Gist, and quantities are aggregated by company. The chart is rendered as an SVG using D3 v7, employing `d3.pie` and `d3.arc` to generate the pie geometry, `d3.scaleOrdinal` for categorical colors, and `d3.schemeCategory10` for the palette. A legend is built manually with SVG rectangles and text elements.

Kkruthanreddy812@gmail.com

81% match