DeaxNG

@DeaxNG·10 public vizzes

Fork of Rendering Data with React & D3

This example renders a horizontal bar chart of UN population data for 2020 using React and D3 v5. It loads the CSV file with `d3.csv`, parses the population column, and stores the result in React state via the `useState` and `useEffect` hooks. The visualization uses `scaleBand` and `scaleLinear` to map countries and populations to SVG `rect` elements, with React’s declarative rendering driving the SVG output. While loading, it displays a large “Loading…” message before the chart appears.

Dec 3, 2021

Loading thumbnail…

Rendering Data with React & D3

A pie chart displays all CSS named colors as equal-sized slices, each filled with its corresponding RGB hex value from a CSV dataset loaded via D3's `csv` utility. The React component uses `useState` and `useEffect` to fetch and store the data, then renders the SVG paths with D3's `pie` and `arc` generators. React's declarative JSX maps each slice to a `<path>` element, while D3 handles the geometric calculations for the circular layout.

Dec 2, 2021

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes automobile performance data from the UCI Machine Learning Repository’s Auto MPG dataset, mapping horsepower against displacement while encoding origin by color and mpg by point size. Built with the Vega-Lite API, the visualization uses `vl.markCircle` and `vl.encode` to define visual channels, with `d3.csv` loading the remote dataset. The chart dynamically fits its container, applies custom axis and label styling via the `config` object, and integrates Vega Tooltip for hover interactions.

Dec 2, 2021

Loading thumbnail…

Loading csv data with react and D3

This example demonstrates how to load and display CSV data within a React application using D3 utilities. The app fetches a dataset of CSS named colors from a GitHub gist and shows a text summary of its size, row count, and column count. It uses React’s `useState` and `useEffect` hooks to manage asynchronous state updates, while D3’s `csv` function handles data loading. The rendered output is a simple `<pre>` element that displays the computed metrics, with a “Loading…” message shown before the data arrives.

Nov 19, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data, reporting the file size, row count, and column count of the CSS Named Colors dataset. It uses D3 v5's `d3.csv` method to fetch the remote CSV file, then applies `d3.csvFormat` to calculate the data size in kilobytes. A commented-out alternative shows the same workflow using the Fetch API with async/await and `d3.csvParse`, highlighting different approaches to asynchronous data loading in a React-less HTML page.

Nov 19, 2021

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor within an SVG canvas. The visualization uses React's `useState` to track cursor coordinates and updates the circle's `cx` and `cy` attributes on `onMouseMove`. The SVG is rendered via ReactDOM, with D3.js loaded but unused in the visible interaction.

Nov 19, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a full-screen smiley face rendered as a React SVG component, with a yellow circle face, two black eyes, and a gap where a mouth would be. The code uses React 16.9 and ReactDOM to mount the SVG to the page, sizing the face dynamically based on `window.innerWidth` and `window.innerHeight`. It draws the face using SVG `<circle>` elements with transformations, positioning the eyes via the `cx` and `cy` attributes and an SVG `<g>` wrapper. The rendering approach relies purely on vector shapes with explicit stroke and fill properties.

Nov 19, 2021

Loading thumbnail…

Fork of Let's Make a Face Part II (React)

This example shows a simple cartoon face composed of a yellow circle head with two eyes, rendered to fill the browser window. The face is drawn as SVG elements created through React components, with positions calculated from the window dimensions. The code uses React and ReactDOM to render the SVG, with circle elements for the head, eyes, and a mouth that is commented out in the HTML. The face is centered using a translation transform, and sizes adjust based on window height.

Nov 19, 2021

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates the minimal setup required to load and parse CSV data within a React application, displaying a placeholder message. Built with React and D3, the code uses `d3.csv` to fetch and parse external data, though no actual data processing or visualization is implemented yet. The page structure is defined in HTML with CSS styling, while the JavaScript remains empty, highlighting the foundational steps before data is bound to visual elements. The example serves as a starting point for integrating D3 data loading into a React-based visualization workflow.

Nov 17, 2021

Loading thumbnail…

Smiley Face Pt 1

A React component composes an SVG smiley face from a yellow circle stroke, two black eyes, and a rounded mouth path. The face is centered within a fixed 960 by 500 viewport using an SVG group translation. The mouth is generated with the `d3.arc()` API, using inner and outer radii and a half-circle angle range, while the background and eyes are plain SVG circles. The code relies on React 17 and D3 v7, with all geometry defined by reusable, parameterized components.

Nov 15, 2021