nj889

@nj889·8 public vizzes

Squad Selector

This interactive tree visualization displays a hierarchical squad selection structure, starting with a club and branching into goalkeeper positions. The code uses d3.js v5 with a React framework, rendering an SVG that can be zoomed via `d3.zoom`. Data is loaded from a JSON file and transformed using `d3.hierarchy` and `d3.tree`, with horizontal links drawn via `d3.linkHorizontal`. Node labels are styled with Playfair Display font and text shadows.

Sep 4, 2023

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries organized by continent and subregion, rendered as a horizontal tree layout. The code uses D3’s `tree()` layout with `linkHorizontal` for curved links, and applies `zoom()` for panning and scaling. Text labels scale in font size based on depth, with the root at the top. The data comes from a static JSON file with nested nodes representing regions and countries.

Sep 4, 2023

Loading thumbnail…

Fork of Smiley Face Part I - changed face

This example displays a static, cartoon-like smiley face centered on a blue SVG circle with a tan muzzle shape drawn beneath the face’s midpoint. The face uses a custom path for the muzzle and a simple circle for the head, both rendered with SVG stroke and fill attributes. The code imports React and the `arc` function from D3, though only the `arc` import is unused; the actual rendering relies on React’s JSX to produce SVG elements. D3 v7 is loaded via CDN, while React 18 handles the component lifecycle and DOM mounting. The face currently lacks eyes and a mouth, showing only the head and muzzle.

Apr 15, 2023

Loading thumbnail…

Fork of Smiley Face Part I

A yellow smiley face rendered with SVG appears at the center of a 960×500 canvas, showing a circle for the head, two black eyes at fixed offsets, and a semi-circular mouth drawn as an arc. The example uses React 18 to manage the component structure while leveraging D3 v7’s `arc` generator to create the mouth path with inner and outer radii. All shapes are positioned via a translated `<g>` group, with stroke styling applied directly to SVG circle elements.

Apr 15, 2023

Loading thumbnail…

Smiley Face Part I

A yellow smiley face drawn with SVG sits centered on a white background, featuring two black circular eyes and a curved mouth arc. The face is constructed using React components that render three `circle` elements and one `path` element, with the mouth path generated by the D3 `arc()` generator using specified inner and outer radii and angular start and end points. The face outline uses a thick black stroke on the yellow circle, while the eyes are positioned at fixed offsets from the center.

Apr 15, 2023

Loading thumbnail…

Smiley Face Part One

This example displays a static smiley face constructed with React and rendered as SVG. It uses D3’s `arc` function to generate a mouth shape from a pie-like path, while the face outline and eyes are drawn with `circle` elements. The code sets dimensions, offsets, and radii as constants, and computes the mouth’s arc angles from π/2 to 3π/2. The entire graphic is centered using a `g` transform.

Dec 13, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays a centered, large-scale message reading "Hello HTML!" using plain HTML and CSS. The page contains a single `<div>` element with the class "message," styled with a 13em font size and text alignment to create a bold visual statement. It demonstrates the fundamental structure of an HTML document with embedded CSS and no JavaScript, serving as a minimal baseline for web visualization work, and is intended as a starting point for exploring more complex frameworks like React.

Dec 13, 2021

Loading thumbnail…

Smiley Face Part One

This example renders a static smiley face using React 17 and SVG. It draws three circles on an SVG canvas: a large yellow head with a black outline, and two smaller black eyes positioned symmetrically around the center. The code defines the SVG markup directly in the HTML file, while the React app simply renders a placeholder “Hello JSX” heading. The visual output does not yet include a mouth, reflecting the “half way” status noted in the README.

Dec 12, 2021