Jason Summercamp

@fullstacc·6 public vizzes

Fork of React & D3 Starter

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis. The visualization is built with React 18 and D3 v7, using a decoupled pattern where the `VizWrapper` component manages the SVG lifecycle while the `viz` function handles D3 scales, axes, and circle rendering. Data loading occurs through a custom `useData` hook that parses the CSV file, and the chart renders responsive to the full browser window. The example demonstrates scalable integration of React and D3 for real-world projects.

Jun 14, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the basic mechanics of loading and parsing CSV data in a web browser, displaying the file size, row count, and column count of the CSS Named Colors dataset from a GitHub gist. The primary implementation uses D3 v5’s `d3.csv` method with a promise chain, while commented-out alternatives show the same task using `fetch` with `async`/`await` and `d3.csvParse`, plus a nested promise “pyramid of doom” pattern. The rendered output is plain text in a large `<pre>` element, with a React-based counterpart provided in `index.js` using the `useEffect` hook to load data asynchronously.

Jun 14, 2022

Loading thumbnail…

Fork of React & D3 Starter

This example loads a CSV file of Iris flower measurements and displays a message summarizing the loaded data's size, row count, and column count. The application uses React's `useState` and `useEffect` hooks to manage asynchronous data loading, and D3's `d3.csv` utility fetches and parses the external CSV file. The visualization renders as SVG, with code showing a scatter plot setup via `VizWrapper` and `viz.js`, though the primary output in this fork focuses on the textual data summary rather than the chart itself.

Jun 13, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example loads a CSV file from a remote URL, parses it, and logs the resulting data to the browser’s console. It demonstrates the `fetch` API to retrieve the text and D3’s `csvParse` function to convert the raw text into an array of JavaScript objects. The page itself renders only a static title, so the primary output is visible in the developer console rather than on the canvas.

Jun 13, 2022

Loading thumbnail…

Fork of Hello HTML

A React application renders a bare SVG canvas, but the SVG contains only commented-out circles, so the visible output is an empty yellow-tinted page with a black stroke-width reference. The code imports React and ReactDOM, logs to the console, and defines a `Backgroundcircle` component that returns a circle element with a yellow fill, though it is never invoked. The `App` component sets an SVG width and height but renders no visible shapes. The example demonstrates a minimal React-based SVG setup using React 18.1.0 UMD builds, with the actual visualization left unimplemented.

Jun 13, 2022

Loading thumbnail…

Fork of Fork of Hello HTML

This example displays a simple smiley face rendered as SVG, composed of a yellow circle background, two black eye circles, and a mouth arc drawn with D3’s `arc` generator. The face is built using React components, with the `BackgroundCircle` reusable component and the `App` component setting SVG dimensions and transforms. D3 v7 supplies the arc path, while React 18 handles the DOM rendering. The code defines fixed geometry constants for positioning and sizing, and the eyes are offset horizontally and vertically around the center point.

Jun 10, 2022