jasonamey

@jasonamey·16 public vizzes

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, where each color is represented by a slice of a pie chart. It loads color data from a CSV file using D3's `csv` utility, then computes the arc paths with `d3.pie` and `d3.arc`. React handles rendering the SVG paths, while D3 manages the data parsing and geometry. The final output is a colorful circular layout that displays the full spectrum of named web colors.

Sep 22, 2023

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a simple bar chart, with no axes, rendered using SVG in a React application. The code fetches the United Nations World Population Prospects 2019 dataset via the `csv` function from d3.v5, then builds the bars with `scaleBand` and `scaleLinear`. It also draws tick marks and labels using d3’s `ticks()` and scale domains, though no axis components are created, keeping the visualization deliberately minimal.

Sep 15, 2023

Loading thumbnail…

Fork of Pathetic Bar Chart

A React application renders the top 10 most populous countries from the UN World Population Prospects 2019 dataset as a simple bar chart with no axes. The bars are drawn as SVG rectangles, with country names on the vertical scale and population values mapped to horizontal widths. Using `d3.csv` for data loading, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` with `d3.max` for the continuous x-axis, the visualization displays raw population data without additional chart furniture, keeping the presentation deliberately minimal.

Sep 15, 2023

Loading thumbnail…

Fork of Axes with React & D3

This example displays the top 10 most populous countries as horizontal bars, with axes labeled using D3’s scaleBand and scaleLinear. React manages the component state and lifecycle, fetching the United Nations population CSV via d3.csv, while D3’s xScale.ticks and yScale.domain generate the gridlines and tick labels. The rendering uses SVG elements (rect and text) positioned within a transformed group.

Sep 15, 2023

Loading thumbnail…

Fork of Rendering Data with React & D3

This example loads UN population data from a CSV file using D3’s `csv` utility and displays it as a series of blue rectangles in an SVG, with each rectangle’s height proportional to the data row index. The visualization is built with React, which conditionally renders a loading message before mapping the data to `<rect>` elements. The code includes commented-out logic for computing a radial burst using D3’s `pie` and `arc` functions, though the active rendering uses a simple bar-like layout.

Sep 14, 2023

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to load and display CSS named color data from a CSV file using D3 utilities within a React application. The code initializes an empty SVG canvas and fetches the dataset via `d3.csv`, storing the result in React state with `useState` and `useEffect`. While loading, it shows a text placeholder; once the data arrives, it logs the parsed rows to the console. The SVG rendering is empty, though a commented-out mapping hints at potential color bars. The example uses `ReactDOM.render`, hooks like `useCallback`, and D3’s `csv` parsing.

Sep 14, 2023

Loading thumbnail…

Fork of Rendering Data with React & D3

A radial burst of CSS named colors is rendered as an SVG, with each color represented by a pie slice whose fill matches its RGB hex value. The example loads the data from a remote CSV using D3's `csv` utility, then uses React and the `d3.pie` layout to compute the arcs, which are drawn with `d3.arc`. The code relies on React's `useState` and `useEffect` hooks to fetch and set the data, and `ReactDOM.render` to mount the SVG to the page, demonstrating a clean integration of D3's geometry utilities with React's component model.

Sep 14, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car model as a circle. It shows miles per gallon against horsepower, with the circle’s color encoding the country of origin and its size corresponding to vehicle weight. Built using the Vega-Lite API, the visualization is configured through `vl.markCircle` and `vl.encode`, while data is fetched asynchronously via `d3.csv` from a Gist URL. The rendering uses Vega-Lite’s SVG renderer with an autosize fit, and a custom tooltip handler and configuration object define the visual styling.

Sep 13, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays the size and structure of a CSS Named Colors CSV dataset by rendering three statistics—kilobytes, row count, and column count—in a large monospace font. Using D3 v5, the code loads the remote CSV file via `d3.csv()` and formats the output with `d3.csvFormat()`. It also includes commented alternatives using the Fetch API with `async/await` and `d3.csvParse()`, alongside an older nested-promise pattern, to illustrate different parsing approaches. The visualization itself is minimal, focusing on the data-loading process rather than graphical representation.

Sep 12, 2023

Loading thumbnail…

Fork of Mouse Follower

A React component renders an interactive SVG visualization that follows the mouse cursor with a circle. Using the `useState` and `useCallback` hooks, it tracks `clientX` and `clientY` coordinates from SVG `onMouseMove` events, updating the circle’s `cx` and `cy` attributes. The circle has a fixed radius of 50 pixels within a 960×500 viewport, with its initial position at the center. The code loads React and ReactDOM from CDN, demonstrating a simple state-driven rendering loop without external data sources.

Sep 12, 2023

Loading thumbnail…

Fork of Mouse Follower

This React visualization displays a single circle that follows the mouse cursor across an SVG canvas. The application uses React hooks (`useState` and `useCallback`) to track the pointer position and re-render the circle’s coordinates on every mouse movement. The `onMouseMove` event handler captures `clientX` and `clientY`, updating the circle’s `cx` and `cy` attributes. Rendering is handled by ReactDOM, with the SVG elements defined directly in JSX and styled via an external stylesheet.

Sep 12, 2023

Loading thumbnail…

Fork of Smiley Face Part V

This example demonstrates a modular React application that renders a smiley face using SVG. The face is composed of separate components for the background circle, eyes, and mouth, which are positioned using constants. The code imports D3’s `arc` function to generate the mouth’s path, and uses React Fragments to group the eyes. The visualization is built with D3 v5 and React, displaying data from a remote CSV file that is fetched and logged.

Sep 12, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

Sep 12, 2023

Loading thumbnail…

Fork of Smiley Face Part IV

A grid of randomly generated smiley faces uses React components composed from D3 shape generators and SVG primitives. Each face renders a yellow background circle, two eyes, and a mouth arc created with `d3.arc()`, with randomized radii and offsets for each feature. The `FaceContainer` component produces the SVG output while `range()` from D3 generates the array of faces. All styling and layout values are passed as React props, re-rendering the composition on each page load.

Sep 12, 2023

Loading thumbnail…

Fork of React Starter

This example shows a simple, smiley-face drawing rendered with React and SVG. The code creates a yellow circle with a black outline, two eyes, and a mouth, all positioned using coordinate variables. It leverages D3’s `arc()` function to generate the mouth path, while React’s `createRoot` manages the component tree. The visualization is static, with dimensions set to the browser window size via `window.innerWidth` and `window.innerHeight`.

Sep 11, 2023

Loading thumbnail…

Fork of Hello HTML

This example displays a deliberately bare HTML page with an empty body, serving as a minimal starting point for web-based visualization work. It embeds a YouTube video as its primary content, referenced directly in the README, while the `index.html` file contains only the basic document structure and a title. The code does not employ any JavaScript libraries or data APIs, relying solely on static HTML markup with no interactive or rendering functionality. It functions as a foundational template rather than a working visualization, highlighting the simplest possible web page setup.

Sep 11, 2023