ICE-7 Area Chart

100%

ICE-7 Area Chart

✓ Published0🌍 Public

Last edited Mar 27, 2022

Created on Mar 27, 2022

An area chart shows the number of newly admitted coronavirus cases in the United Kingdom during the last week of January, using date on the x-axis and admissions on the y-axis. The visualization combines a black line and an orange filled area beneath it, both rendered with SVG paths generated by D3 v5's `line` and `area` generators with a basis curve. Data is loaded as CSV from a GitHub gist and parsed with `d3.timeParse`. Axes are created using `axisBottom` and `axisLeft`, with labels styled via external CSS.

AI-generated description

combined line and area charts

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 Line Chart Ganesh

This example shows the number of newly admitted coronavirus cases in the United Kingdom during the last week of January, using a line chart. The x-axis represents dates, while the y-axis shows admission counts. The chart is rendered as an SVG using D3 v5, with scales created via `scaleTime` and `scaleLinear`, axes via `axisBottom` and `axisLeft`, and the line drawn with a `line` generator. Data is loaded from a CSV file, and dates are parsed with `timeParse` before plotting.

GGaneshPenumarthi

90% match

Loading thumbnail…

ICE-7 Pie Chart

This gallery example shows a pie chart displaying the number of new coronavirus cases admitted in the United Kingdom during the last week of January 2021, with each slice labeled with its value and a legend indicating the corresponding date. The visualization uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs to compute and render the SVG paths, while fetching data from a remote CSV via the `csv` function. Each slice is filled using a categorical color scale, and text labels are placed using the arc’s `centroid` method. The legend is built manually with appended rectangles and text elements.

GGaneshPenumarthi

83% match

Loading thumbnail…

ICE 7 Area Chart

This area chart shows the relationship between total COVID-19 deaths (x-axis) and total cases (y-axis) using D3.js v5. The visualization uses `d3.area()` with `curveBasis` to draw a filled path beneath the curve, rendered as an SVG. The data is loaded from a CSV file via `d3.csv()` from a GitHub gist. Axes are generated with `d3.axisBottom()` and `d3.axisLeft()`, with tick formatting using `d3.format()`. The chart includes labeled axes and gridlines, with the area filled in a dark purple color.

SSnarasimhap

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

76% match

Loading thumbnail…

ICE 7 Area Chart

This area chart visualizes daily temperatures over the past week, combining a smooth line and an orange filled area beneath it to highlight trends. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for axes, with `area` and `line` generators employing `curveBasis` for smoothing. The SVG renders temperature data parsed from a CSV file, with a black line and shaded region, while custom axis labels and gridlines are styled via CSS.

RReyden Harris

76% match

Loading thumbnail…

ICE 7 Area Chart

This area chart from a D3 v5 visualization shows the number of US cancer cases from 2009 to 2022, with both a filled area and a black line plotted over time. The chart uses `d3.csv` to load the dataset and `scaleLinear` for both axes, while `d3.area` and `d3.line` with `curveBasis` generate the smooth filled region and line path. Axis labels and tick formatting are handled via `axisLeft` and `axisBottom`, with the SVG rendered inside a 930×450 viewport.

Eeravellisaimeghana

76% match

Loading thumbnail…

ICE 7 Area Chart

This area chart visualizes COVID-19 total deaths by country, using D3 v7 to load CSV data and display the first ten countries sorted by the x-axis attribute. The chart employs a band scale for the categorical x-axis and a linear scale for the y-axis, with an area path filled in light blue. Axes are rendered using d3.axisBottom and d3.axisLeft, and the SVG output includes labeled titles for both axes.

MM Hema

76% match

Loading thumbnail…

ICE-7 Scatter Plot

This scatter plot tracks the daily confirmed virus count over time, with each point representing a single day’s reported cases, revealing a sharp rise and fall during the early months of 2020. The visualization uses an SVG canvas, with D3 v5’s `scaleTime` mapping dates to the x-axis and `scaleLinear` mapping counts to the y-axis. Gridlines and axis labels are drawn via `axisLeft` and `axisBottom`, while circles positioned by `xScale` and `yScale` display the data, with a maroon fill at half opacity for visual clarity. The data is loaded from a CSV file, and the chart includes a title and axis labels for context.

HHarshinireddyy19

75% match