Akriti97

@Akriti97·6 public vizzes

Layout

This interactive circular visualization uses a zoomable bubble layout to display hierarchical data, with circles sized by a `size` value and colored by depth. The visualization presents a root node with a single child "abc" that contains six leaf nodes, each with sub-elements. Users can click any circle to zoom into that hierarchy level, with smooth animated transitions between views. Built with D3 v4, the code applies `d3.pack()` for the circle layout, `d3.hierarchy()` for data structuring, and `d3.interpolateZoom` for camera-like zooming. The SVG rendering includes hover effects on nodes and labels that fade in only for visible parents. Data comes from a local `flare.json` file.

Jun 14, 2018

Loading thumbnail…

Layout

This example shows an interactive circular packing diagram where each circle represents a node in a hierarchical dataset, with leaf nodes as white circles and parent nodes colored by depth. Clicking a circle zooms to focus on that subtree, smoothly transitioning the view. Built with D3 v4, it uses the `d3.pack` layout to compute circle positions and radii, and `d3.hierarchy` to process the data from a local `flare.json` file. The visualization is rendered as SVG, with hover highlighting on nodes and a zoom transition that repositions and rescales circles and labels via the `transition` API.

Jun 14, 2018

Loading thumbnail…

fresh block

This interactive circle-packing visualization displays a hierarchical dataset from flare.json, using nested bubbles to represent categories and their relative sizes. The view begins with a zoomed-out root node and supports click-to-zoom transitions between hierarchy levels, with labels fading in for parent nodes. Built with D3 v4, it uses the `d3.pack` layout, `d3.hierarchy` for tree traversal, and `d3.interpolateZoom` for smooth zoom animations. Circle fills follow a linear color scale applied by depth, while SVG rendering and CSS hover effects highlight nodes. The root background shifts to a warm hue, and clicking anywhere resets the view.

Jun 12, 2018

Loading thumbnail…

fresh block

This example shows a single empty circle centered within a square SVG canvas, drawn with a thick black outline. The visualization uses D3.js version 3 to append an SVG container, then a group element translated to the center, and finally a circle with a fixed radius calculated from the chart's dimensions. The circle is styled with a custom CSS class named `ring` that sets the fill to none and stroke to black. The code calculates the radius by subtracting margins from the total height, and positions the circle via the `translate` attribute on the group element.

Jun 11, 2018

Loading thumbnail…

fresh block

A single empty ring is drawn in the center of an SVG canvas, rendered as a circular outline using a CSS class that applies a black stroke. The visualization shows a minimalist placeholder graphic, with the ring’s radius calculated from the fixed height, width, and margins. The code uses D3 v3 to select a div, append an SVG, and add a grouped circle with the class `ring`. No data is loaded or bound, so the example demonstrates basic SVG construction and styling with D3’s selection and attribute methods.

Jun 11, 2018

Loading thumbnail…

fresh block

This example shows a minimal D3.js v4 visualization: a single line of instructional text, “Edit the code below to change me!”, positioned at a fixed location on an SVG canvas. The code demonstrates basic SVG rendering by appending a text element to a 960x500 pixel SVG container, with custom font size and family. It uses the d3.select and d3.append methods to build the scene, serving as a starting point for further customization. The visualization highlights the simplicity of creating static text-based graphics with D3’s data-joining and SVG manipulation APIs.

Jun 5, 2018