feizhi123

@feizhi123·3 public vizzes

Bowl of Fruit - Click to Select

Five circles representing apples transition into view in an SVG bowl, with each fruit selectable by mouseover and mouseout events that toggle a black stroke. The code uses d3 data joins and ordinal scales to map fruit types to colors and radii, while transition methods animate circle entry and exit. Over time, fruits are removed or replaced with lemons via JavaScript timers, demonstrating animated updates to the bound dataset.

May 26, 2020

Loading thumbnail…

Sequences sunburst

A sequences sunburst visualization displays hierarchical path data as a ring of arcs, where each arc’s angle and radius encode the value of a sequence segment. Hovering over an arc highlights its ancestor chain and shows a breadcrumb trail in the upper left, along with the percentage of visits that begin with that sequence. The code uses D3 v4 APIs including `d3.partition`, `d3.hierarchy`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeTableau10` for coloring. Data is loaded from CSV files via `d3.text` and `d3.csvParseRows`.

May 26, 2020

Loading thumbnail…

textured pie chart

A textured pie chart displays five categorical values using distinct geometric patterns—hexagons, crosses, caps, woven, and waves—assigned via the textures library. D3.js v4 computes arc paths with d3.pie and d3.arc, while an ordinal color scale maps each category to a unique hue. The SVG output includes black strokes between slices, created through basic DOM selection and data binding.

May 26, 2020