Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

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

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

Fork of Fork of HTML Starter

A line chart visualizes cost data from 2000 to 2013, plotting expenses against time with a green line. The visualization uses D3 v5 to load CSV data, create time and linear scales, and render axes with custom tick styling. The chart highlights the upward trend in sales, with red axis labels and a bold title, set against a light blue background. The code employs d3.select, d3.csv, d3.scaleTime, d3.scaleLinear, and d3.line to construct the SVG-based chart.

NNandini Maddula
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
80% 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
78% 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
78% match