TylerSaikaleyTheriault

@TylerSaikaleyTheriault·9 public vizzes

Fork of Stylized Scatter Plot

This example depicts the classic Iris dataset as a scatter plot, mapping petal length on the x-axis against sepal width on the y-axis. Built with React and rendered as SVG, it uses D3.js functions like `scaleLinear` and `extent` for scaling and data ranges, alongside custom SVG components for axes and circular marks. The plot features a clean, stylized design with Poppins typography.

May 30, 2022

Loading thumbnail…

Fork of Refactored Bar Chart

This fork of the refactored bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset, showing population values for each nation. The visualization uses React to render SVG elements, with D3 v5’s `scaleBand` for the categorical country axis and `scaleLinear` for the population axis. It includes axis components (`AxisBottom` and `AxisLeft`) that generate tick marks and labels, while `Marks` creates rectangles sized by each country’s population. The chart explicitly lacks axis labels or a title, presenting a minimal, bare-bones bar representation.

May 30, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a horizontal bar chart of the top 10 countries by 2020 population, using SVG rectangles rendered by React. The code loads the UN Population 2019 dataset via `d3.csv`, processes the population values, and maps the data through `scaleBand` and `scaleLinear` for positioning. React hooks manage the asynchronous data loading and state, while the `max` utility from D3 determines the x-axis domain. The bars are drawn directly as `<rect>` elements, with widths proportional to each country’s population.

May 30, 2022

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the ten most populous countries as a bar chart with no axes, using only styled text and variable-width bars to represent each nation’s population. The visualization is built with React hooks and D3 v5, fetching data from the United Nations World Population Prospects 2019 via d3.csv, then scaling bar widths with d3.scaleLinear and d3.max. React manages the UI state, while D3 handles data loading and layout calculations, rendering directly into the DOM.

May 30, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automotive data, with each circle representing a vehicle based on its miles per gallon, horsepower, origin, and weight. The visualization uses the Vega-Lite API within a D3.js context to render interactive SVG graphics. It loads a CSV dataset from a GitHub gist and applies custom encoding for position, color, and size, while tooltips reveal vehicle names. The code integrates vega, vega-lite, vega-lite-api, and vega-tooltip libraries, with the figure automatically fitting the browser window.

May 30, 2022

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to load a dataset of CSS named colors from an external CSV file and display summary statistics about it. The visualization shows the file size in kilobytes, the number of rows, and the number of columns as large text on a blank page. Using React hooks `useState` and `useEffect`, the app fetches the data with D3’s `csv` utility, while a separate `message` function formats the output. React renders the result, providing a clear bridge between D3’s data-loading capabilities and React’s state management.

May 30, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A single yellow circle follows the mouse across an SVG canvas in this React-based interactive visualization. The app tracks pointer coordinates via the `onMouseMove` event handler and updates the circle's `cx` and `cy` attributes through React state. The rendering uses React 16.9 with ReactDOM, with the SVG defined directly in JSX. Though the code includes a commented-out static smiley face with two eyes and a yellow head, the active implementation shows only the mouse-following circle. The `useState` and `useCallback` hooks manage the position updates, and the body style hides page scrolling for a focused display.

May 30, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This visualization demonstrates loading and parsing CSV data from a remote URL using two different approaches. The program fetches the CSS Named Colors dataset and displays its size in kilobytes, row count, and column count as large text. The first method uses `d3.csv` with promises, while the second combines `fetch` with async/await and `d3.csvParse`. The code also includes commented examples of a nested "Pyramid of Doom" promise pattern, highlighting different asynchronous JavaScript techniques within a React framework using d3.v5.

May 30, 2022

Loading thumbnail…

Fork of Hello HTML

This example shows a simple yellow circle centered on a black-bordered SVG canvas. The visualization relies solely on raw SVG elements, using a `circle` tag with explicit `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` attributes. No JavaScript libraries or data sources are involved—the rendering is static and defined directly in the HTML markup. The page uses an inline SVG with a fixed 960 by 500 pixel viewport, and the body margin is set to zero with hidden overflow for a clean display.

May 30, 2022