Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Yyeezhu112
Last edited Aug 2, 2020
Created on Aug 2, 2020

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.

AI-generated description

Line chart of Coronavirus cases to date, by country. Data from Johns Hopkins Coronavirus Dataset.

Hover to see details and illuminate lines.

This variant shows daily death numbers, smoothed using the repeated averaging technique described in D3: Histogram Blur / Smoothing, for the top 20 countries by cumulative deaths.

MIT Licensed

Similar vizzes

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
73% match
Loading thumbnail…

The housing market was greatly impacted in March and April. However, the impact was reversed quickly since June.

Three overlaid line charts compare average new housing listings across 2018, 2019, and 2020, highlighting a sharp decline in March and April 2020 followed by a rapid recovery by June. The visualization uses React with D3 v5 scales and line generators with curveBasis, rendering to SVG. Red, blue, and black paths represent each year, while dropdown menus allow switching between x-axis attributes like day of year and y-axis metrics such as average listings. Data comes from Redfin’s data center.

Yyeezhu112
69% match
Loading thumbnail…

Online shopping rate in Covid-19 Pandemic

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.

Iillyyo
69% match
Loading thumbnail…

Fork of Line Chart

This line chart displays monthly retail sales for 2023, with months on the x-axis and sales in USD thousands on the y-axis. The SVG renders a red line path using d3.line, with point and linear scales via d3.scalePoint and d3.scaleLinear. Axes are generated with d3.axisLeft and d3.axisBottom, and the data comes from a CSV file loaded through d3.csv. The chart includes labeled axes and a title, with grid lines created by custom tick sizing.

MM
69% match
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
69% match
Loading thumbnail…

Impact of Covid-19 on Employment Bar Graph

A horizontal bar chart shows the percentage of working hours lost per week (relative to a 40-hour baseline) across 14 countries during the Covid-19 pandemic. The visualization uses React with D3 v5 APIs, including `scaleBand` for the categorical country axis, `scaleLinear` for the numerical percentage axis, and `csv` to load remote employment data. Each country’s bar is rendered as an SVG `rect`, with red tick lines and axis labels drawn manually. The chart communicates relative economic disruption by sorting countries from largest to smallest percentage loss.

VVAbhiram99
66% match
Loading thumbnail…

Title

This chart compares international tourist arrivals for the top 10 countries between 2019 and 2020 using a Cleveland dot plot. Green dots represent 2019 values, while purple dots show 2020 figures, connected by grey lines to highlight the dramatic decline due to the pandemic. The visualization is built with React, D3 v6, and SVG, using `d3.scaleLinear` and `d3.scaleBand` for axes. Hovering over purple dots triggers a tooltip via mouse events, and a legend is generated using the `d3-legend` library. Data comes from the included CSV file.

Jjustinwong208
65% 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
65% match