Fork of ice7

100%

✓ Published2🌍 Public

Last edited Mar 29, 2026

Created on Mar 29, 2026

Forked from Fork of Fork of Reusable D3 pie Plot

This fork of ice7 displays an area chart of revenue by product category, with a black line overlay and circular point markers. The visualization aggregates revenue data from a CSV file using `d3.rollup` and `d3.sum`, then maps categories with `d3.scalePoint` and revenue with `d3.scaleLinear`. The SVG rendering uses `d3.area`, `d3.line`, `d3.axisBottom`, and `d3.axisLeft`, with rotated x-axis labels for readability.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ice7_2

This example shows a line chart of revenue aggregated by product category from a CSV dataset. D3.js (v7) loads the data, rolls up categories, and sums their revenue. It renders an SVG with axes, a steelblue polyline, and orange data points. The code uses `d3.scalePoint`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to draw the visualization.

Kkanaparthieshitha@gmail.com

92% match

Loading thumbnail…

Fork of Fork of Fork of ice7_3

This pie chart displays revenue distribution by category, with slices labeled directly and a legend to the right. Built with D3 v7, it loads CSV data from a GitHub gist, aggregates revenue using d3.rollup and d3.sum, and renders SVG paths via d3.pie and d3.arc. A d3.scaleOrdinal with the Tableau10 color scheme maps categories to colors, while text elements label each slice.

Kkanaparthieshitha@gmail.com

86% match

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This visualization combines a line chart and an area chart to display sales trends over time, with the area fill highlighting the magnitude of change. The chart uses a time-scaled x-axis and a linear y-axis with gridlines, and the line is smoothed using a basis curve. Built with D3 v5, the code creates SVG paths via the `line` and `area` generators, and loads its data from a CSV file containing population figures.

Bbindhureddy98

86% match

Loading thumbnail…

Fork of ICE-7 Area Chart

This fork of ICE-7 Area Chart visualizes the cost of sales from 2000 to 2013 using an area chart with a smooth curve. The SVG rendering uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `line`, `curveBasis`, `axisLeft`, and `axisBottom`. A black line traces the data while a yellow filled area beneath it emphasizes the trend. The chart loads CSV data from a GitHub gist, formats years as dates, and labels axes with the provided titles.

Ssumit

86% match

Loading thumbnail…

1 ice7

This area chart visualizes revenue by category from a provided CSV dataset. It aggregates revenue values using `d3.rollup` and renders the result with an area path, an overlaid line, and black circular points. The chart uses a point scale for the x-axis and a linear scale for the y-axis, with axes drawn via `d3.axisBottom` and `d3.axisLeft`. The visualization is built using D3 v7, with SVG rendering and title and axis labels.

SSai Vamshi B

85% match

Loading thumbnail…

Fork of Fork of ICE-7: Area chart

This fork of an ICE-7 example uses d3.v5 to render an area chart of the NASDAQ Composite index, displaying price over time as a filled teal path against a grid of gray tick marks. It reads CSV data, parses dates and prices, and constructs the chart with d3.scaleTime, d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.area with curveBasis. The SVG output includes axis labels and a centered title, with styling handled in CSS.

Bbhargavarathod

85% match

Loading thumbnail…

Fork of ICE-7 Line Chart

This fork of ICE-7 displays a line chart of sales costs from 2000 to 2013, with cost on the y-axis and year on the x-axis. It uses d3.csv to load data from a GitHub gist, then renders an SVG with d3.scaleTime and d3.scaleLinear for axes, and d3.line to draw the path. The chart includes labeled axes, a title, and grid lines, with styling handled by external CSS.

NNeeharikaGali

84% match

Loading thumbnail…

Fork of ICE-7 Line Chart

This fork of the ICE-7 line chart visualizes the cost of sales from 2000 to 2013, plotting yearly values as a single red line. It uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.line to generate the path, with d3.axisBottom and d3.axisLeft rendering labeled axes. The chart loads CSV data from a GitHub gist, parses the year and cost fields, and renders an SVG within a centered container. Axes include gridlines via tickSize, and the code uses D3 v5.

Nnsatyaprakash22

84% match