jeffmesie

@jeffmesie·11 public vizzes

Loading and Parsing CSV Data 1

This example demonstrates the basic process of loading and parsing a CSV file using D3.js. It fetches a remote CSV file containing CSS named colors from a GitHub repository, then displays the file size, row count, and column count in a large `<pre>` element. The code uses the `d3.csv()` method to asynchronously load and parse the data, and `d3.csvFormat()` to estimate the original file size. An alternative approach using the Fetch API and `d3.csvParse()` is included as a commented-out section, showing both methods for handling CSV data.

Aug 26, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example shows the size and structure of a CSV dataset by displaying its file size in kilobytes, row count, and column count in a large HTML `<pre>` element. It fetches CSS named colors data from a remote gist URL using the `d3.csv` method, which returns a promise and parses the response. The code then uses `d3.csvFormat` to calculate the data’s byte length and accesses the parsed object’s `length` and `columns` properties to generate the summary. D3 v5 and React are present in the project, but the visible rendering relies solely on D3’s CSV parsing and formatting APIs.

Aug 26, 2021

Loading thumbnail…

Loading data with React & d3

This example demonstrates how to load and manage data in a React application using d3 utilities, with React state tracking the loaded dataset. The visualization renders an empty SVG container (960 by 500 pixels) that will display the data once fetched, using `useState` and `useCallback` hooks to handle asynchronous data loading. The code imports React and ReactDOM directly via UMD bundles from unpkg, along with the React 16.9.0 production build, and uses d3’s data-loading functions to populate the state with the dataset. The app component returns a placeholder for the visualization, with the data variable ready to be passed to d3 for rendering.

Aug 26, 2021

Loading thumbnail…

Mouse Follower co -ord console

This example shows a simple SVG circle centered in a 960 by 500 viewport, with a console that logs the mouse’s coordinates whenever the cursor moves over the graphic. The circle itself does not move; instead, the demonstration focuses on capturing pointer position. Built with React 16.9, the app uses an `onMouseMove` event handler on the `<svg>` element to extract `clientX` and `clientY` values and print them to the browser’s dev console. The rendering relies on React’s virtual DOM and SVG elements, with no additional data sources.

Aug 23, 2021

Loading thumbnail…

Mouse Follower (JM copy)

This example shows a simple interactive visualization: a red circle echoes the user’s mouse position within an SVG canvas. The circle responds in real time, maintaining its center exactly where the cursor moves over the 960×500 display. Built with React, the app uses the `useState` hook to store the cursor’s coordinates and a `useCallback` handler to update them on each mouse event. Mouse movement data comes from the `onMouseMove` event, which captures the `clientX` and `clientY` properties.

Aug 23, 2021

Loading thumbnail…

Mouse Follower

A circle remains fixed at the center of an SVG while React tracks the mouse position and updates the component's state. The example shows a simple interactive visualization where the cursor's coordinates are captured through the `onMouseMove` event, rendering a static shape rather than moving the circle itself. Using React 16.9 with hooks like `useState` and `useCallback`, it demonstrates a minimal state-driven component structure in ReactDOM, rendering SVG elements with hardcoded dimensions (960×500) and a circle of radius 30 pixels.

Aug 23, 2021

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of randomly varied smiley faces is rendered, each face composed of a yellow background circle, two eyes, and an arc-shaped mouth. The faces are generated from a fixed set of React components, with properties like eye offset, eye radius, and mouth width randomized per instance using JavaScript's `Math.random()`. The visualization leverages React for component-based rendering and D3's `arc` API to construct the mouth paths, all displayed as SVG elements within a configured viewport.

Aug 19, 2021

Loading thumbnail…

Smiley Face Part V

A grid of 18 randomly varied smiley faces fills the screen, each built from reusable React components for the background circle, eyes, and mouth. The faces are rendered as SVG shapes, with random values controlling eye offset, eye radius, mouth width, and mouth radius. The code uses React 17 for component composition, D3 v7's `arc` function to generate the mouth path, and maps over a D3 `range` array to create the faces.

Aug 19, 2021

Loading thumbnail…

Smiley Face Part 1

This example uses React with D3 v7 to construct a classic smiley face from SVG shapes. It renders a yellow circle with a black stroke as the background, two smaller circles for eyes, and a mouth drawn using D3's `arc` generator with specified start and end angles. All elements are positioned relative to a central transform group, demonstrating how React components can encapsulate D3 shape functions for declarative visualization.

Aug 13, 2021

Loading thumbnail…

Tweak Smiley Face

A stylized smiley face is rendered as an SVG graphic, centered on a yellow circle with black stroke. The face includes two eyes, white iris highlights, and a red triangular nose, all composed with React elements. A mouth is drawn using D3's `arc` generator, while D3's arc is also used to calculate the face's radius. The code demonstrates integration of React for component structure and D3 for geometry, producing a static, tweakable illustration.

Aug 13, 2021

Loading thumbnail…

Fork of Smiley Face D3 React

This example renders a smiley face using React and D3, displayed as an SVG graphic. The face is constructed from a yellow circle with a black stroke, two smaller circles for eyes, and a mouth drawn as an arc using D3's `arc()` function with specified inner and outer radii and angles. The SVG elements are positioned within a `<g>` transform that centers the drawing at coordinates (480, 250), while the eye and mouth offsets are calculated relative to that center. The code uses React's `ReactDOM.render` to mount the component to the DOM, and it defines all dimensions as constants for easy adjustment.

Aug 9, 2021