Fork of A7_Multi-line Chart

100%

Fork of A7_Multi-line Chart

✓ Published0🌍 Public

Last edited Mar 27, 2024

Created on Mar 27, 2024

This fork of a multi-line chart visualizes COVID-19 case counts over time, showing a green line with circular points for each date. It uses D3 v7 with an SVG rendering, employing `d3.scaleBand` for the date axis and `d3.scaleLinear` for the case count axis, plus `d3.line` and `d3.axisBottom`/`d3.axisLeft` to generate the chart. Data is loaded from a remote CSV file containing date and case columns, with the line chart displaying a clear trend of rising cases across the period.

AI-generated description

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart displays COVID-19 biweekly case counts for the United States over time, using a smooth curved path rendered with d3.line and curveNatural. The chart is built with React functional components and d3.v5 scales, including scaleTime for the x-axis and scaleLinear for the y-axis, with axes generated by custom AxisBottom and AxisLeft components. Data is loaded asynchronously from a CSV URL using d3.csv within a useData hook. The visualization uses SVG rendering with a Poppins font and muted teal styling for the line and axes, but omits data point circles.

Aamanoakane

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

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

81% match

Loading thumbnail…

Fork of Streamgraph of covid-19

This fork of a COVID-19 streamgraph visualizes daily case numbers across five continents using an animated silhouette-style stacked area chart. Built with React and D3 v2, it renders SVG paths that change color palettes and update via tooltip interactions. The chart uses `d3.layout.stack` with a silhouette offset, `d3.svg.area` with cardinal interpolation, and `d3.time.scale` for the time axis, pulling data from CSV files for daily, monthly, or original case counts.

XXianbin Gu (Bing)

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

80% match

Loading thumbnail…

Fork of Fork of Line Chart

This line chart visualizes US cancer case counts from 2010 to 2022, with time on the x-axis and case numbers on the y-axis, rendered as an SVG path with grid lines and axis labels. The code loads CSV data from a GitHub gist, parses the year and cases fields, and uses d3.scaleTime, d3.scaleLinear, d3.extent, d3.max, d3.axisBottom, d3.axisLeft, and d3.line to generate the chart. The visualization includes a title and styled axis tick marks, with axis labels colored blue and the line stroke in blue.

Ssaivinay143

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

80% match