singhjy

@singhjy·14 public vizzes

Fork of Rendering DATA with React & D3

This example shows a horizontal bar chart of United Nations population data for 2020, with each country represented as a rectangle whose width corresponds to its population. The visualization uses React state management to load and store the dataset via `useState` and `useEffect`, while D3 v6 utilities such as `csv`, `scaleBand`, `scaleLinear`, and `max` handle data parsing and scaling. The bars are rendered as SVG `<rect>` elements, mapped from the data array using React's declarative JSX syntax. A loading state displays "Loading.." until the data arrives.

Mar 9, 2021

Loading thumbnail…

Rendering DATA with React & D3

This example renders the CSS named colors as a pie chart using React and D3. It loads color data from a CSV file via `d3.csv`, then uses `d3.pie` and `d3.arc` to compute the pie slices, which are drawn as SVG `<path>` elements with the hex values as fills. The chart is centered in a 960×500 SVG canvas, with React state managing the asynchronous data loading and rendering the loading message until the data arrives.

Mar 9, 2021

Loading thumbnail…

Rendering DATA with React

This example shows the CSS Named Colors dataset rendered as a stacked sequence of 960-pixel-wide horizontal strips, one per color, with each strip’s background fill set directly from its RGB hex value. Using React’s `useState` and `useEffect`, the app fetches the CSV via `d3.csv`, then maps each row to a `<div>` element whose inline style sets the background color. The code relies on React 16.9, ReactDOM, and d3.v6, with no SVG or canvas—only plain HTML `<div>` elements. A loading state displays “Loading..” until the data arrives.

Mar 7, 2021

Loading thumbnail…

Vega-Lite API Template

This interactive visualization uses the Vega-Lite API to render a scatter plot of weekly temperature readings from San Francisco. The visualization maps timestamp to the x-axis and temperature to the y-axis, with color encoding timestamps and tooltips showing temperature values. Built with d3.csv for data loading, it employs vega-lite-api’s vl object to construct circle marks with configurable styling, drawing directly to an SVG canvas sized to the window. The underlying data originates from the UCI Machine Learning Repository’s Auto MPG dataset.

Mar 7, 2021

Loading thumbnail…

Loading Data with React & D3

This example shows how React state and D3 utilities can work together to load and display CSV data. The page fetches a CSS Named Colors dataset from a GitHub gist and uses the d3 `csv` function to parse it, storing the result in React state via a `useEffect` hook. The visualization output is a simple SVG-based text summary rendered inside a `<pre>` element, displaying the total file size in kilobytes, the number of rows, and the number of columns. The code relies on React 16.9.0, ReactDOM, and D3 v6.5.0, with all rendering handled through SVG.

Mar 7, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3.js v6, displaying the dataset’s size, row count, and column count in a large text block. It uses `d3.csv` to fetch the remote CSSNamedColors.csv file and returns a parsed array, then `d3.csvFormat` to compute the data’s byte length. The code also shows commented alternatives using `fetch` and `async/await` with `d3.csvParse`.

Mar 6, 2021

Loading thumbnail…

Mouth Follower

A moving circle tracks the user's mouse position across an SVG canvas. The React component uses the `useState` and `useCallback` hooks to manage and update the circle's coordinates in response to the `onMouseMove` event. The circle renders with a radius of 30 pixels within a 960 by 500 pixel viewport, while the browser's native `clientX` and `clientY` properties supply the cursor location for real-time repositioning.

Mar 6, 2021

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG by rendering a single geometric shape: a circle with a radius of 50 pixels. The circle is placed at coordinates (50, 50) within a 960-by-500-pixel SVG canvas, showing the basic syntax for positioning and sizing elements. The code uses plain inline SVG markup without additional JavaScript libraries, relying on core attributes like `cx`, `cy`, and `r` to define the circle’s geometry. The empty `<circle>` element highlights how SVG shapes are structured, with no fill or stroke specified, leaving the default black rendering.

Mar 6, 2021

Loading thumbnail…

Mouse Follower

A yellow smiley face rendered as an SVG with React occupies the center of the viewport, with a black outline and two static eyes. The code uses React 16.9 and ReactDOM to create circles with fixed positions and radii, including a face, eyes, and an implicit mouth area. It does not respond to mouse movement despite the title, as no event listeners or state updates are present.

Mar 5, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This gallery example shows a smiling face drawn with two black eyes and a yellow circular head outlined in black on a white background. It uses React and ReactDOM to render static SVG elements, including the main head circle and two eye circles, with all positions calculated from a central coordinate system. The code explicitly sets the face’s dimensions and offsets, using the React `App` component to return the SVG markup. The rendering approach relies on React’s virtual DOM to display the resulting graphic.

Mar 5, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor as it moves across the screen. The visualization uses React to render an SVG face with two static eyes and an arc-based mouth, while the mouse position is tracked to position a separate circle element. The code imports `arc` from d3 for generating the mouth path and relies on React's state management to update the circle's coordinates on mouse events.

Mar 5, 2021

Loading thumbnail…

Smiley Face Part 2

A yellow smiley face drawn with SVG scales to fit the viewport, with its facial features positioned relative to the canvas center. The example demonstrates React integration with D3, using the `arc()` generator from `d3` to create the mouth path, while circles render the eyes and face outline. The code combines React components for structure and D3's geometric utilities for path calculations, with the face centered via a transformed group element.

Mar 5, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial step of loading a CSV file from a remote URL and printing its raw contents to the browser console. The visualization shows no graphical output; instead, it focuses on the data acquisition process, using the `fetch` API to retrieve a text file from a GitHub Gist containing CSS named color data. The code defines an asynchronous helper function, `fetchText`, which calls `response.text()` to parse the fetched response, and then logs the entire CSV string to the console for inspection.

Mar 4, 2021

Loading thumbnail…

Smiley Face Part 1

A smiling face rendered as a yellow circle with black outlines, featuring two eyes and a curved mouth, is drawn using SVG within a React application. The composite `Face` component assembles `BackgroundCircle`, `Eyes`, and `Mouth` elements inside a translated group. The mouth is generated with the D3 `arc` function, while the position and sizes of features are parameterized through props. The final SVG is mounted into the DOM using ReactDOM.

Mar 2, 2021