F

flanagancarlie@gmail.com

@flanagancarlie·25 public vizzes

Loading thumbnail…

Final Project: Spotify Top 10000 Streamed Songs

This interactive D3.js visualization explores the Spotify Top 10,000 Streamed Songs dataset from Kaggle, showing relationships between artist success metrics. Three coordinated views display a scatterplot of artists' peak positions versus song counts with dropdown filters, a horizontal bar chart comparing the top 10 artists by streams, and a third scatterplot of individual songs for selected artists. The visualization uses d3.scaleLog, d3.flatGroup for data aggregation, tooltips on hover, and multiple dropdown menus to switch between peak position, peak streams, and total streams metrics.

Loading thumbnail…

Social Media Scale Comparison

This visualization compares twelve social media platforms across four user-experience scales (community, discovery, self-expression, and agency) using survey response data. A bubble chart positions platforms on the y-axis and scale categories on the x-axis, with bubble size and color encoding the average Likert-scale score. The data processing pipeline uses `d3.csv`, `d3.select`, and `d3.sum` to aggregate responses, while `vega-lite` API constructs the circle-mark visualization with tooltips. The resulting plot reveals how each platform supports or inhibits different user needs.

Loading thumbnail…

Social Media Usage Histogram

A histogram displays the frequency of social media platform usage from a survey dataset, with each bar colored according to the platform it represents via `mediaToColor()`. The chart uses `d3.histogram()` with `scaleBand()` and `scaleLinear()` axes, and includes tooltips on hover showing the response count for each platform. Data is loaded from a CSV, filtered, and processed through custom `combine()` and `countMedia()` functions before being rendered with D3 v7.

Loading thumbnail…

Social Media Bubble Chart Psuedo-Viz

This pseudo-viz compares five social media platforms across four scales—community, discovery, self-expression, and agency—using a bubble chart built with D3 v7. A dropdown menu lets viewers switch between the four metrics, which changes each circle’s radius based on the selected data value (e.g., `d.c` for community). Circles are positioned horizontally by platform using `data.indexOf(d) * 150 + 100`, filled with `schemeCategory10` colors, and labeled with platform names. The data comes from survey responses in the author’s senior project repository.

Loading thumbnail…

Social Media Bubble Chart

This visualization displays survey data as a bubble chart, comparing twelve social media platforms across four user-perception scales: community, discovery, agency, and self-expression. Each platform appears as a labeled circle, with radius size reflecting the average response score (from 1 to 5) for the selected scale, and color encoding the platform identity. A dropdown menu switches between the four scales. The chart uses D3 v7.js for rendering and interactive elements, including tooltips that display the average score and its qualitative label, with data fetched from a CSV file and processed through filtering and aggregation functions.

Loading thumbnail…

Social Media Survey Demographics Histogram

This visualization displays histograms of demographic survey data, showing the frequency distribution of respondents by gender, race, age, and LGBT status. Users can switch between these categorical variables using a dropdown menu, with each bar’s tooltip revealing the exact response count. The chart uses D3 v7’s `scaleBand`, `scaleLinear`, and `flatGroup` for binning and axes, with data loaded from a CSV via `csvParse`. The code combines demographic fields from the survey and filters out incomplete or underage responses before rendering.

Loading thumbnail…

Top Artists Small Multiples - Spotify Peak Position Scatter Plot

This visualization uses small multiples to display scatter plots for the top ten artists, plotting each song's peak position against total streams. Each artist is shown in a separate panel, with logarithmic axes and points colored by the number of songs at the artist's maximum position. The color legend allows interactive highlighting of specific values, and hovering over points reveals song details via a tooltip. Built with D3 v7, it uses `scaleLog` for axes, `scaleOrdinal` for color, and `csvParse` to load and process Spotify song data.

Loading thumbnail…

Top 10 Artists Bar Chart - Spotify Peak Position

This visualization displays the top 10 artists on Spotify based on a user-selected metric, such as peak streams or total streams, using a horizontal bar chart with a logarithmic x-axis. Each bar’s length represents the aggregated value for that artist, and hovering over a bar reveals a tooltip with details like song counts and peak positions. The chart is built with D3 v7, using `scaleLog` and `scaleBand` for scales, `axisBottom` and `axisLeft` for axes, and a dropdown menu to switch between metrics. Data is sourced from a CSV file of Spotify’s top 10,000 songs and processed with `flatGroup`.

Loading thumbnail…

Interactions - Spotify Peak Position Scatter Plot

This interactive scatter plot visualizes Spotify’s top 10,000 songs, aggregated by artist to show the relationship between an artist’s number of songs in the dataset and their peak chart position, peak streams, or total streams. Dropdown menus allow switching between different y-axis metrics and filtering the dataset size. Hovering over a point reveals a tooltip with artist-specific details, while an interactive color legend highlights artists by their number of songs at max position. The visualization uses D3 v7 with logarithmic scales, `scaleOrdinal` for color encoding, and `.on('mouseover')` events for tooltips, built with modular ES6 imports.

Loading thumbnail…

Social Media Survey Duration Histogram

This histogram displays the distribution of survey completion durations in seconds from a social media MQP dataset. Bins along the x-axis represent time intervals, while the y-axis shows the frequency of responses falling into each bin, with tooltips revealing the exact range and count per bar. The chart uses the D3.js library, specifically `d3.histogram()`, `d3.scaleLinear()`, and `d3.axisBottom()`/`d3.axisLeft()`, along with custom tooltip styling. Data is fetched as CSV from GitHub, filtered to exclude non-consenting and underage participants, and then aggregated into the histogram.

Loading thumbnail…

Basic Histogram

This basic histogram displays the frequency distribution of sepal lengths from the classic Iris Dataset, with sepal length on the x-axis and count on the y-axis. The chart uses d3.scaleLinear for both axes and builds bins via d3.histogram(), with each bar rendered as a rectangle filled in teal. Simple axis labels and a clean layout make the unimodal distribution of sepal lengths across all three iris species immediately apparent.

Loading thumbnail…

Social Media Analysis Loading Data

This example demonstrates the initial data-loading stage of a social media analysis dashboard. It fetches a CSV file from GitHub, filters out responses from participants who did not consent or are under 18, and restructures the raw survey columns into consolidated fields using a custom `combine` function. The raw data is displayed as JSON in a `<pre>` element. The process uses the `fetch` API, `csvParse`, and `select` from D3 v7, with state management handled through a custom `setState` callback.

Loading thumbnail…

2015 Internet Users World Map

This world map visualizes internet usage per 100 people in 2015, with countries colored on a green scale from 0-20% to 80-100% and gray for missing data. Hovering reveals the country name and exact percentage. The visualization uses d3.geoPath with a natural Earth projection and d3.zoom for interactive panning and scaling, drawing from the Kaggle Internet Users Dataset and a TopoJSON world atlas.

Loading thumbnail…

Dropdown Axes For Spotify Peak Position Scatter Plot

This scatter plot visualizes data from Spotify’s Top 10,000 songs, showing artists’ peak chart positions against the number of songs they have in the top list, with point size and color encoding additional metrics. Two dropdowns let the viewer filter the x-axis range and change the y-axis variable. Built with D3 v7, the code uses `scaleLog` for the logarithmic axes, `flatGroup` for data aggregation, and a custom `dropdown` component to handle user input, fetching the CSV data from a GitHub gist.

Loading thumbnail…

Iterate Spotify Peak Position Scatter Plot

This scatter plot visualizes Spotify artists, plotting the number of songs each artist has in the Top 10,000 against their peak chart position, using a logarithmic scale on both axes to handle wide-ranging values. The visualization aggregates the raw Spotify songs dataset by artist, calculating the total song count and minimum peak position for each artist, then renders each as a semi-transparent circle. Built with D3 v7, the code uses `csvParse` and `flatGroup` to process the data, while `scaleLog` and D3’s axis components handle the scaling and labeling.

Loading thumbnail…

Use Color Spotify Peak Position Scatter Plot

This scatter plot visualizes 10,000 Spotify songs, with each point representing an artist across two logarithmic axes: the number of songs in the top 10,000 and their peak chart position. The color scale, using `schemeSet1`, encodes the count of songs that reached an artist’s maximum position, with a custom legend. The code processes the CSV data using `flatGroup` and `d3.min` to aggregate artist statistics, then renders the visualization with `d3.scaleLog` scales and `d3.axisTop` and `axisLeft` for axes.

Loading thumbnail…

Fork of X-Axis Dropdown Spotify Peak Position Scatter Plot

This interactive scatter plot explores Spotify streaming data by comparing the number of songs an artist has in the top 10,000 against their peak chart position. A dropdown menu filters the dataset to only include songs ranked within a selected threshold, with color encoding the count of songs at each artist’s maximum position. The visualization uses d3.v7 with log-scaled axes, `flatGroup` for aggregation, and modular components for axes, legends, and the scatter plot. Data is fetched from a remote CSV and rendered as SVG circles.

Loading thumbnail…

Spotify Top 10000 Songs

This example displays the raw contents of a Spotify top 10,000 songs dataset as a JSON-formatted text dump. It uses D3 v7’s `csvParse` to load and parse a remote CSV file from a GitHub gist, then presents the resulting array of objects directly in a `<pre>` element. The visualization demonstrates a minimal data-loading workflow, with state management to show a “LOADING” placeholder before the fetched data appears. No charts or graphical encodings are rendered; the focus is purely on data ingestion and display.

Loading thumbnail…

Spotify Peak Position Transforming Data 2

This visualization analyzes the Spotify Top 10,000 Songs dataset, showing a ranked list of artists by how many songs each has reached the #1 peak position. The code uses `d3.flatGroup` to group records by artist, then computes the minimum `peak_position` per artist and counts songs at that maximum rank. Results are sorted in descending order using `d3.descending` and displayed as JSON text via `d3.select`. The data loads from an external CSV file using `d3.csvParse`.

Loading thumbnail…

Spotify Peak Position Scatter Plot Simple

This scatter plot visualizes the relationship between the number of songs each artist has in Spotify’s Top 10,000 chart and their highest peak position, using a dataset of Spotify songs. The visualization uses a simple, axis-less scatter plot with circles colored by opacity to show data density. The code employs `d3.scaleLinear` and `d3.extent` to map data values to plot coordinates, and uses `d3.flatGroup` to aggregate the raw CSV data by artist. The plot is rendered using D3.js within a full-window SVG.

Loading thumbnail…

Spotify Peak Position Pseudo-Viz

This pseudo-viz maps a synthetic subset of the Spotify Top 10,000 Songs dataset. Each circle represents an artist, positioned on the x-axis by their song count and on the y-axis by their peak chart position, using the `xPosition` encoder. The visualization is modular, with commented-out alternative encoders—`size`, `shape`, `hue`, and `length`—showing how the same data could be rendered through different channels. Built with D3 v7, the scene is an SVG canvas where data is bound via the `.join()` API.

Loading thumbnail…

Spotify Peak Position Transforming Data

This visualization ranks artists by the number of songs that reached the #1 peak position on Spotify, using the Spotify Top 10,000 Songs dataset. It transforms the raw CSV data with `d3.csvParse`, filters records where `peak_position` equals "1", and aggregates counts per artist using `d3.flatGroup`. The results are sorted descending and displayed as a JSON text block via a `pre` element. The code relies on D3 v7 utilities like `flatGroup` and `descending` to process and order the summary.

Loading thumbnail…

Social Media Stocks

This example displays one decade of social media stock prices (Facebook, Twitter, Pinterest, Etsy, Snapchat) from 2012–2022, loading data from a CSV hosted on GitHub. The visualization initially shows the raw parsed data as a JSON string in a `<pre>` element, using `d3.csvParse` to convert the fetched text. It relies on D3 v7’s `select` and `setState` pattern to manage asynchronous loading, with a state object tracking whether data is undefined, “LOADING”, or parsed. The stock prices originate from Kaggle, and the current view serves as a data-loading preview rather than a chart.

Loading thumbnail…

Trending YouTube Video Statistics (US Video)

This visualization displays a raw JSON representation of the first 1000 rows of YouTube trending video statistics from August 2020, loaded from a GitHub-hosted CSV file. The code uses d3.csvParse to fetch and parse the dataset, then d3.select to render the parsed data as formatted text within a <pre> element. The visualization demonstrates a simple data-loading workflow where the state transitions from undefined to a loading message before displaying the final array of video objects.

Loading thumbnail…

Make Something: Fork of Mouse Follower

This example demonstrates a paint tool where a circle follows the mouse and leaves a trail of colored dots. Users draw by moving the pointer, cycle through nine colors by clicking, and adjust brush size from five preset values by right-clicking. The visualization uses a unidirectional data flow with a custom `viz` function and a `setState` callback. D3 selections handle mouse events and append SVG circles dynamically, while a text label shows the "Paint!" instruction in the center-top of the viewport.