Sean Sanchez

@seansanchez951·8 public vizzes

CS 360 Final Project d3: Bubble Chart in d3

This bubble chart visualizes music review scores over time, with each circle’s x-position mapped to publication date and its y-position to the review score, while color encodes genre. Hovering a circle reveals the genre via a custom tooltip, and selecting a genre highlights only its related bubbles by adjusting opacity. Built with D3 v4 and React, it uses `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeSet1` for axes and coloring, with SVG rendering and animated transitions for tooltip display.

Apr 19, 2022

Loading thumbnail…

CS 360: Assignment 9 Choropleth map in d3

This choropleth map visualizes poverty estimates across US states, with darker shades of gray indicating higher poverty rates on a 5-class ColorBrewer scale. The visualization merges data from a cleaned CSV file with US state GeoJSON boundaries using d3.csv and d3.json, then renders the map as SVG paths with d3.geoAlbersUsa projection and d3.geoPath. A d3.scaleQuantize maps poverty values to the color range, while states without matching data appear in light gray. The map includes a title and uses d3.v4 within a React framework.

Apr 13, 2022

Loading thumbnail…

CS 360 A8: Interaction in D3

This interactive line chart displays daily temperature readings for New York, San Francisco, and Austin, with each city represented by a colored line. Users can hover over a line to highlight it while greying out the others, or click a line to toggle its visibility. The visualization uses D3 v7 with SVG rendering, d3.line with curveBasis for smooth paths, and d3.scaleTime and d3.scaleLinear for axes. Interactions are implemented through mouseover, mouseout, and click event handlers that manipulate stroke colors and visibility attributes.

Apr 5, 2022

Loading thumbnail…

CS 360 Assignment 7 - Adjacency Matrix in d3

This example visualizes the Zachary Karate Club dataset as an adjacency matrix, displaying the 34 members and their 78 connections. Each cell represents a potential edge between two nodes, with fill opacity proportional to edge weight. The visualization uses d3.v3’s `d3.svg.axis` for ordinal axes and SVG `rect` elements for matrix cells. Data loading uses `d3.csv` with a `queue()` helper to parse node and edge lists from separate CSV files. Interactive highlighting is implemented through `mouseover` events that emphasize entire rows and columns.

Apr 2, 2022

Loading thumbnail…

CS 360 Assignment 7 - Force Directed Graph in d3

This visualization shows a node-link diagram of the Zachary Karate Club social network, with nodes representing members and edges representing their interactions. A force-directed layout positions the nodes as the simulation runs, with each node colored via a categorical scale and displaying its ID on mouseover. The code uses d3.forceSimulation with d3.forceLink, d3.forceManyBody, and d3.forceCenter to drive the layout, rendering SVG circles and lines that update on every tick. Data comes from the SOC-KARATE dataset loaded as CSV, with interaction handling and color assignment based on node IDs.

Mar 29, 2022

Loading thumbnail…

Boxplot test

This example displays a boxplot visualization of wine prices, with the chart area laid out on a pastel turquoise canvas. The code loads wine price data from a Google Sheets CSV via `loadTable` and computes the median, quartiles, and min/max values using JavaScript array operations. The drawing is implemented with p5.js, using `createCanvas` and `background` to set up the scene, though the actual boxplot rendering is not yet included in the draw loop.

Feb 15, 2022

Loading thumbnail…

CS 360 Assignment 2 - Dot Plot

This dot plot visualizes the top 10 startups by overall valuation, with each dot representing a company’s valuation in billions of dollars. The chart uses p5.js to load CSV data from a Google Sheets URL, then draws a titled grid with tick marks and horizontal lines, plotting each startup’s value as a filled ellipse. The data originates from a Kaggle dataset on startup valuations, cleaned and reduced to the top 10 entries. The visualization’s axes and labels are manually positioned using p5.js canvas drawing functions.

Feb 8, 2022

Loading thumbnail…

CS 360 - Assignment 2 Bar Plot

This bar plot shows the valuation of twelve US software startups in billions of dollars, with each bar labeled with the company name and its corresponding value. Built using React with p5.js, the visualization loads data from a Google Sheets CSV and renders horizontal bars with a custom y-axis scale. The code defines the x-axis from zero to forty and positions each rectangle manually using `rect()` calls while displaying text labels through `text()` functions. The dataset originates from a Kaggle startup valuation dataset, filtered for US software companies.

Feb 8, 2022