Skip to main content
Log in
C

Cyn

@stashmerchant·17 public vizzes

Loading thumbnail…

Final Project - Line Chart

This line chart compares monthly unemployment rates in Rhode Island against the national US average from 1976 onward. Two colored lines, steel blue for Rhode Island and orange for the US, trace the trends across time, with red circles highlighting notable rate spikes. Built with React and D3 v7, the visualization uses `d3.csv`, `scaleTime`, `scaleLinear`, and `d3.line` to load and render data from two CSV files. A legend and axis labels clarify the comparison.

Nov 20, 2025
Loading thumbnail…

Prototype v6

This visualization compares Rhode Island and U.S. unemployment rates as two line charts over time, using steelblue for Rhode Island and orange for the national rate. Red circles mark notable spikes in Rhode Island data, with a legend and grid lines aiding interpretation. The React app loads CSV data with d3.csv, parses dates with timeParse, and renders the SVG using d3.scaleTime, d3.scaleLinear, d3.line, and d3.axisBottom/axisLeft. A shared y-axis domain from both datasets ensures direct visual comparison.

Nov 4, 2025
Loading thumbnail…

Prototype v5

This visualization compares monthly unemployment rates in Rhode Island (RIUR) and the United States (USUIR) from 1976 onward using two overlaid line charts. Steel-blue and orange paths represent the respective rates, while red dots mark notable Rhode Island spikes. The chart uses d3.scaleTime, d3.scaleLinear, and d3.line to construct the axes and paths, with d3.csv loading the two datasets. React manages the component state, and the visualization renders inside an SVG with grid lines, axis labels, and a legend showing series colors and spike markers.

Nov 4, 2025
Loading thumbnail…

Fork of Prototype v5

This fork of Prototype v5 presents two stacked time-series line charts comparing the unemployment insurance rates of Rhode Island (RIUR) and the United States (USUIR) from 1976 onward. Built with React and D3 v7, it loads both datasets via `d3.csv` and parses dates with `d3.timeParse`. A custom `viz` function renders each chart using `d3.scaleTime`, `d3.scaleLinear`, and `d3.line`. Interactive hover features, managed through React state and D3's `select` API, display a crosshair and tooltip showing the exact date and both rates.

Nov 4, 2025
Loading thumbnail…

Prototype v4

This visualization shows Rhode Island's monthly unemployment rate (RIUR) from 1976 onward, highlighting historical spikes with red dots overlaid on a steelblue line chart. The React app loads data from a CSV file using d3.csv, parses dates with d3.timeParse, and renders the chart through d3.scaleTime, d3.scaleLinear, d3.line, d3.axisBottom, d3.axisLeft, and d3.extent functions. A legend distinguishes the line series from annotated spike points.

Oct 28, 2025
Loading thumbnail…

Prototype v3

A line chart visualizes Rhode Island's unemployment rate from 1976 to 2020, revealing cyclical spikes marked by red dots during economic downturns. Hovering over the chart displays a tooltip with the precise date and rate at the nearest data point. The visualization uses React with D3 v7, employing `d3.csv` for data loading, `d3.scaleTime`/`d3.scaleLinear` for axes, and custom bisection logic for interactivity.

Oct 10, 2025
Loading thumbnail…

Prototype v2

This line chart tracks Rhode Island’s monthly unemployment rate from 1976 onward, using data from FRED. It plots the rate over time with a steel-blue line, while red dots flag five notable spikes, including the 2020 peak. The visualization is built with D3.js and React, using `scaleTime` and `scaleLinear` for axes and a custom binary search for hover tracking. A tooltip showing exact values appears on mouseover, and grid lines and axis labels support reading the trend.

Sep 30, 2025
Loading thumbnail…

Prototype v1

This visualization displays Rhode Island’s monthly unemployment rate from 1976 onward, revealing cyclical peaks and troughs over time. Built with React and D3 v7, the app loads a CSV file, parses dates, and renders a line chart using scales, axes, and a line generator. Grid lines and labeled axes clarify the trend, with the data sourced from a local data.csv file.

Sep 24, 2025
Loading thumbnail…

RIUR Scatterplot Iteration

This line chart shows the monthly Rhode Island unemployment rate from 1976 onward, tracking its fluctuations over time as a percentage. The visualization loads CSV data, parses dates with `d3.timeParse`, and uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` within React to render axes, grid lines, and a steelblue path. The chart includes a title and axis labels for clarity.

Sep 17, 2025
Loading thumbnail…

scatter plot

This visualization displays monthly unemployment rates in Rhode Island from 1976 to 2003, with each data point colored by decade. The scatter plot uses D3.js within a React framework to render animated circles that grow from radius zero to four pixels on load. The chart includes grid lines, axes, tooltips showing the exact date and rate, and a legend mapping decades to colors. Data is loaded from a CSV file and parsed using d3.csv and timeParse.

Sep 8, 2025
Loading thumbnail…

Fork of Basic Scatter Plot of Rhode Island Unemployment Rate using React and D3

This scatterplot displays Rhode Island's monthly unemployment rate from 1976 onward, using data from the FRED series RIUR. Points are plotted on a time-based x-axis and a linear y-axis, with steelblue circles and a tooltip showing the exact date and rate on hover. The visualization is built with React and D3 v7, using `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render the axes, grid, and interactive elements.

Sep 8, 2025
Loading thumbnail…

Rhode Island Unemployment Rate

This visualization displays Rhode Island’s monthly unemployment rate from 1976 to 2025, sourced from the Federal Reserve Economic Data (FRED). The chart uses a temporal line graph with the observation date on the x-axis and the RIUR percentage on the y-axis. Built with D3 v7, the code loads data via `d3.csvParse` and `fetch`, then renders the visualization through the `viz` function, which updates the DOM using `select` and data joins.

Sep 8, 2025
Loading thumbnail…

Global Cyber Job Salaries

This visualization displays salaries for global cybersecurity and information security jobs from a Kaggle dataset, showing attributes such as experience level, job title, and salary in USD. The initial implementation fetches a CSV file and parses it with `d3.csvParse`, logging the resulting data structure as JSON in a `<pre>` element. State management is handled through a custom `setState` function that triggers re-rendering, while the D3 v7 selection and data join pattern (`select().data().join()`) is used to update the display.

Sep 3, 2025
Loading thumbnail…

Rhode Island Population

This example visualizes the annual population change in Rhode Island from 1970 to 2024, using data sourced from Macrotrends. It displays both the raw population values and the year-over-year percentage increase, with the data parsed from a CSV file via `csvParse`. The visualization renders the dataset as a formatted text representation using `select` and the `join` pattern, while initially fetching the CSV with the Fetch API and storing the parsed data in component state.

Sep 3, 2025
Loading thumbnail…

Medical Insurance Data

This example displays a loaded medical insurance dataset as raw JSON in a `<pre>` element, showing each record’s fields such as age, BMI, smoking status, and charges. The visualization uses D3 v7’s `csvParse` to read the `data.csv` file and `select` to bind the parsed array to the page. It also demonstrates a simple state-management pattern with `setState` for asynchronous data loading.

Sep 3, 2025
Loading thumbnail…

Cyber Jobs

This visualization displays data from a CSV file containing cyber security job listings, including salary information, job titles, and employment details. The code parses the dataset using `csvParse` and initially displays the raw data as a JSON string via `JSON.stringify`. The example demonstrates a data loading workflow where `fetch` retrieves the CSV file, and the state management pattern uses a custom `setState` function to update the visualization. The visualization uses D3 v7 for data parsing and DOM manipulation, with the `select` and `join` methods to render the text output.

Sep 3, 2025
Loading thumbnail…

Fork of Circles with D3

A fork of the "Circles with D3" example renders seven semi-transparent colored circles on a fixed full-viewport SVG, each containing a small square of contrasting color. The visualization demonstrates static, hard-coded positional data for both shapes, using D3 v7’s `select` and `join` API to bind data arrays to `circle` and `rect` elements. Circle fills are specified per datum, while squares cycle through a separate array of colors via the index parameter. The SVG is sized to the container’s client dimensions.

Aug 25, 2025