Fork of Area Chart ICE-7

100%

Fork of Area Chart ICE-7

✓ Published0🌍 Public

Last edited Oct 26, 2025

Created on Oct 26, 2025

This fork of an area chart displays calories for campus snack items. It uses `d3.csv` and `d3.autoType` to load data, with a point-based x-axis (`scalePoint`) and a linear y-axis. The visualization combines a steel-blue area, a yellow line (`d3.line` with `curveMonotoneX`), and orange points. Interactive tooltips appear on mouseover, and SVG is rendered with animation support via D3 v7.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Line Chart ICE 7

This visualization shows a line chart of calorie counts for campus snack items, with each point labeled by snack name and a hover tooltip displaying the exact calorie value. The chart uses D3 v7 with SVG rendering, employing `d3.csv` to load data, `d3.scalePoint` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the orange line connecting red data points. Grid lines and a rotated x-axis label enhance readability, while mouseover events trigger the tooltip transitions.

118121a1545

89% match

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart 11515092

This area chart visualizes student records, plotting Results over Maths scores using a smooth basis curve. The SVG rendering uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, `line`, and `area` generators. Data is loaded from a CSV file via `d3.csv` and parsed with `d3.timeParse` to handle date formatting. The chart features orange-filled areas beneath black lines, with labeled axes and rotated y-axis text, all styled through an external CSS file.

NNaimisha-M

82% 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

81% 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

81% 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

80% match

Loading thumbnail…

Fork of ICE7 Area

This example displays a dual-area chart showing the total number of restaurants in the USA alongside NOx levels across years, with the data sourced from a CSV file. It uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `area`, and `curveBasis` to generate two filled paths rendered as SVG. The chart includes axis labels, a title, and custom tick formatting, with the orange and blue areas representing the respective datasets.

Mmaheganesh

80% match

Loading thumbnail…

Fork of ICE-7 (Part-4) - Area Chart

This area chart visualizes city and temperature data from a CSV file fetched at runtime. It uses D3.js version 7 to parse the weather dataset, scale bands for the x-axis, and linear scaling for temperature values on the y-axis. The `d3.area()` generator draws the filled path, while `d3.axisBottom` and `d3.axisLeft` render rotated city labels and measurement ticks. The SVG output includes custom margin-based layout and ordinal color encoding.

RRohithNaiduDevareddy@my.unt.edu

80% match

Loading thumbnail…

Fork of pie chart ICE-7

This fork of a pie chart visualizes the distribution of campus snacks by category, aggregating counts from a CSV file and displaying each category’s share with percentage labels outside the slices. It renders an SVG using d3.pie, d3.arc, and d3.rollup to aggregate data, while d3.scaleOrdinal with schemeTableau10 assigns colors. A separate HTML legend lists categories with their counts, and the tooltip shows exact values. The chart loads data asynchronously via d3.csv and uses d3.format for percentage display.

118121a1545

80% match