Skip to main content
SimilarExport ZIP
100%

Fork of Fork of HTML Starter

✓ Published0🌍 Public
Kkruthanreddy812@gmail.com
Last edited Mar 28, 2026
Created on Mar 28, 2026

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`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

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.

Kkruthanreddy812@gmail.com
86% match
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
86% match
Loading thumbnail…

Fork of Area Chart

This area chart visualizes the average quantity of laptops sold at different cost levels, using data loaded from a CSV file. It shows a smoothed line and a semi-transparent filled area beneath it, representing the trend of average sales as cost increases. The chart is built with D3 v7, using `d3.csv` to fetch the data, `d3.rollups` to compute averages, and `d3.area` with `d3.curveMonotoneX` for the filled region, alongside `d3.axisBottom` and `d3.axisLeft` for the axes.

Kkruthanreddy812@gmail.com
85% 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
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
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
80% 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
79% match