codingClaire

@codingClaire·2 public vizzes

Lollipop Chart USA Flights On-time Performance

A lollipop chart visualizes USA flight on-time performance by day of the month, comparing average departure delay (green circles) against arrival delay (purple circles) for each day. The chart uses D3 v4’s `scaleLinear` for the horizontal delay axis and `scaleBand` for the vertical day axis, with lines connecting the two delay values per day. Data is loaded from a CSV via `d3.csv` and rendered as SVG circles and lines within a React framework.

Apr 6, 2020

Loading thumbnail…

SANKEY Experiment

This example visualizes character interactions from a Chinese TV series as a multi-stage Sankey diagram, mapping connections across up to four hierarchical levels from individual characters to complex relationship chains. The SVG rendering uses a custom `d3.sankey` layout with `computeNodeBreadths`, `computeNodeDepths`, and `computeLinkDepths` functions to position nodes and curved links. Data from `demo.json` feeds the React-based visualization, with node heights and link thicknesses proportional to interaction frequencies. The diagram highlights dominant relationships, such as the strong connections among Fang Yifan, Ji Yangyang, and Li Meng.

Apr 6, 2020