mygynt679

@mygynt679·12 public vizzes

12-visualizing data with react & d3

This visualization displays a radial burst of the CSS named colors, with each color represented as a slice in a circular layout. It loads color data from a CSV file hosted on GitHub using D3's `d3.csv` utility, then uses React to render the result as SVG paths. The code leverages D3's `d3.arc()` and `d3.pie()` functions to compute the arc paths and pie layout, while React's `useEffect` and `useState` hooks manage data loading and state. The `ReactDOM.render` call outputs the final graphic to the page.

Apr 12, 2023

Loading thumbnail…

11-Vega-Lite API Template

This visualization displays auto-mpg data from the UCI Machine Learning Repository as a scatter plot of engine displacement against horsepower, with circle size encoding vehicle weight, color encoding origin, and tooltips showing model names. It uses the vega-lite-api JavaScript API to construct the Vega-Lite specification, which is rendered with Vega and Vega-Lite libraries. The code loads CSV data via d3.csv, applies a custom configuration for axis styling and font sizes, and fits the chart to the full browser window.

Apr 12, 2023

Loading thumbnail…

10-loading data with react & d3

This example demonstrates React’s useState and useEffect hooks managing asynchronous data loading with d3.csv, fetching a CSS named colors dataset from a GitHub gist. The App component stores the parsed CSV in state and displays a summary message via the exported message function, which formats file size, row count, and column count using d3.csvFormat and data.columns. While loading, the interface shows “Loading...”, then swaps to the formatted statistics. The visualization relies on React 18 and D3 v7, with d3.csv returning a promise chain via .then(setData), rendering output as a large pre-formatted text block.

Apr 10, 2023

Loading thumbnail…

09-parsing data with d3

This example demonstrates how to parse a CSV file with D3, displaying the file size, row count, and column count of a dataset containing CSS named colors. It uses d3.csv to load the remote CSV, then computes the formatted string length in kilobytes with d3.csvFormat. The parsed data is summarized in a large HTML <pre> element. A commented-out alternative shows the same result using the Fetch API with async/await and d3.csvParse.

Apr 8, 2023

Loading thumbnail…

08-interactions with react

A React 18 application renders an SVG smiley face whose position follows the mouse. It uses the `useState` and `useCallback` hooks to track cursor coordinates from the SVG’s `onMouseMove` event, updating the circle’s `cx` and `cy` attributes. The markup is generated via JSX and mounted with `ReactDOM.render`.

Apr 8, 2023

Loading thumbnail…

06-compartmentalize complexity

This example displays a grid of 18 cartoon faces, each with a yellow circular head, two eyes, and a mouth. The faces are rendered as Scalable Vector Graphics (SVG) using React components. The code demonstrates modularity and encapsulation, with separate components for the face, eyes, mouth, and background. It uses d3's `arc` API to generate the mouth path and `range` for iteration. Each face's features are randomized, showcasing variations in stroke width, eye placement, and mouth size.

Apr 8, 2023

Loading thumbnail…

05-multiple files & es6 modules

This example renders a cartoon face using React components for each facial feature—background circle, eyes, mouth, and nose—composed inside an SVG element. The face is centered and built from separate ES6 modules, each exporting a reusable component that accepts configuration props like radius, offsets, and dimensions. It leverages React’s declarative syntax to construct the SVG markup, and the mouth shape is generated using d3’s `arc()` function to create a path with a specified inner and outer radius. All elements are positioned relative to the center using an SVG transform, and styling is kept minimal with a full-viewport layout.

Apr 8, 2023

Loading thumbnail…

04-react components & es6

This example renders a smiley face in SVG using React components and ES6 destructuring. It imports the `arc` function from d3.v7 to generate the mouth path via `mouthArc()`. The `BackgroundCircle` component receives a radius prop, while the main `App` component composes circles, a rectangle, and the arc path inside a translated group. React 18 renders the visualization into the `#root` element using `ReactDOM.render`.

Apr 8, 2023

Loading thumbnail…

03-react & d3

This example shows a yellow circle with a black stroke, which is supplemented by two eyes, a nose, and an arc-shaped mouth to form a simple face. Built with the React framework, the visualization uses SVG elements like `circle`, `path`, and `rect` to render the components. The code imports the `arc` function from the d3 library to generate the mouth's path, and it uses ReactDOM to render the composed `<App />` directly into the HTML root element.

Apr 8, 2023

Loading thumbnail…

02-react

This example shows a smiley face rendered as a static SVG composed of three circles: a yellow head with a black outline and two black eyes. It demonstrates fundamental React DOM manipulation by embedding SVG elements directly in JSX, using React 18 and ReactDOM to mount the component. The code defines variables for dimensions and offsets, then renders the circles with fixed positions and radii.

Apr 8, 2023

Loading thumbnail…

07-loading and parsing data

This example demonstrates the initial step of fetching a CSV file from a remote URL and logging its raw text to the console. It uses the `fetch` API, wrapped in an asynchronous `fetchText` function, to retrieve data from a GitHub Gist containing CSS named colors. The JavaScript code chains a `.then()` callback to output the text, preparing for future parsing. It relies on standard browser APIs without any external libraries.

Apr 8, 2023

Loading thumbnail…

01-make a face

A smiling face is drawn using three SVG circles: a large yellow head with a black outline and two smaller black eyes. The example demonstrates static SVG rendering in React, with the face composed directly in the JSX of the `index.html` file. It uses no external libraries beyond the basic HTML and CSS setup, relying on SVG's built-in shape elements and attributes like `cx`, `cy`, `r`, `fill`, and `stroke`. The code shows a simple, declarative approach to creating vector graphics without any interaction or data binding.

Apr 8, 2023