KakeyaK

@KakeyaK·7 public vizzes

Loading data with React and D3

This example displays a loading screen that reports the size, row count, and column count of a CSV dataset once it is fetched. The implementation uses React's `useState` hook within an `App` component, while the asynchronous data retrieval relies on D3’s `d3.csv` method, pulling from a remote gist containing CSS named colors. Upon completion, the `d3.csvFormat` API calculates the data’s byte size, and the result is rendered inside an HTML `<pre>` element.

Jul 16, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data using D3 v7 within a React framework. It fetches a dataset of CSS named colors from a GitHub gist, then displays a summary of the file size in kilobytes, row count, and column count. The code uses d3.csv to fetch and parse the data, d3.csvFormat to measure its size, and updates the text content of a DOM element. The visualization is minimal, showing only text statistics rather than graphical charts.

Jul 16, 2022

Loading thumbnail…

Fork of Smiley Face Part V

A yellow smiley face is rendered inside an SVG, centered within a 960 by 500 canvas. The face consists of a yellow background circle with a black stroke, two black eyes, and a black mouth. The visual elements are constructed using React components split into separate ES6 modules, which are then composed within a `FaceContainer` that applies a coordinate transform. The mouth shape is generated using the `d3.arc` function to create a path with specified inner and outer radii and angular range.

Jul 6, 2022

Loading thumbnail…

D3 Tutorial

This example shows a simple yellow circle with a black outline rendered in an SVG canvas. It is a basic D3.js and React tutorial demonstrating how to define and display SVG shapes. The code uses React to create an `<svg>` element with a `<circle>` component, setting its position, radius, fill color, and stroke properties directly within the JSX. The rendering is handled entirely through SVG, with no external data sources or complex interactions.

Apr 11, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a responsive smiley face rendered as an SVG graphic, with a yellow circular head, black outline, and two black eyes positioned symmetrically around the center. The face fills the entire browser window, adapting its size to the viewport dimensions. The visualization is built using React and ReactDOM, generating SVG elements through JSX. Key geometric parameters—such as eye offset, eye radius, and stroke width—are defined as constants, and the face is centered using an SVG group with a transform translation.

Apr 11, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

A fork of the "Let's Make a Face" example, this visualization presents a simple smiley face constructed from three SVG circles on a yellow background. A large circle with a yellow fill and black stroke forms the head, while two smaller circles represent the eyes. The code uses raw SVG elements within an HTML page, with no external JavaScript libraries, and the positions are set via explicit `cx` and `cy` attributes. The rendering is static, showing only the basic face shape without a mouth or other features.

Apr 10, 2022

Loading thumbnail…

Fork of Hello HTML

This example demonstrates the simplest possible HTML page structure, with a heading element left empty to be filled by the user. The code relies solely on standard HTML tags—`<!DOCTYPE html>`, `<html>`, `<head>`, `<title>`, and `<body>`—with no external libraries or JavaScript APIs. It presents a bare-bones document shell, illustrating the minimal markup required to render a webpage in a browser. The visualization highlights the foundational structure of web content, serving as a starting point for more complex projects.

Apr 10, 2022