Online shopping rate in Covid-19 Pandemic

100%

Online shopping rate in Covid-19 Pandemic

✓ Published0🌍 Public

Last edited Feb 8, 2022

Created on Feb 8, 2022

This example visualizes the rise in online shopping rates during the COVID-19 pandemic, showing a clear temporal trend of increased digital commerce. The visualization uses a line chart or similar time-series plot to display the rate over time, with the pandemic period highlighted to emphasize the surge. The code is built with JavaScript, specifically using the D3.js library for rendering the chart and handling data transformations. It loads data from an external source and plots it using SVG paths and axes, with the pandemic period marked to contextualize the spike in adoption.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Online Shopping Rate vs Retail Visitor Rate in Covid-19

This visualization compares online shopping rates and retail visitor rates during Covid-19 using a face-like composition of overlapping circles in SVG. The figure’s central face, built from a yellow background circle, black-outlined eyes, and a mouth arc, encodes age-group-specific metrics via colored circular nodes of varying size and stroke. React components (`BackgroundCircle`, `Eyes`, `Mouth`) structure the layout, while D3’s `arc` API generates the mouth path. The static `index.html` SVG overlays multiple colored circles with distinct stroke colors, visually contrasting shopping and visitation trends without interactivity.

Iillyyo

77% match

Loading thumbnail…

Retail Visitors Rate in the Pandemic

This sunburst chart visualizes retail visitor rates during the pandemic, with each radial segment representing a category and its size proportional to visitor counts. The color scale maps values from red through green to magenta using d3.interpolateHsl. Built with d3.partition and d3.hierarchy, the visualization animates arc transitions using d3.arc and d3.transition. Interactive mouseenter, mouseleave, and click events on transparent overlay arcs log the selected segment’s path to the console. The SVG renders data parsed from inline JSON, with a lightsteelblue background.

Iillyyo

71% match

Loading thumbnail…

For most of retail industries, the growth is haulted by COVID-19. The seasonal growt is also dimished by the impact of COVID-19.

This interactive line chart visualizes monthly retail growth compared with the same month last year across industries, revealing how COVID-19 halted growth and dampened seasonal patterns. The chart compares 2019 and 2020 data from the RetailGrowth.csv file, using d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for axes and color encoding. A d3.Delaunay Voronoi overlay enables hover interactions, highlighting the nearest data point and its corresponding industry line, while a tooltip displays the exact growth or reduction percentage.

Yyeezhu112

69% match

Loading thumbnail…

Online shopping rate

This radial stacked bar chart displays monthly online shopping rates across eight spending ranges, from 0.1 to 0.8. Each month is shown as a wedge around the circle, with colored segments representing different value brackets and the radius encoding the proportion of shoppers in each category. Built with D3 v4, it uses d3.stack, d3.arc, and d3.scaleBand to generate the sectors, while d3.axisLeft and custom radial gridlines indicate percentage levels. The data comes from a CSV file, and a custom d3-scale-radial library from Mike Bostock’s radial chart examples is included, though the main radius scale employs d3.scaleLinear instead.

Iillyyo

68% match

Loading thumbnail…

COVID-19

This interactive D3.js visualization displays COVID-19 metrics over time for selected countries, allowing viewers to toggle between confirmed cases, deaths, and recoveries via two dropdown menus. The line chart uses a time-based x-axis and a linear y-axis, with a single red, blue, or green line rendered per selection. Data is loaded from a CSV file, processed by nesting and grouping entries by date, and filtered by country. The visualization uses D3's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` for smooth curves.

WW9183907

67% match

Loading thumbnail…

COVID-19

This D3.js visualization shows the progression of COVID-19 cases, deaths, and recoveries over time for a selected country. Users choose a status metric and country via dropdown menus, and the chart displays a smooth line chart of that metric against observation dates. The code uses D3 v5 methods like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. Data is loaded from a CSV file and aggregated by country and day using `nest` and a custom `groupByDay` function.

WW9183907

66% match

Loading thumbnail…

Covid-19 Cases Analysis

This interactive narrative visualization analyzes U.S. COVID-19 case trends across multiple scenes, beginning with a line chart of total confirmed cases from January to May 2020, followed by state-level comparisons and a geographic distribution map. The first scene uses D3 v7 with `d3.select`, `d3.csv`, `d3.timeParse`, and `d3.line` to render an SVG line chart, plotting dates against confirmed case counts from a public COVID-19 dataset. The visualization employs a slideshow navigation format with interactive elements for exploring different data aspects.

Xxiaojingwu138

66% match

Loading thumbnail…

Covid-19 Cases Analysis

This interactive narrative visualization analyzes U.S. COVID-19 cases across three scenes. It shows total case trends per day, state-level comparisons, and case distribution on a map. The line charts use d3.line and d3.scaleTime to plot confirmed and death cases, with interactive navigation between scenes via HTML links. Data is loaded from external CSV files using d3.csv, and rendered as SVG elements. The visualization employs a slideshow structure with drill-down capabilities, allowing exploration of trends over time from January to May 2020.

Xxiaojingwu138

65% match