Skip to main content
SimilarExport ZIP
100%

Retail Visitors Rate in the Pandemic

✓ Published0🌍 Public
Iillyyo
Last edited Feb 10, 2022
Created on Feb 9, 2022

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.

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

D3 v5 Zoomable Sunburst

This interactive zoomable sunburst chart visualizes a hierarchical dataset of restaurant categories across multiple U.S. cities, with each ring segment representing a food type and its relative value. Users can click on any segment to re-center the visualization on that node, smoothly animating the repositioning and scaling of all arcs and labels over 750 milliseconds. Built with D3 v5, the implementation uses the `d3.hierarchy` and `d3.partition` APIs to compute the layout, `d3.arc` for rendering paths, and `d3.interpolate` within a `transition.attrTween` for seamless zoom transitions. Colors are assigned via a rainbow-interpolated ordinal scale, and the flare dataset is loaded asynchronously from the Observable stdlib.

MMartin Lauf
67% match
Loading thumbnail…

D3 v5 Zoomable and loadable Sunburst

This interactive sunburst chart visualizes hierarchical data from the flare dataset, displaying restaurant categories and subcategories as concentric arcs. Clicking a segment zooms in to reveal that branch's children, while clicking the center circle navigates back up the hierarchy. Built with D3 v5, it uses custom partition layouts, arc interpolation, and CSS transitions to animate the zooming effect. The visualization loads data asynchronously via the Observable stdlib and renders everything as SVG with animated color and opacity changes.

Aallanagabindhu
67% match
Loading thumbnail…

Sequences sunburst

This interactive sunburst chart visualizes user navigation sequences on a website, showing the proportion of visits for each path segment. Built with D3.js v4, it uses a radial partition layout to display hierarchical data from a CSV file. Hovering over a segment highlights its ancestor path in the breadcrumb trail and displays the percentage of total visits. The visualization uses `d3.partition()` for the layout and `d3.arc()` for rendering arcs, with a fade transition effect on mouse leave. A legend toggle allows users to show or hide the color key.

GGabriel Diaconescu
66% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes hierarchical data, displaying restaurant categories (fast food, pizza, Mexican, etc.) across multiple cities, with each arc segment representing a portion of the total. The visualization uses D3 v5's hierarchical layout and partition functions to compute the arc geometry, rendering the sunburst as SVG paths with animated transitions. Clicking on a segment zooms into that subtree, using `d3.interpolate` and `transition.attrTween` to smoothly animate the arc angles and radii. The data originates from the Observable `@observablehq/flare` dataset, loaded dynamically via the Observable standard library's `require` function.

Jjessand4
66% match