Skip to main content
SimilarExport ZIP
100%

Online Shopping Rate vs Retail Visitor Rate in Covid-19

✓ Published0🌍 Public
Iillyyo
Last edited Feb 9, 2022
Created on Feb 8, 2022
Forked from Smiley Face Part V

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.

AI-generated description
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
80% 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
77% 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
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…

Fork of Online shopping rate

A radial stacked bar chart displays online shopping rates across compass directions, with eight wedges per direction representing distinct rate categories. Built with D3 v4, the visualization uses `d3.arc()` for path generation, `d3.scaleLinear()` for radial and angular mappings, and `d3.ordinal` for color encoding. Data from `data.csv` is stacked via `d3.stack()`, with circular axes drawn using `d3.axisLeft()` and manual circle annotations for radius values.

GGangtokMet
68% match
Loading thumbnail…

How Stock-market Reacted to COVID-19

A yellow circle with eyes and a mouth represents a stylized face, likely a sun, reacting to the stock market's COVID-19 impact. The visualization uses D3 v6 to render SVG shapes, with the right eyebrow animating through a chained `transition().duration(2000)` sequence. The code constructs the face using `arc()` for the mouth and basic SVG elements like `circle` and `rect`. The source data or specific market movements are not shown in the provided files.

MMahmudul Hasan Bhuiyan
68% match
Loading thumbnail…

Data viz

A grid of 18 randomly generated cartoon faces fills the SVG canvas, each face composed of a yellow circle, two eyes, and a d3 arc-based mouth. The React components `Face`, `BackgroundCircle`, `EyeCircles`, `Mouth`, and `FaceContainer` render each face with randomized stroke widths, eye offsets, eye radii, and mouth dimensions. The visualization uses d3.v7’s `arc` generator to draw the mouth path and the `range` function to create the face array. Each render produces a unique arrangement of facial features.

NNenad Jovanovic
68% match
Loading thumbnail…

Online Sales based on Age

A scatter plot displays online customer sales, mapping customer age on the x-axis against purchase value on the y-axis. Each circle’s fill color encodes the number of purchases, while the Time_Spent and Revenue_Total fields are bound to the circle’s rx and ry attributes, though the standard radius remains constant. The visualization uses D3 v5 with scaleLinear, extent, axisLeft, and axisBottom, loading CSV data from a GitHub gist and rendering as SVG circles.

MManideeprenikindi
67% match