julia-amelie

@julia-amelie·3 public vizzes

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, using concentric rings to represent nested categories and their relative sizes. Clicking any arc zooms into that subsection, smoothly animating the layout through D3 transitions. The visualization is built with D3 v5, using `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the arcs as SVG paths. Colors are assigned via `d3.scaleOrdinal` with an interpolated rainbow palette, and labels rotate and fade based on the current zoom level.

Mar 28, 2021

Loading thumbnail…

Fork of Smiley Face Part IV

A smiling face built from React components renders as an SVG, with a yellow background circle, two black eyes, and a D3-generated mouth arc. The code imports `BackgroundCircle`, `Eyes`, and `Mouth` components, each receiving props for size and position, and the mouth uses `d3.arc` to create a curved path. All elements are centered within a 960x500 SVG canvas, demonstrating a clear separation of visual parts as reusable React functions.

Mar 28, 2021

Loading thumbnail…

simley face

A smiling face rendered as a pink circle with black-stroked eyes and a mouth, drawn using SVG within a React component. The visualization computes the face geometry with fixed constants for dimensions and offsets, then uses D3’s `arc()` function to generate the mouth path. The code relies on React’s `ReactDOM.render` and D3 v6, with all shapes positioned via an SVG `<g>` transform at the center of the canvas.

Mar 27, 2021