Fork of area chart

100%

Fork of area chart

✓ Published1🌍 Public

Last edited Nov 5, 2024

Created on Nov 5, 2024

This example renders an area chart of COVID-19 total cases per country using D3 v7. It loads CSV data from a GitHub gist, converts the total cases to numeric values, and maps countries to a band scale along the x-axis. The area is drawn as a single SVG path with a steelblue fill, while axes are generated using `d3.axisBottom` and `d3.axisLeft`, with country labels rotated and shown every fifth tick. The chart includes axis titles for "Country" and "Total Cases."

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of area chart_shruthik

This area chart displays the total COVID-19 cases for each country, using a blue filled area to represent case counts along a categorical country axis and a linear count axis. It loads data from a remote CSV file via `d3.csv`, then uses `d3.scaleBand` and `d3.scaleLinear` for axes, with `d3.area` to generate the SVG path. The chart also rotates x-axis labels and includes axis titles derived from the data.

Ssaishruthik2361@gmail.com

92% match

Loading thumbnail…

Fork of Area Chart ice 7

This area chart visualizes daily COVID-19 cases over time, with dates on the x-axis and case counts on the y-axis. The data is loaded from a CSV file via `d3.csv` and parsed using `d3.timeParse`. The chart is rendered as an SVG, using `d3.area` to generate the filled path and `d3.scaleTime`/`d3.scaleLinear` for the axes, which are drawn with `d3.axisBottom` and `d3.axisLeft`. The chart includes axis labels for "Date" and "Cases."

MM Hema

87% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

A horizontal bar chart displays total COVID-19 cases for eleven countries, using a linear gradient fill and customized axes. The visualization employs D3 v6 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars, while tick labels use a text gradient and formatted numbers via `d3.format`. Data comes from a CSV file containing country names and case totals. The chart includes a title and axis labels, with gridlines removed from the axes.

YYash_Mistry

86% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

This bar chart visualizes total COVID-19 cases across eleven countries, using a horizontal layout with a blue-pink gradient fill for bars. The visualization customizes both axes: the y-axis removes tick lines and domain, while the x-axis formats values using D3’s `format` function (e.g., converting to compact notation) and includes a labeled axis title. Data is loaded from a CSV file using `d3.csv`, with scales created via `scaleLinear` and `scaleBand`. Text elements also feature gradient fills, and margins are explicitly set to position the chart within an SVG canvas.

RRohit-2710

85% match

Loading thumbnail…

Fork of Fork of Bar Chart + Axis customisation

This example shows the total COVID-19 cases for ten countries in a horizontal bar chart, with a custom gradient fill for the bars and gradient text for the axis tick labels. It loads data from an external CSV file using `d3.csv`, then renders SVG rectangles scaled with `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The chart includes a titled x-axis with formatted tick labels via `format('.2s')`, and uses `axisBottom` and `axisLeft` for axes.

RRohit-2710

85% match

Loading thumbnail…

Fork of Fork

This visualization uses D3.js to plot COVID-19 data from a WHO global dataset, showing total cases against total deaths for each country as individual circles. The scatter plot uses D3's `csv` loader and `scaleLinear` functions to map the data, with axes labeled "Total Cases" and "Total Deaths." Circles are rendered in steelblue, and the chart is drawn as an SVG in a React application. The code defines its own width, height, and margins, using D3's `axisBottom` and `axisLeft` to generate the axes.

66264kusuma@gmail.com

85% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

This bar chart displays COVID-19 total cases per country, with countries listed on the y-axis and case counts on the x-axis. Each bar is filled with a purple-to-pink linear gradient, and the axis labels use a separate gradient for text styling. The visualization is built with D3 v6, using `scaleLinear` and `scaleBand` to map the data, which is loaded from a CSV file. The code customizes the axes and text appearance through CSS rules, including tick label colors and font sizes.

DDmitrii

84% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

This horizontal bar chart displays COVID-19 case totals for ten countries, using a purple-to-pink gradient fill for the bars and a separate gradient for axis tick labels. The visualization uses d3.csv to load the data, d3.scaleLinear for the x-axis, d3.scaleBand for the categorical y-axis, and d3.axisLeft and d3.axisBottom with custom tick formatting to abbreviate large numbers (e.g., converting billions to "B"). Both axis domain lines and tick lines are removed for a cleaner design.

SSudharsan A

83% match