Skip to main content
Log in
A

Alexis Caira

@alexiscaira·13 public vizzes

Loading thumbnail…

Project Iteration Week 11/13

This interactive visualization explores Bigfoot sightings across the United States, allowing users to toggle between a binned scatterplot showing sighting counts against various weather variables and a zoomable map of sighting locations. The graph can be colored by precipitation type or season, with optional trendlines and whimsical rain and snow animations overlaid on the chart. The map renders U.S. state boundaries via d3.geoPath with TopoJSON and displays each sighting as a tiny pine tree icon, with hover tooltips and a reset zoom button. Built with React and D3 v7, the visualization updates dynamically through custom events.

Nov 22, 2025
Loading thumbnail…

Project Iteration Week 10

This interactive React visualization displays Bigfoot sighting records from a CSV as a histogram of sighting counts against a selected weather variable (like temperature, humidity, or wind speed), with points colored by precipitation type or season. A toggle button switches between this scatter plot and a map view showing sighting locations as red circles projected onto a US state map using d3.geoAlbersUsa and d3.geoPath. The scatter plot includes a trendline, a legend, and playful animated rain and snow effects driven by requestAnimationFrame. Data is loaded with d3.csv, and the visualization uses d3.bin for histogram binning.

Oct 29, 2025
Loading thumbnail…

Project Iteration Week 9

A scatter plot compares the number of sightings against a user-selected weather variable, where each point is colored by precipitation type or season. Built with React and D3 v7, the chart uses D3's `bin` function to aggregate data into histogram bins, with axes, labels, and a legend rendered via `axisBottom`, `axisLeft`, and SVG elements. Animated rain and snow effects are generated with custom `requestAnimationFrame` loops, and a trendline toggle overlays a statistical line. The data comes from a CSV file with location, date, and weather details.

Oct 22, 2025
Loading thumbnail…

Project Iteration Week 7

A histogram displays the number of reported sightings against a selected weather variable, using a stacked bar layout to break down counts by precipitation type or season. Built with React and D3 v7, the visualization reads a CSV file and renders SVG bars with interactive tooltips. The x-axis dynamically updates based on user-selected variables like temperature or humidity, while categorical colors distinguish categories via a legend.

Oct 9, 2025
Loading thumbnail…

Project Iteration Two

A histogram displays the number of sightings for a selected weather variable, with an interactive dropdown to switch among conditions like temperature, humidity, and wind speed. Built with React and D3 v7, the visualization uses `d3.bin` to generate bins, `d3.scaleLinear` for axes, and SVG rendering. Data is loaded from a CSV using `d3.csv`, and a custom event communicates dropdown changes between D3 and React state.

Oct 2, 2025
Loading thumbnail…

Project Iteration One

This visualization shows the distribution of Bigfoot sighting counts across temperature ranges, using a histogram where the x-axis represents mid-day temperature in Fahrenheit and the y-axis shows the number of sightings per temperature bin. The chart is built with React and D3.v7, loading data from a CSV file containing sighting details, then using D3's `bin` and `scaleLinear` functions to compute and render the bars as SVG rectangles. The visualization includes styled axes, labels, and a title, with a placeholder comment suggesting future color encoding by precipitation type.

Sep 24, 2025
Loading thumbnail…

Scatter Plot Iteration

A scatter plot visualizes 1,000 Bigfoot sighting records from the BFRO dataset, plotting mid-range temperature against UV index with points color-coded by season. The chart uses React state to load and format CSV data, then passes it to a D3.js rendering function that employs `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and SVG circles for marks. The visualization applies a Comic Sans font and includes labeled axes and a title.

Sep 18, 2025
Loading thumbnail…

Basic Scatter Plot with React & D3

A scatter plot maps temperature midpoint against moon phase for Bigfoot sighting reports, with each point colored by the reported season. Built with React and D3 v7, the visualization uses `d3.csv` to load data, `d3.scaleLinear` and `d3.extent` to compute scales, and renders circles as WebGL elements. The dataset contains 1,000 sightings from the BFRO database, covering locations across the US from the 1970s to recent years.

Sep 10, 2025
Loading thumbnail…

Loading Data - Haunted Places in US

This example demonstrates how to load and parse a CSV dataset of haunted places in the US, displaying the raw data as JSON in a pre element. The visualization uses D3 v7's `csvParse` to parse the data, converting longitude and latitude strings to numbers. It fetches the `data.csv` file from the Shadowlands Haunted Places Index, initially showing "LOADING" until the fetch completes. The React-based app uses D3's `select` API to bind the container and update the display with `text(JSON.stringify(...))`.

Sep 4, 2025
Loading thumbnail…

Loading Data - Bigfoot Sighting Locations

This visualization demonstrates the asynchronous loading and parsing of a Bigfoot sighting dataset using D3.js within a React application. It initially displays a "LOADING" state before fetching data from a CSV file via the `fetch` API, then parses it with `d3.csvParse`. Numeric attributes are converted to correct types before rendering the raw JSON data into the view, highlighting the critical data preparation step for web-based visualizations. The code uses D3.js selection and join operations to update the display efficiently.

Sep 4, 2025
Loading thumbnail…

Loading Data - Squirrel Census

This example demonstrates the process of loading and parsing a CSV dataset from the Squirrel Census, which contains 433 squirrel sightings across 24 New York City parks. The visualization initially displays a loading state before fetching the data file, then renders the parsed data as a pretty-printed JSON object. The code uses d3.csvParse to convert the CSV string into an array of objects, and then converts specific fields like park_id, above_ground, squirrel_latitude, and squirrel_longitude to numeric values using the unary plus operator. The visualization is built with D3.js version 7.6.1, using the select and join methods to manage the DOM structure.

Sep 4, 2025
Loading thumbnail…

Loading Data - Goodreads Books

This example demonstrates the initial step of a data visualization pipeline: loading a Goodreads dataset from a CSV file. It shows raw JSON-formatted data in a `<pre>` element, with attribute names and values like book titles and ratings clearly visible. The code uses D3 v7's `csvParse` and `select` within a state-management pattern, where `fetch` retrieves the file and `setState` updates the view after parsing. The visualization itself is minimal, displaying the loaded data structure without any graphical encoding.

Sep 4, 2025
Loading thumbnail…

Caira Circles with D3

This example uses D3.js v7 to assemble a simple geometric portrait of a cat-like face from a set of polygons and circles. The code directly renders two triangular ears using `selectAll('polygon')` with specified coordinate points, then draws a white circular head with colored ear and eye details via `selectAll('circle')`. The SVG is generated dynamically, sized to its container, and styled with a solid background, demonstrating basic shape-data binding and join patterns.

Aug 25, 2025