lit86hlp

@lit86hlp·13 public vizzes

Fork of Loading and Parsing CSV Data

This example displays the size and structure of a CSS Named Colors CSV dataset in a large text block. It uses d3.csv to fetch and parse the data, then computes and presents the file size in kilobytes, the total row count, and the number of columns. The visualization also includes commented code showing alternates using fetch with async/await and d3.csvParse, demonstrating different approaches to loading CSV data in D3 v5 within a React framework.

Jul 12, 2022

Loading thumbnail…

Fork of Smiley Face Part V

A smiling face is rendered as a yellow circle with black outline, two eyes, and an arc-shaped mouth, all centered within an SVG. The visualization is built with React components, where each facial feature is a separate file and uses ES6 modules and React Fragments. D3’s `arc` generator creates the mouth path, while styling and positioning come from inline SVG attributes. The code is a fork from a tutorial, with React handling the component structure and D3 providing the arc geometry.

Jul 12, 2022

Loading thumbnail…

Fork of Fork of Smiley Face Part III

This example shows a classic smiley face, rendered as a single yellow circle with a black outline, two black eyes, and a wide, open mouth arc. The face is generated by combining basic SVG shapes, created with React and D3.js. It uses D3’s `arc` generator to build the mouth path, while the face and eyes are simple SVG circles. The entire composition is positioned at the center of a 960 by 500 viewBox.

Jul 12, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a smiling face with D3.js and React, showing how D3’s `arc()` generator creates a mouth path while React manages the SVG elements. The face consists of a yellow circle with a black stroke, two eye circles positioned via offsets, and a mouth drawn as an arc using `innerRadius`, `outerRadius`, and angle specifications. The SVG output is produced declaratively through React’s `App` component, which renders into the `#root` div using `ReactDOM.render()`.

Jul 12, 2022

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Smiley Face Part II

A smiling face rendered as a full-screen yellow SVG circle with black outline, two black eyes, and a mouth implied by the outer circle’s boundary. Built with React 18, the component computes dimensions from `window.innerWidth` and `window.innerHeight`, then positions elements using a centered `<g>` transform. The code uses `ReactDOM.render` to mount the app, with circles drawn via SVG attributes like `cx`, `cy`, `r`, and `stroke-width`. No data source is referenced; the visualization is entirely geometric and auto-resizes to the viewport.

Jul 12, 2022

Loading thumbnail…

Fork of Fork of Fork of Fork of Smiley Face Part II

A full-screen yellow smiley face is rendered inside an SVG, centered on the viewport with its eyes and mouth positioned using fixed pixel offsets. The face adapts to the browser window by calculating its radius and position from `window.innerWidth` and `window.innerHeight`. The example uses React 18.2.0 to create SVG circle elements, with ReactDOM rendering the component into a root div. Stroke width, eye radius, and mouth radius are defined as constants, and the face is drawn with a black outline and no explicit mouth shape.

Jul 11, 2022

Loading thumbnail…

Fork of Fork of Fork of Smiley Face Part II

This example visualizes a simple smiley face that scales responsively to fill the browser window. The face is drawn using React with SVG, featuring a yellow circle for the head, two black eyes, and a mouth that is defined but not rendered. The code calculates the center and dimensions based on `window.innerWidth` and `window.innerHeight`, then uses ReactDOM to render the SVG into the page. The stroke width and eye offsets are hardcoded, creating a minimal, functional demonstration of vector graphics in a React application.

Jul 11, 2022

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This example shows a yellow smiley face rendered as an SVG, centered in the browser window with black-outlined eyes and a large circular face. The face is drawn using React 16.9’s `ReactDOM.render` to mount an SVG component, which calculates dimensions from `window.innerWidth` and `window.innerHeight`. It uses SVG `<circle>` elements with fixed offsets and radii for the eyes and face, plus a stroke for the outline. The code creates a static, full-screen visualization without interactivity or additional data sources.

Jul 11, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face is drawn to fill the browser viewport, centered with a black-outlined circular head. The face includes two black eye circles and is rendered at full window size. The visualization uses React and ReactDOM to create the SVG structure, employing JavaScript constants for positioning and styling elements. The SVG circle elements are used for the head and eyes, with a group transform to center the composition.

Jul 11, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of "Let's Make a Face Part I" shows a static smiley face built from yellow and black SVG circles. The large 245-pixel-radius circle forms the head, while two smaller circles serve as eyes at fixed positions. The code uses raw SVG elements—circle tags with attributes for center coordinates, radius, fill, and stroke—inside a 960×500 viewport. No JavaScript libraries or data sources are involved; the rendering is purely declarative SVG markup embedded directly in the HTML.

Jul 11, 2022

Loading thumbnail…

lit86hlp fork of Let's Make a Face Part I

A fork of the "Let's Make a Face" tutorial, this SVG visualization builds a simple smiley face from three circles. A large yellow circle with a black stroke forms the head, while two smaller circles serve as eyes. All shapes are defined directly in the markup with absolute coordinates, and the page uses inline CSS to remove margins and hide overflow. The rendering relies on basic SVG elements (circle, stroke, fill) without any JavaScript libraries or data sources. The result is a static, centered face on a 960-by-500 canvas.

Jul 11, 2022

Loading thumbnail…

Fork of Hello HTML

This fork of the Hello HTML example displays a single yellow circle with an orange outline as the core visual, accompanied by two smaller black circles, all rendered via raw SVG elements inside an HTML page. The code constructs three static circle shapes directly, using attributes for position, radius, fill, and stroke. No external libraries or data sources are used; the entire visualization is hand-coded in HTML and inline CSS, with the body margins removed to eliminate browser default padding.

Jul 11, 2022

Loading thumbnail…

Fork of Hello HTML

This example demonstrates a blank HTML document with an empty body, showing the minimal structure required for any web page. The code consists solely of the standard HTML5 doctype declaration, a `<head>` section containing a `<title>` tag, and an empty `<body>` element. It uses no JavaScript libraries, visualization frameworks, or external data sources, serving purely as a static shell. The page renders no visual content, charts, or interactive elements, making it a starting point for further development rather than a functional visualization itself. The associated metadata indicates it is a fork, but the code reveals no additional functionality beyond the bare HTML skeleton.

Jul 11, 2022