caixinying138@gmail.com

@caixinying536·4 public vizzes

Fork of Cheap Tricks for Interaction

This interactive choropleth displays global countries in green on a blue sphere, with hover states that turn countries red. It renders map geometry using `d3.geoPath` and `d3.geoNaturalEarth1` projections, and adds zoom capabilities via `d3.zoom`. The data is loaded from the `world-atlas` package as TopoJSON and TSV files, which supply country boundaries and names. A `title` element shows each country’s name on hover. The visualization supports pan and zoom through the `zoom` API, applying affine transforms to the SVG group.

Mar 31, 2026

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern for dynamic data visualizations using D3 v5. It shows a bowl of fruit where apples and lemons are rendered as scaled circles with distinct colors, updating as the underlying data array changes. The `fruitBowl` module uses `scaleOrdinal` for color and radius mappings, while D3's selection, merge, and exit methods handle element transitions. The SVG canvas is populated via `select` and `range` to generate the fruit dataset.

Mar 27, 2026

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example displays a blank SVG canvas with a scripted attempt to create fruit objects using D3.js. The code imports `select` and `range` from `d3`, selects the SVG element, and uses `range(5)` to generate an array of five apple objects via `makeFruit`. It then logs the array to the console, but no visual face or fruit is rendered. The SVG remains empty, with the page styled by CSS that hides overflow and margins. The example relies on D3 v5 and the svg rendering framework.

Mar 21, 2026

Loading thumbnail…

Fork of Let's make a face with D3.js!

This bar chart visualizes the populations of ten countries, with bar width proportional to each country’s population in thousands. Built with D3.js v5, it uses `d3.select` to target the SVG, `d3.csv` to load the data, and `d3.scaleLinear` with `d3.max` to map population values to pixel widths. Each bar is a `rect` appended via `enter()`, with a fixed height of 300 pixels. The data comes from a local `data.csv` file, rendered as an SVG graphic.

Mar 21, 2026