pytorchgirl

@pytorchgirl·11 public vizzes

Fork of Loading and Parsing CSV Data g

This example demonstrates how to load and parse CSV data using D3 v5, displaying a summary of the CSS Named Colors dataset. The visualization shows three metrics: the file size in kilobytes, the number of rows, and the number of columns, presented in a large text format. It uses the `d3.csv` method with a Promise-based `.then()` callback to fetch the remote CSV file, then leverages `d3.csvFormat` to calculate the data’s byte length. The output is rendered into a `<pre>` element via standard DOM manipulation.

Dec 4, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file by fetching raw text and displaying basic dataset statistics. It uses the Fetch API to retrieve a CSV file containing CSS named colors from a GitHub gist, then parses it with `d3.csvParse` to convert the text into an array of objects. The code reports the file size in kilobytes, row count, and column count, displaying these metrics in a large `<pre>` element for clarity. The visualization relies on D3 v5 for parsing while handling the asynchronous text retrieval through JavaScript promises.

Dec 4, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example displays a summary of a CSV file loaded from a GitHub gist, showing the file size, row count, and column count in large text. It uses the `fetch` API to retrieve the raw text, then parses it with the `d3.csvParse` function from D3 v5. The parsed data’s `length` and `columns` properties provide the row and column totals, which are rendered into an HTML `<pre>` element via JavaScript.

Dec 4, 2021

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor across the screen, shifting its center to match the pointer’s coordinates in real time. The visualization uses React’s `useState` hook to store the mouse position and an SVG `onMouseMove` event handler to update it. The circle is rendered as an SVG element with `cx` and `cy` attributes bound to the tracked position. The page uses React 16.9.0 and ReactDOM, with the SVG filling the browser window.

Dec 4, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas that fills the browser window, updating its position in real time. The visualization demonstrates React state management with the `useState` hook, tracking mouse coordinates via an `onMouseMove` event handler on the SVG element. React and ReactDOM render the circle at the cursor's `clientX` and `clientY` positions, and the initial state places the circle at the center of the viewport before interaction begins.

Dec 4, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to fetch and parse a remote CSV file using the browser's native Fetch API. It retrieves a dataset of CSS named colors from a GitHub gist and logs the raw text content to the console. The code uses `fetch` and the `response.text()` method to handle the asynchronous request, with a commented-out alternative showing the same process in a nested promise chain. No visualization is rendered; the focus is solely on loading and inspecting the data source.

Dec 4, 2021

Loading thumbnail…

Fork of Smiley Face Part IV

This example renders a smiley face as an SVG using React components and D3’s `arc` API. A yellow circle with a black stroke forms the head, while two black circles serve as eyes and a D3-generated path creates the mouth. The code defines a `BackgroundCircle` React component and uses `ReactDOM.render` to mount the visualization, with all dimensions and positions computed as constants. The face is centered on a 960×500 canvas, and the mouth arc uses specified inner and outer radii with angular start and end points.

Dec 3, 2021

Loading thumbnail…

Fork of Smiley Face Part V

A React and D3 v5 application renders a yellow smiley face as a scalable vector graphic. The code splits the face into three reusable components—BackgroundCircle, Eyes, and Mouth—using ES6 modules and React Fragments. D3’s arc generator defines the mouth’s curved path, while ReactDOM mounts the composed SVG into the page.

Dec 3, 2021

Loading thumbnail…

Fork of Smiley face

This example renders a stylized smiley face as an SVG graphic using React and D3 version 7. The face is centered on a yellow circle with a black stroke, featuring two large eyes with white pupils, pink blush circles, and an arc-shaped mouth generated by the `d3.arc` API. All elements are positioned using computed constants for eye offsets, radii, and stroke widths, and the entire figure is grouped with a translation transform. The visualization uses declarative React components to construct the SVG elements without any external data source.

Dec 3, 2021

Loading thumbnail…

Smiley face

This example renders a classic smiley face entirely in SVG. A large yellow circle forms the head, with two smaller dark circles for eyes and a pink blush on each cheek. A curved mouth is drawn using D3’s `arc` generator with specified inner and outer radii and angular ranges. The visualization is built with React components that compute layout constants for positioning, and it relies on ReactDOM to mount the SVG into the page using D3 v7 syntax.

Dec 3, 2021

Loading thumbnail…

Fork of Smiley face

This visualization displays a stylized smiley face built from SVG shapes. It uses React to define the components and D3's `arc` generator to create the mouth path. The face is centered with yellow circular head, black stroke, two eyes, pink cheeks, and a smile. The code calculates geometric positions for features relative to the center, using D3.js version 7 and React DOM for rendering.

Dec 3, 2021