RYAN

@sysu19351017·3 public vizzes

Fork of Theme River

This fork of Theme River visualizes movie ratings data across years, using a streamgraph to show revenue contributions from G, PG, PG-13, and R categories. The visualization employs d3.stack with a silhouette offset to create layered areas, rendered as SVG paths with d3.area and curveCardinal interpolation. Interactive tooltips display stream details on mouse movement, while a separate dashboard panel provides a compressed view of the data. The code uses d3.scaleOrdinal with schemeCategory10 for color encoding and d3.scaleLinear for both x and y axes.

Dec 11, 2023

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates custom axis formatting: the x-axis converts large numbers to abbreviated form—replacing 'G' with 'B'—and removes default axis lines for a cleaner look. Built with D3 v5, it uses `scaleLinear` and `scaleBand` for scaling, and `axisBottom` and `axisLeft` for axes. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles.

Jul 19, 2023

Loading thumbnail…

Let's make a happy face

This example draws a yellow circle face with two black eyes, rectangular eyebrows, and an arc-shaped smile using SVG. The eyebrows animate upward and back down via D3 transitions over two seconds. The code sets element positions with absolute `x`, `y`, `cx`, `cy` coordinates and uses D3’s `arc()` generator to define the mouth path. The D3 v7 library handles SVG construction and the two-stage `transition().duration()` animation.

Jul 14, 2023