1 ice7

100%

✓ Published0🌍 Public

Last edited Mar 29, 2026

Created on Mar 29, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 AREA CHART

This area chart visualizes revenue trends over time, with the x-axis representing years (based on customer counts) and the y-axis showing revenue in millions. The chart uses a skyblue filled area beneath the line to emphasize the magnitude of revenue values. Built with D3.js v7, the visualization fetches CSV data from a GitHub gist, processes it with `.csv()`, and renders the graphic using SVG. The code configures axes, labels, and margins, and uses `d3.area()` to generate the filled area path.

Ppeddubalaji@gmail.com

86% match

Loading thumbnail…

ice07-areachart

This area chart visualizes total sales by product category from a retailer CSV file, loading data via `d3.csv` with `d3.autoType`. It aggregates sales using `d3.rollups` and `d3.sum`, then maps categories to the x-axis with `d3.scalePoint` and sales to a linear y-axis with `d3.scaleLinear`. The graphic uses `d3.area` to create the filled region and overlays a `d3.line` path for clarity, with axes rendered by `d3.axisBottom` and `d3.axisLeft` as SVG elements.

LLaasyaJ256

85% match

Loading thumbnail…

Fork of ice7

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.

Kkanaparthieshitha@gmail.com

85% match

Loading thumbnail…

ice7

This example shows a scatter plot of revenue versus profit from a CSV dataset of 200 rows. The plot is built with a reusable D3 module called `scatterPlot`, which uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map and render the axes. Circles are appended with `d3.selectAll` and `join`, using a fixed radius and a steelblue fill. The data is loaded asynchronously with `d3.csv` and parsed to remove currency symbols, while the SVG fills the entire browser window.

Sshyamraghav12@gmail.com

83% match

Loading thumbnail…

Ice7Q4

This interactive area chart visualizes Microsoft’s monthly revenue across product categories, with each category rendered as a semi-transparent filled region outlined by a colored line. The chart uses D3 v3’s `d3.svg.area()`, `d3.svg.line()`, and ordinal/linear scales, with axes labeled for month and revenue in dollars. A legend identifies categories, and hovering over an area triggers a tooltip showing the category name. Data is loaded from a remote CSV file via `d3.csv`.

Ssrujana reddy

83% match

Loading thumbnail…

ICE-7: Area Chart

This area chart visualizes Apple’s revenue over a 20-year period, filtered to a subset of data points. The chart uses D3 v5 with `d3.area` and `d3.line` generators, both smoothed with `curveBasis`, to render the filled region and outline. Axes are created via `d3.axisLeft` and `d3.axisBottom`, with time-scaled x-values from `d3.scaleTime` and linear y-values from `d3.scaleLinear`. Data is loaded from a CSV file, parsed with `d3.timeParse`, and rendered as SVG elements within a styled HTML page.

IIndiraSiripurapu

83% match

Loading thumbnail…

ICE7

This example renders a monthly sales area chart using D3 v7, displaying sales trends from January to December. The visualization combines a light steel-blue filled area with a steel-blue line overlay, plus orange circles marking individual data points. The chart uses SVG rendering with D3’s scalePoint for the categorical month axis and scaleLinear for the numeric sales axis. Data is loaded from a CSV file and processed with d3.csv, while area and line generators construct the paths. Axis labels and a title annotate the chart.

BBHUMIKA CHUNDU

83% match

Loading thumbnail…

ICE7 - Area Chart

This area chart visualizes total sales across discount levels using data from a Superstore CSV loaded via d3.csv. The code groups records by discount value with d3.rollup, sums sales, and renders a steel-blue area path using d3.area with linear x and y scales. Axes are generated with d3.axisBottom and d3.axisLeft, with formatted tick labels for currency values, all drawn as SVG within a styled container.

Mmamathareddy1321@gmail.com

82% match