boreilly26

@boreilly26·13 public vizzes

Menus with React

This example demonstrates a simple pet-selection menu built with React, where a dropdown list lets users choose among six animals such as dog, cat, hamster, or parrot. The selected value appears in the browser console, and the interface uses large, readable text for the label and select box. The code relies on React’s `useState` hook to manage the current selection, and a custom `Dropdown` component that maps over an options array to render each `<option>` element. ReactDOM renders the app into the `#root` div, with the dropdown styled via CSS.

Dec 30, 2021

Loading thumbnail…

Florida Map

This visualization displays a map of Florida's counties as SVG paths, with each county filled in teal and interior boundaries highlighted in a contrasting stroke. The map is rendered on a light gray spherical background, creating a clean, readable geographic layout. The visualization processes a TopoJSON file from a GitHub gist, using d3’s `geoAlbers` and `geoPath` projections to draw the shapes, while React manages the component state and data loading. The `topojson.feature` and `topojson.mesh` functions derive county polygons and interior edges for the visual separation.

Dec 30, 2021

Loading thumbnail…

Rendering Data with React & D3 Pie CHart

This example visualizes the 148 named CSS colors as a pie chart, with each slice filled using its corresponding hexadecimal color value from a CSV dataset. Built with React and D3 v5, the code uses D3’s `csv` loader to fetch the data, `pie` to compute slice arcs, and `arc` to generate the SVG path geometries. React’s `useState` and `useEffect` manage the asynchronous data loading, while the chart renders as an SVG with a loading placeholder shown before data arrives.

Dec 30, 2021

Loading thumbnail…

Rendering Data with React & D3

This example shows a full-screen bar chart of CSS named colors, with each color rendered as a thin horizontal strip. The visualization loads color data from a CSV file using `d3.csv` and renders the data as React components, with each row displaying its `RGB hex value` as the strip’s background color. The chart leverages React’s `useState` and `useEffect` hooks to manage asynchronous data fetching, while D3 handles CSV parsing. The resulting layout fills the viewport with a continuous spectrum of color strips.

Dec 30, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This bubble chart shows the global distribution of religious populations by country, with circle size encoding population count and axes arranged by country and religion. Built using the Vega-Lite API template, the visualization renders interactively via vega-lite-api, vega-lite, and vega, with tooltips provided by vega-tooltip. Data is loaded asynchronously from a CSV file using d3.csv, and appearance is customized through a config object that adjusts axis ticks and label styling. The chart is sized to fit the browser window using autosize and rendered as SVG.

Dec 30, 2021

Loading thumbnail…

Fork of Vega-Lite API - Line and Area

This example uses the Vega-Lite API to create a scatterplot from automobile data, mapping origin, horsepower, weight, and mpg to visual channels. A semi-transparent circle mark with a configurable axis style renders the points, and a tooltip displays the vehicle name. The code registers Vega and Vega-Lite libraries, loads CSV data via d3.csv, and applies a custom configuration for fonts and tick colors. The visualization adapts to the window size with a fit autosize setting.

Dec 30, 2021

Loading thumbnail…

Vega-Lite API

This example demonstrates a scatterplot of automotive data, mapping the country of origin along the x-axis, horsepower on the y-axis, with weight mapped to color and miles per gallon mapped to point size. Built with the Vega-Lite API, it constructs the visualization declaratively using `vl.markCircle()`, `vl.x()`, `vl.y()`, `vl.color()`, and `vl.size()`. The chart loads data from a CSV via D3’s `csv()` and uses the Vega-Lite runtime to render interactively with tooltips.

Dec 30, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to combine React state with D3 data loading utilities. It fetches a CSS named colors dataset from a GitHub gist using d3.csv, then stores the parsed data in React’s useState hook via useEffect. The interface displays a summary message showing the data size in kilobytes, row count, and column count using d3.csvFormat and the data’s metadata. While loading, it renders “Loading...” before the statistics appear.

Dec 29, 2021

Loading thumbnail…

Loading and Parsing CS Data

This example demonstrates how to load and parse a CSV file using D3 v7, displaying the file size, row count, and column count of a CSS named colors dataset. The code uses `d3.csv` to fetch and parse the remote CSV from a GitHub gist, then `d3.csvFormat` to measure the formatted data’s byte size. The resulting statistics appear in large text within an HTML `<pre>` element. The example shows both the primary `d3.csv` promise-based approach and commented-out alternatives using `fetchText` and `d3.csvParse`.

Dec 29, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor as it moves across an SVG canvas. The React component tracks pointer coordinates via the `onMouseMove` event and updates the circle’s `cx` and `cy` attributes through `useState` and `useCallback`. Rendered with D3 v5’s SVG helpers within React 16.9, the example demonstrates real-time state-driven positioning without external data.

Dec 29, 2021

Loading thumbnail…

Let's Make a Face Part VI

Using React with SVG, this example renders a grid of 18 cartoon faces, each composed of a yellow circular background, two black eyes, and a curved mouth. Every face is randomly varied in eye position, eye size, mouth width, and mouth radius, creating a playful collection of distinct expressions. The code builds each face from reusable React components (`BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) and uses `d3.arc()` from the d3 library to generate the mouth path. The `range()` function from d3 produces the face count, and Math.random() drives the visual variation.

Dec 29, 2021

Loading thumbnail…

Let's Make A Face Path Animation

This example displays a cheerful yellow smiley face with black outlines, including two eyes and an arc-shaped mouth drawn using D3’s `arc()` generator. A small teal ellipse, animated via SVG `<animateMotion>` with an `<mpath>` referencing a custom curve path, travels continuously around the face. The visualization is rendered in React, using a static SVG canvas with D3 v7 to compute the mouth’s path coordinates, while the animation loops indefinitely via the `repeatCount` and `dur` attributes.

Dec 29, 2021

Loading thumbnail…

Fork of Let's Make a Face Part II

A yellow smiley face is drawn on an SVG canvas, centered with a thick black outline, two circular eyes, and an arc-shaped mouth. The face is built with React and D3.js, using D3’s `arc` function to generate the mouth path and SVG filter definitions for a drop-shadow effect. The code constructs the face with basic shapes, positioning them relative to the canvas center, and renders the result through React’s `ReactDOM.render`.

Dec 29, 2021