isavedalex

@isavedalex·11 public vizzes

Axis with React D3

This example shows a horizontal bar chart of the top 10 countries by population in 2020, with labeled axes. It uses React hooks (`useState`, `useEffect`) to load CSV data via `d3.csv`, then renders SVG elements through JSX. The y-axis uses `d3.scaleBand` for country categories, while the x-axis uses `d3.scaleLinear` with tick marks generated by `xScale.ticks()` and grid lines drawn as `<line>` elements. Data is sourced from a GitHub-hosted UN population dataset.

Jul 31, 2021

Loading thumbnail…

The Margin Convention

This visualization displays the populations of the ten most populous countries in 2020 as horizontal bars, sorted by country name. It loads CSV data from a GitHub Gist using D3’s `csv` utility, then renders the chart with React as SVG elements. D3’s `scaleBand` and `scaleLinear` position and size the rectangles within a fixed margin-defined plotting area, emphasizing the chart’s interior space.

Jul 31, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a horizontal bar chart of the ten most populous countries in 2020, using a bar width proportional to each country’s population. It loads CSV data from a GitHub gist via `d3.csv`, then maps each row’s population string to a number. The React component uses `useState` and `useEffect` to fetch and store the data, while `d3.scaleBand` and `d3.scaleLinear` position and size the rectangles. React renders the final SVG, with each country’s name on the y-axis and its population scaled along the x-axis.

Jul 25, 2021

Loading thumbnail…

Rendering Data with React & D3

A radial burst of CSS named colors visualizes a color palette imported from a CSV file via D3’s `csv` utility. The React app uses a `pie` layout to assign equal angles to each color and `arc` to generate the SVG path for each wedge. Colors fill each segment based on their RGB hex value, producing a dense, circular composition that highlights the range of named color data.

Jul 25, 2021

Loading thumbnail…

Rendering Data with React

This example displays the full list of CSS named colors as horizontal bars stacked vertically, with each bar’s background color set to the corresponding hex value from the dataset. The visualization first shows a “Loading…” message until the data arrives via D3’s `csv` utility, which fetches a CSV file from a GitHub gist. React’s `useState` and `useEffect` hooks manage the asynchronous data loading, and `ReactDOM.render` mounts the component to render each color row as a simple `div` with inline styling.

Jul 25, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the size and structure of a CSS named colors dataset by displaying its formatted size, row count, and column count as plain text. It loads the CSV file from a GitHub gist using D3’s `d3.csv` promise API, then formats the data back to CSV with `d3.csvFormat` to compute its kilobyte size. React state is not directly used in the rendering, but the page updates the DOM via `document.getElementById`. The example parses the remote CSV and reports three summary statistics in a large monospaced layout.

Jul 25, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes Auto MPG data from the UCI Machine Learning Repository, plotting each car as a semi-transparent circle positioned by origin (categorical) and horsepower (quantitative), with tooltips revealing the vehicle name. The visualization is built entirely with the Vega-Lite API, leveraging `vl.markCircle`, `vl.x().fieldN`, `vl.y().fieldQ`, and `vl.tooltip` to define the encodings. Data is loaded asynchronously via D3’s `csv` function, while Vega, Vega-Lite, and the Vega Tooltip handler manage rendering and interaction. The configuration customizes axis styles and label colors to improve readability against a dark background.

Jun 10, 2021

Loading thumbnail…

Loading Data with Reach & D3

This example demonstrates how to load and summarize a CSV dataset in a React application using D3 utilities. It displays the file size, row count, and column count from a CSS named colors dataset loaded via `d3.csv`. The app uses React hooks (`useState`, `useEffect`) to manage asynchronous data loading and render a loading message until the data arrives, with the result formatted using `d3.csvFormat`. The visualization relies on React 16.9 and D3 v6, with data fetched from a GitHub gist URL.

Jun 7, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a blank SVG canvas. The visualization uses React state to track the cursor's coordinates and updates the circle's position on every mouse move event. It renders via SVG, with React's `useState` hook storing the x and y position and `useCallback` handling the move event listener. The circle is drawn with a fixed radius of 30 pixels, and the mouse position is initialized to the center of the 960 by 500 pixel viewport.

Jun 7, 2021

Loading thumbnail…

Smiley Face Pt1

Rendered in SVG via React, this example uses reusable components to assemble a grid of twelve smiley faces, each with randomized eye and mouth sizes. The `Face` component composes separate components for the background circle, eyes, and mouth, with a centered transformation from `FaceContainer`. D3's `arc` function generates the mouth path, while `range` from D3 creates the array used to map the faces within the React app.

May 16, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal web page that displays the text "Hello HTML" in large, centered type. It uses plain HTML and CSS to structure and style the content, with JavaScript that logs a message to the browser’s developer console. The page applies an inline `<style>` block setting the body’s font size and text alignment, and a `<script>` tag for the `console.log` call. It serves as a bare-bones foundation for adding other visualization or application code.

May 3, 2021