ICE-7 Area chart

100%

ICE-7 Area chart

✓ Published0🌍 Public

Last edited Jul 2, 2022

Created on Jul 2, 2022

This area chart displays the average anime rating from 1960 to 2022, with the x-axis representing time in years and the y-axis showing the average rating. The visualization uses D3 v5 with scaleTime and scaleLinear to map the data, along with axisBottom and axisLeft for the axes. The chart renders as an SVG and combines a line path with a skyblue filled area beneath the curve, using d3.area and d3.line with curveBasis. The data is loaded from a CSV file hosted as a GitHub gist.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in San Francisco. The data comes from Data Canvas - Sense Your City.

Made in this video:

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 Line chart

This line chart visualizes average anime ratings from 1963 to 2022, with the year on the x-axis and the average rating on the y-axis. Using D3 v5, the chart scales time and linear data with `d3.scaleTime` and `d3.scaleLinear`, and renders axes with `d3.axisBottom` and `d3.axisLeft`. A green, three-pixel-wide line is drawn with `d3.line` and `curveBasis`. The data is fetched via `d3.csv` from a GitHub Gist, and the SVG output includes custom labels and a title.

RRaajithaSabbineni

92% match

Loading thumbnail…

ICE-7 Area Chart

This area chart visualizes the number of movie releases per year from 2000 to 2015. The chart uses a yellow filled area beneath a black line, with time-scaled x-axis and linear y-axis, both featuring gridlines. Built with React and D3 v5, the code employs `d3.csv` to load data, `scaleTime` and `scaleLinear` for scales, and `d3.area` with `curveBasis` to generate the smooth area path. Data is fetched from a GitHub gist and rendered as SVG.

AAISWARYAMARAPATLA1999

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…

ICE-7 AREA CHART

This area chart visualizes population trends across years, combining a blue line path with a yellow filled area beneath it, all rendered as SVG elements. The chart uses D3 v5 scales, including `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with axes generated via `axisBottom` and `axisLeft`. Both line and area generators apply `curveBasis` smoothing, while data is loaded from a CSV file and parsed with `d3.timeParse`. Axis ticks are customized with red text and gridlines, and the y-axis label is rotated using an SVG transform.

IIndhuKrishnaraj

80% match

Loading thumbnail…

ICE-7 Area chart

This area chart displays yearly runs scored, with a smooth curve and a sky-blue filled region beneath the line. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the SVG path, while axes are rendered with `axisBottom` and `axisLeft`. Data is loaded from a CSV file via `d3.csv`, with years parsed as dates and runs as numbers. The chart includes formatted tick labels and prominent axis titles, all styled with CSS.

LLG0498

79% match

Loading thumbnail…

Fork of ICE-7 Area Chart

This area chart displays the number of reviews from 1975 to 2025, using a smooth curve to highlight trends over time. Built with React and D3 v5, the visualization renders an SVG with a green filled area beneath a line path, both generated via `d3.area` and `d3.line` with `curveBasis`. Axes are created using `d3.axisBottom` and `d3.axisLeft`, with scales from `d3.scaleTime` and `d3.scaleLinear`. Data is loaded as CSV from a GitHub gist, parsed with `d3.csv`, and formatted for display.

SSANEEM MOHAMMAD

79% match

Loading thumbnail…

ICE-7 Pie chart

This pie chart displays the top 10 highest-rated anime, using a slice per title with its rating label and a color-coded legend listing each anime’s name and numerical value. The chart is rendered as an SVG, with data fetched from a CSV URL and processed using d3.csv, d3.pie, d3.arc, and d3.scaleOrdinal. Each slice’s fill color maps to its rating value via a sequential ordinal scale, while labels and a legend are appended using D3’s selection and enter/append methods. The visualization uses D3 v5 and a custom segment color array for the ten entries.

RRaajithaSabbineni

78% match

Loading thumbnail…

ICE-7 Area Chart

This area chart visualizes Netflix subscriber counts from 2003 to 2021. The code uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.area` with a `curveBasis` interpolation, rendering the chart as SVG. It loads CSV data from a GitHub gist, formats numeric values, and applies axis ticks with custom labels. The chart combines a black line path and an orange area path beneath it, with red axis labels and gridlines.

Nnsatyaprakash22

78% match