Skip to main content
Log in
I

illyyo

@illyyo·10 public 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.

Feb 10, 2022
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.

Feb 10, 2022
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical structure of the Flare dataset, with each ring segment sized by value. Clicking a node zooms in to reveal its children, while the central circle returns to the root view. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, `d3.arc`, and animated transitions via `transition.attrTween` to smoothly interpolate arc positions. Colors derive from a `d3.scaleOrdinal` over the rainbow palette, and labels rotate with their arcs.

Feb 9, 2022
Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows the CSS named colors dataset rendered as a radial burst of colored arcs, with each arc representing a color from the file loaded via D3’s `csv` utility. React manages the component state and renders an SVG, while D3’s `arc` and `pie` generators compute the path geometry for each sector. The visualization fills the screen with a vibrant full-circle pie chart, centered on a 960×500 viewport. The code demonstrates a clean separation where React handles the DOM updates and D3 handles the data-driven shape calculations.

Feb 9, 2022
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.

Feb 9, 2022
Loading thumbnail…

Mouse Interaction

A yellow circle with a black border sits at the center of an SVG canvas. The example demonstrates mouse interaction by logging the cursor's coordinates to the console on every mouse movement over the SVG element. Built with React and D3.js (v5), the SVG circle is rendered declaratively, and the `onMouseMove` event handler captures the `clientX` and `clientY` properties from the event object. The code uses `ReactDOM` to render the component into the root element, with D3's `arc` function imported but not currently applied.

Feb 8, 2022
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.

Feb 8, 2022
Loading thumbnail…

Fork of Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates a sunburst visualization of hierarchical data with smooth transitions between different data subsets. Using D3 v5, it employs a modular architecture where a reusable `sunburst` function renders arcs calculated through `d3.arc` generators and a `d3.partition` layout. The chart responds to JSON data built into a hierarchy via `d3.hierarchy`, with arcs colored on a red-to-blue scale using `scaleLinear` and `interpolateHsl`. Interactive mouseenter, mouseleave, and click events log selected paths. SVG rendering with animated CSS transitions updates the visualization whenever new data arrives.

Feb 8, 2022
Loading thumbnail…

Fork of World Countries Tree

This fork of D3's tree diagram displays a hierarchical breakdown of world countries, organized by continent and subregion, with all terminal nodes labeled in a serif font. The visualization is rendered as an SVG, with nodes positioned horizontally based on depth. The code uses D3 v5’s `tree` layout, `hierarchy` and `linkHorizontal` helpers to compute paths, and a `zoom` interaction that rescales the entire drawing on user input. Text size scales inversely with depth, and link paths are styled with a teal stroke.

Feb 8, 2022
Loading thumbnail…

Hello Data viz

This example displays five overlapping circles of varying sizes and colors, arranged to create a visually dense, colorful target-like composition on a 960 by 500 SVG canvas. The circles are manually positioned with fixed coordinates and radii, each using distinct fill and stroke colors such as red, green, purple, and magenta. The visualization is built with plain HTML, CSS, and JavaScript, rendering shapes directly through SVG circle elements without any external libraries or data-driven logic. It simply demonstrates static vector shapes with heavy strokes and overlapping layers for visual effect.

Feb 1, 2022