sofiaboteva

@sofiaboteva·5 public vizzes

Fork of D3 v5 Zoomable Sunburst

This visualization shows the Flare software package’s class hierarchy as a zoomable sunburst. The circular radial layout displays hierarchical partitions, where each ring represents a depth level and each arc’s size corresponds to the node’s value. Clicking on any arc animates the view, re-centering and rescaling the chart around that node, while a circle at the center returns to the root. The code uses d3.hierarchy, d3.partition, d3.arc, and transition.attrTween on SVG paths, with data loaded via the @observablehq/flare module and color scales built with d3.scaleOrdinal and d3.interpolateRainbow.

May 17, 2022

Loading thumbnail…

Dear Data V2

This zoomable sunburst chart visualizes the hierarchical structure of the flare dataset. Users can click on any arc to re-center the view on that node, with a smooth animation transitioning the radial layout. Built with D3 v5, the visualization uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the geometry. The `transition.attrTween` API animates the arc paths and labels during zooming, while `d3.scaleOrdinal` with `d3.interpolateRainbow` assigns colors to the top-level categories.

May 16, 2022

Loading thumbnail…

DearDataProject

This interactive zoomable sunburst chart visualizes personal data about meals, snacks, and beverages recorded by a single person over two weeks. Each ring represents a category in the hierarchy—such as meal type, food or beverage, and location—with segment size determined by the count of entries in the dataset from the provided CSV file. The visualization uses D3 v5’s `d3.partition` layout and `d3.arc` for drawing arcs, with colors assigned via `d3.scaleOrdinal` and `d3.interpolateRainbow`. Clicking on any segment zooms into that branch, using `transition.attrTween` and `d3.interpolate` to smoothly animate the radial repositioning of all arcs.

May 16, 2022

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a minimal interactive-free SVG graphic: a single large circle rendered inside an SVG element. The page uses raw CSS for layout and styling, with the `body` margin removed and overflow hidden. The circle is created declaratively in the markup with a radius of 400, and the stylesheet includes a `.highlighted` class that turns text red, though it is not applied to the circle. The implementation relies on plain HTML, CSS, and inline SVG, without any JavaScript libraries or external data sources.

May 16, 2022

Loading thumbnail…

Cars Report

This example displays the make of the first car in a static dataset as large, centered text. It loads a hardcoded JSON array of car objects from a local ES6 module named `cars.js` and uses `document.getElementById` to inject the value into an HTML `<pre>` element. The page demonstrates basic module import/export syntax and DOM manipulation without any external libraries.

May 16, 2022