Ar0manKhan

@Ar0manKhan·3 public vizzes

Chapter 2

This demo shows how to load and inspect a JSON dataset with D3 version 6. It fetches a collection of fictional tweets, including user, content, timestamp, retweets, and favorites, using the `d3.json` method. The example also imports from the `d3` and `d3-collection` modules, and logs the `nest` function to the console, though it does not yet render any visualization. The page simply provides a minimal HTML structure with a centered body and an embedded YouTube video, demonstrating the basic setup for a D3 project without producing a graphical output.

Feb 18, 2021

Loading thumbnail…

Smily Face with svg

A smiling face is drawn using scalable vector graphics, showing how D3 v6 can create basic shapes and group elements. The code builds a yellow circle for the face and positions two smaller eye circles using a g element with a transform. It utilizes D3 selections to append and style SVG elements, calculates coordinates for centered placement, and applies attributes for fill and stroke. The example demonstrates D3’s SVG manipulation capabilities with a simple, static illustration.

Feb 11, 2021

Loading thumbnail…

Try SVG

This example demonstrates a single red rounded rectangle rendered inside an SVG element with a black border. The page uses basic HTML structure, with CSS styling targeting the SVG by ID and the rectangle by element type. The SVG markup defines the shape with x, y, width, height, and rounded corner radii, while CSS applies fill color, stroke, stroke-width, and opacity. The rect is purely static, showing SVG’s native vector drawing capabilities without any JavaScript libraries or data sources; the styling shows how CSS can control SVG presentation attributes.

Feb 6, 2021