NilsMar

@NilsMar·6 public vizzes

Load Data in React And D3

This example demonstrates how to load and display CSV data in a React application using D3 utilities. The app fetches a dataset of CSS named colors from a GitHub gist, then uses React state to track the loaded data and render a text summary showing the number of rows, columns, and file size. The implementation combines React hooks (useState, useEffect) with D3's csv function for asynchronous data loading, and a separate message module that uses d3.csvFormat to calculate data size.

Jan 19, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a single circle that follows the mouse cursor across an SVG canvas. The circle’s position updates in real time as the user moves the mouse, using React’s `useState` and `useCallback` hooks to manage and set the cursor coordinates. The rendering is handled through React’s SVG elements, with the mouse position captured via the `onMouseMove` event on the `<svg>` container. The code uses the React and ReactDOM libraries, with no external data source.

Jan 19, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a single yellow circle as a smiley face base using React and SVG. The code defines an `App` component that returns an SVG element with a circle positioned at the center of a 960-by-500 canvas. ReactDOM renders the component into the DOM, while commented-out code hints at a fuller face with eyes and a stroke. The circle’s size and location are computed from constant variables.

Jan 12, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of randomly generated smiley faces fills the viewport, each with a yellow circular head, black-outlined stroke, two eyes, and a curved mouth arc. The faces vary in stroke width, eye offset, eye radius, mouth width, and mouth radius, produced by a React app that maps over a `range(6*3)` array to render 18 `<Face>` components. Built with D3 v7’s `arc()` function for the mouth and SVG primitives like `<circle>` and `<path>`, the example uses React 17 and renders everything as SVG within a `FaceContainer` that translates each face to a centered position.

Dec 28, 2021

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a simple yellow smiley face centered in an SVG canvas, composed of a circular background, two eyes, and an arced mouth, all built as separate React components. The code splits components into individual files using ES6 modules, with React Fragments grouping the eyes. D3’s `arc` API generates the mouth path, while ReactDOM renders the full SVG into the page, using fixed dimensions and transform translations to position the face elements.

Dec 28, 2021

Loading thumbnail…

Fork of Hello HTML

This example presents a minimalist SVG drawing of a smiley face, composed of three circles on a 960 by 500 canvas. The markup directly constructs two eye circles and a larger yellow face circle with a black outline, using hard-coded coordinates and styles. It demonstrates the basic structure of an inline SVG embedded in an HTML page, with JavaScript comments suggesting potential for dynamic calculation but no scripting applied. The rendering relies solely on static SVG primitives within the `index.html` file.

Dec 26, 2021