Skip to main content
Log in
R

Rob-Colon

@Rob-Colon·15 public vizzes

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data using D3.js v5 and React, displaying statistics about the CSS Named Colors dataset from GitHub. The visualization shows a simple text output with the data size in kilobytes, row count, and column count. It uses the `d3.csv` method with promises to fetch and parse the remote CSV file, alongside commented alternative approaches using `fetch` with `async/await` and `d3.csvParse`. The primary implementation leverages `d3.csvFormat` and `d3.csv` to handle data loading in a clean, sequential manner.

Apr 7, 2021
Loading thumbnail…

mouse follolwer

A yellow circle fills most of the browser window, centered on the screen, with a thick black border and two smaller solid circles positioned as eyes relative to the center. Built with React and rendered as SVG, the code defines a static face using fixed offsets and radii, including a mouth radius, though no mouth is actually drawn. The component reacts to the viewport size, dynamically calculating the circle’s radius from the window height, but it does not track or respond to the mouse.

Apr 7, 2021
Loading thumbnail…

Fork of Smiley Face Part II

This interactive web page renders a responsive smiley face that fills the entire browser window. Built with React and rendered as SVG, the visualization uses two eye circles and a large yellow head with a black outline, all positioned relative to the window’s center. The code calculates dimensions dynamically using `window.innerWidth` and `window.innerHeight`, and ReactDOM renders the SVG directly into the page’s root element.

Apr 7, 2021
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data using D3.js v5 and React, displaying statistics about the CSS Named Colors dataset from GitHub. The visualization shows a simple text output with the data size in kilobytes, row count, and column count. It uses the `d3.csv` method with promises to fetch and parse the remote CSV file, alongside commented alternative approaches using `fetch` with `async/await` and `d3.csvParse`. The primary implementation leverages `d3.csvFormat` and `d3.csv` to handle data loading in a clean, sequential manner.

Apr 7, 2021
Loading thumbnail…

Fork of Smiley Face Part V

A yellow smiley face is rendered as an SVG using React components for the background circle, eyes, and mouth. The face is centered within a 960 by 500 viewport, with the mouth drawn using d3’s `arc()` generator. The React code is split into separate ES6 modules and uses React Fragments to group the eye elements. d3.v5 provides the arc path, while React 16.9 handles the component structure and SVG rendering.

Apr 6, 2021
Loading thumbnail…

Fork of Smiley Face Part V

This example shows a stylized smiley face rendered as an SVG, composed of a yellow circle background, two black eyes, and an arc-shaped mouth. The face is built from modular React components, including `BackgroundCircle`, `Eyes`, and `Mouth`, which are split into separate ES6 module files. The `Mouth` component uses the `d3.arc()` API to generate a path for the smile, while React Fragments allow the `Eyes` component to return multiple sibling circles without extra DOM nodes. All elements are positioned and scaled through React props, with the final SVG drawn inside a React-rendered `<g>` container.

Apr 6, 2021
Loading thumbnail…

Fork of Smiley Face Part III

A smiley face is drawn using React and D3, rendered as an SVG. The face consists of a yellow circle for the head, two black circles for the eyes, and a dark arc for the mouth. The code uses D3's `arc` function to define the mouth's path, combining it with React's `ReactDOM.render` to output the SVG. Positions and dimensions are set via constants, with the head sized relative to the canvas height.

Apr 6, 2021
Loading thumbnail…

Fork of Smiley Face Part III

A smiley face is drawn using React and D3, rendered as an SVG. The face consists of a yellow circle for the head, two black circles for the eyes, and a dark arc for the mouth. The code uses D3's `arc` function to define the mouth's path, combining it with React's `ReactDOM.render` to output the SVG. Positions and dimensions are set via constants, with the head sized relative to the canvas height.

Apr 6, 2021
Loading thumbnail…

Fork of Smiley Face Part III

A smiley face is drawn using React and D3, rendered as an SVG. The face consists of a yellow circle for the head, two black circles for the eyes, and a dark arc for the mouth. The code uses D3's `arc` function to define the mouth's path, combining it with React's `ReactDOM.render` to output the SVG. Positions and dimensions are set via constants, with the head sized relative to the canvas height.

Mar 30, 2021
Loading thumbnail…

Fork of Smiley Face Part III

A smiley face is drawn using React and D3, rendered as an SVG. The face consists of a yellow circle for the head, two black circles for the eyes, and a dark arc for the mouth. The code uses D3's `arc` function to define the mouth's path, combining it with React's `ReactDOM.render` to output the SVG. Positions and dimensions are set via constants, with the head sized relative to the canvas height.

Mar 30, 2021
Loading thumbnail…

Fork of Smiley Face Part II

This is a React-based smiley face visualization built with D3.js. It renders SVG circles for the head and eyes, and uses D3’s `arc` function to construct a semi-circular mouth path. The image adapts to the browser window’s dimensions, centering the face and scaling its radius relative to the viewport height. The code uses D3 version 6.6.2 and React 16.9, drawing the face with yellow fill, black stroke, and fixed offsets for the eyes and mouth.

Mar 30, 2021
Loading thumbnail…

Fork of Smiley Face Part III

A smiley face is drawn using React and D3, rendered as an SVG. The face consists of a yellow circle for the head, two black circles for the eyes, and a dark arc for the mouth. The code uses D3's `arc` function to define the mouth's path, combining it with React's `ReactDOM.render` to output the SVG. Positions and dimensions are set via constants, with the head sized relative to the canvas height.

Mar 30, 2021
Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered across the full browser window, built with React components and SVG elements. The face is centered and composed of a large circle for the head and two smaller circles for the eyes, all positioned using D3’s `arc` import and React’s JSX syntax. The code uses `ReactDOM.render` to mount the component, while D3 v6 provides the `arc` function, though the actual drawing relies on SVG circle elements. The implementation dynamically sizes the face based on `window.innerWidth` and `window.innerHeight`, with hardcoded offsets for eye placement.

Mar 16, 2021
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows the construction of a smiley face, starting with a yellow circular head and two black eyes, all rendered as SVG shapes. The face is built using React components, where the head’s radius and eye positions are computed from a fixed width and height. The code relies on React’s `ReactDOM.render` to mount the component, with the SVG elements positioned using center-based coordinates. It uses hardcoded values for the eye offset and radius, leaving the mouth unfinished as a work-in-progress.

Mar 16, 2021
Loading thumbnail…

smiley face part 1

This example shows a simple smiley face constructed from three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes, all centered on a 960 by 500 canvas. The drawing uses the Scalable Vector Graphics (SVG) API directly within an HTML page, with the `circle` element specifying `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The code does not include a mouth, leaving the smiley face incomplete, and the page’s body margin is set to zero to ensure the SVG fills the viewport.

Mar 16, 2021