FORK OF ICE PART 3

100%

FORK OF ICE PART 3

✓ Published0🌍 Public

Last edited Oct 20, 2025

Created on Oct 20, 2025

This example presents a multi-series Chart.js visualization of global smartphone data from 2020 to 2024, combining quarterly unit sales and revenue trends. An amber bar chart shows total units across all regions, while blue, orange, and green lines track unit sales for APAC, Europe, and Americas respectively; a purple line on a secondary axis plots revenue in millions of USD. The chart uses a canvas element, loads data from a remote CSV file via the Fetch API, and is configured with dual y-axes for units and revenue.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE 7 Line Chart

This example visualizes smartphone sales in millions from 2012 to 2021 as a blue line chart with axes and labels. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft` to map the data and render SVG elements. Data is loaded asynchronously from a GitHub CSV URL using `csv`, with sales converted to numeric values and years parsed as dates. The visualization includes a purple title, blue axis labels in Times New Roman, and a grid formed by tick lines.

Bblikitha

77% match

Loading thumbnail…

Fork ICE PART 1

This example visualizes average smartphone sales by brand using a bar chart, with brands like Apple, Samsung, and Xiaomi sorted descending by their mean units sold. It loads a CSV dataset via PapaParse, aggregates the raw records by brand, and computes each brand’s average sales value. The chart is rendered on a Canvas element using Chart.js, with horizontal labels and a zero-based y-axis for the sales metric.

Ssarasaketh3@gmail.com

76% match

Loading thumbnail…

ICE #7 - Area Chart

This area chart visualizes global smartphone sales from 2007 to 2021 using CSV data containing yearly sales figures. The chart employs D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with `curveBasis` to render an orange-filled region beneath the sales trend line. The SVG output includes labeled axes, a red title, and purple axis labels, with sales formatted in billions. Data is loaded asynchronously via `d3.csv` and rendered using a margin-based layout.

KKevin Raj

73% match

Loading thumbnail…

Fork of ice

This example shows a horizontal bar chart of iPhone sales by year, with the top 20 records displayed as green bars scaled against the sales value on the x-axis and year labels on the y-axis. The visualization uses React with the `useState` and `useEffect` hooks to load data asynchronously from an external CSV file via `d3.csv`, then renders SVG elements generated with `d3.scaleBand` and `d3.scaleLinear`. Gridlines and tick labels are manually mapped from the scales, while bar heights derive from the band scale’s bandwidth, and the chart is drawn inside a 960×500 SVG canvas with a 200-pixel left margin.

Ppavankalyan1507

73% match

Loading thumbnail…

ICE 6 PART 3

This example displays two related time-series charts. The first chart plots three metrics from a local CSV file over time as multi-series line graphs. The second chart combines a bar chart of total units with a line showing revenue. The code uses Chart.js, the Chart.js date-fns adapter, and PapaParse to parse the data. It robustly detects date and numeric columns, falling back to category labels if time parsing fails.

Ssarasaketh3@gmail.com

73% match

Loading thumbnail…

Fork of ice

A horizontal bar chart displays the top 20 records of iPhone sales by year, with each bar’s length proportional to sales figures loaded from a CSV file. The chart uses React with hooks for state management and D3 v5’s `scaleBand` and `scaleLinear` to map years to vertical positions and sales values to bar widths. SVG rectangles render the bars, while x-axis ticks and y-axis labels are generated manually using D3’s `ticks()` and scale domains. Data comes from a remote GitHub Gist URL, fetched asynchronously via `d3.csv`.

Ppavankalyan1507

72% match

Loading thumbnail…

Fork of ICE-7 Area Chart

This visualization shows phone sales over time as a smooth area chart, with a gold line tracing the trend and a black filled region beneath it. The data is loaded from a CSV file via d3.csv, with years parsed as dates and phone counts converted to numbers. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for ticks, and d3.line, d3.area, and d3.curveBasis to generate the smoothed path. The SVG is rendered with React, and styled with custom CSS for axis labels and grid lines.

NNeeharikaGali

72% match

Loading thumbnail…

Fork of Fork of ICE-7 Area Chart

This area chart visualizes the monthly cost of mobile phones over time, using a smooth spline curve and a filled gray region beneath the line to emphasize the trend. The chart is rendered as an SVG within a React application, with data loaded from a remote CSV file. The code leverages D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, `area`, and `curveBasis` to construct the visualization, with axis labels and tick formatting customized via `d3.format`.

MMgk1255

71% match