Area Chart for ICE-7

100%

Area Chart for ICE-7

✓ Published2🌍 Public

Last edited Apr 1, 2025

Created on Mar 30, 2025

This area chart visualizes the relationship between weight (kg) and price (USD) for items in the ICE-7 dataset, with weight on the x-axis and price on the y-axis. The chart uses a steelblue, semi-transparent filled area to show price variation across the sorted weight range. Built with D3.js v7, it loads CSV data from a GitHub gist, applies linear scales via `d3.scaleLinear`, and draws the area using the `d3.area()` generator along with `d3.axisBottom` and `d3.axisLeft` for axes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart for ICE-7

This line chart visualizes the relationship between weight (kg) and price (USD) for items in the ICE-7 dataset, sourced from a CSV file. The code uses D3.js v7 to load and parse the data, then sorts it by weight before plotting a continuous line with `d3.line()`. Linear scales `d3.scaleLinear` map weight to the x-axis and price to the y-axis, with axis labels added via SVG text elements. The chart renders as an SVG element with steel blue strokes, displaying how price changes across the sorted weight range.

NNagasharan Sai Nandyala

90% match

Loading thumbnail…

ICE-7 line chart

This line chart displays the relationship between Weight (kg) and Price (USD) from a Bitcoin dataset, with weight on the x-axis and price on the y-axis. The visualization uses D3.js v7 to load the CSV data, then applies linear scales (`d3.scaleLinear`) and axis generators (`d3.axisBottom`, `d3.axisLeft`). A line generator (`d3.line`) creates the steelblue path connecting sorted data points. The SVG rendering includes labeled axes and a fixed 800x500 pixel canvas with margins.

UUday Kiran

87% match

Loading thumbnail…

Area Chart ICE 7

This area chart visualizes the Consumer Price Index (CPI) over time, using a semi-transparent steel blue fill to emphasize trends. The chart is generated with D3.js, employing `d3.area` to build the shape, `d3.scaleLinear` for the axes, and `d3.axisBottom` and `d3.axisLeft` for ticks. Data is loaded from a CSV via `d3.csv`. The SVG rendering fills the entire viewport, and axis labels use the 'Share Tech' font.

Ddiwashhumagain@my.unt.edu

83% match

Loading thumbnail…

Area Chart ICE 7

This area chart displays the price of a commodity over time using a green filled area beneath a line. The visualization is built with D3.js v4 and rendered as an SVG. The code fetches market-price data from a GitHub gist, parses the date strings with `d3.timeParse`, and constructs the chart using `d3.scaleTime`, `d3.scaleLinear`, and `d3.area`. Axis labels are added via SVG text elements, and the styling is defined in a separate CSS file.

Ppranatiyv

83% match

Loading thumbnail…

ICE-7.4 Area Chart

This area chart visualizes sales cost trends from 2000 to 2013, with a line overlay and a light green filled region beneath it. It uses D3 v5 with d3.scaleTime and d3.scaleLinear for axes, d3.area and d3.line generators with curveBasis smoothing, and renders as an SVG via React. Data loads from a CSV hosted on a GitHub Gist, and axes include formatted tick labels and gridlines.

SShashi42

81% match

Loading thumbnail…

ICE-7 Area Chart

This area chart displays the cost of sales from 2000 to 2013, using a smooth basis curve for both the line and the filled area beneath it. The visualization loads a CSV dataset via `d3.csv`, parses the year and cost fields, and renders an SVG with `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`. The chart includes customized axis labels and gridlines, with the area filled in yellow and the line drawn in black. The code is built with React and D3 v5.

DDineshK2602

81% match

Loading thumbnail…

ICE7 Area Chart

This area chart visualizes export values over a period of years, using a curved basis spline to smooth the line and a cyan fill to emphasize the area under the curve. The visualization loads data from a CSV file hosted on a GitHub gist, parsing years as dates and values as numbers. It renders to an SVG using D3 v6, with time-scaled x-axis and linear-scaled y-axis, both featuring gridlines and labeled axes. The chart's title and axis labels are styled prominently, and the y-axis tick labels are formatted to abbreviate large numbers.

Ssugunagar

80% match

Loading thumbnail…

Fork of ICE-7 Area Chart

This area chart visualizes the cost of sales from 2000 to 2013, highlighting trends over time with a smooth, curved line and a filled area beneath it. The chart uses D3 v5 to load and parse CSV data, then applies scales for time and linear values, with axes labeled accordingly. The visualization renders as an SVG, featuring a yellow filled area and a black line, and includes gridlines and tick formatting for readability. The data source is a CSV file hosted externally, processed with D3's `csv` function.

Ssaiyogesh9911@gmail.com

80% match