vwm

@vwm·15 public vizzes

Franchise Revenues (Category and Total) with Selectable Color Axis

This interactive scatterplot displays franchise revenues across categories and totals, with selectable axes for X, Y, and color encoding. Users can switch between revenue, total revenue, revenue category, original media, and year created using React dropdowns. The visualization uses D3 v5 scales to map data from the Tidy Tuesday Franchise Revenue dataset to SVG circles, with a legend showing eight generalized media types. Marks include opacity to reveal overlapping categories when viewing total revenue across the color axis, with hover tooltips showing franchise names.

Oct 30, 2019

Loading thumbnail…

Stacked Franchise Revenues by Revenue Category

This stacked bar chart shows franchise revenues broken down by revenue category, with each bar segment representing a category and the full bar height showing total revenue. An interactive legend allows users to highlight specific categories, dimming others and displaying tooltips with precise billion-dollar figures. Built with D3.js version 3, it uses d3.layout.stack for stacking, d3.legend for the color legend, and d3-tip for hover details. The data comes from Tidy Tuesday’s July 2, 2019 franchise revenue dataset, rendered as an SVG with animation support.

Oct 30, 2019

Loading thumbnail…

Franchise Revenue Totals with Dropdown Menus and Color Legend

This interactive visualization displays franchise revenue data as a scatterplot, plotting total revenue against year created, with each point colored by original media type. Two dropdown menus let users switch the X and Y axes between total revenue and year created, while a color legend identifies the media categories. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and SVG circles for marks, with tooltips showing franchise names. Data comes from a CSV file loaded via d3.csv, sourced from R for Data Science's Tidy Tuesday event.

Oct 17, 2019

Loading thumbnail…

Ontario Bird Counts with Menus

This interactive scatterplot displays Christmas bird counts from the Hamilton, Ontario area, letting users compare yearly trends across three attributes via dropdown menus. The visualization uses React with hooks and D3 v5 scales to map year, count, or hours spent onto the X and Y axes, rendering circles as SVG marks. Bird count data, sourced from the Tidy Tuesday project, is loaded as CSV and filtered through a custom `useData` hook.

Oct 2, 2019

Loading thumbnail…

Static Growth - Invasion

White particles emerge and age on a black canvas, growing in number until a threshold is reached, after which the particles themselves enlarge, gradually overtaking the space. This cycle visually simulates static and bacterial invasion as remaining black flecks become more prominent before vanishing. The animation uses JavaScript with a Canvas `getContext`, `requestAnimationFrame`, and the `arc` path for drawing particles, with randomness controlling their placement.

Sep 25, 2019

Loading thumbnail…

Student to Teacher Ratios - Ratio by Education Type

This visualization displays student-to-teacher ratios across different education types as a scatter plot, with each dot representing a country positioned by education category and ratio value. The points use partial opacity to reveal data density, while tooltips identify outlier countries by name. Built with the Vega-Lite API on top of D3.js, the chart loads CSV data from a Tidy Tuesday dataset and uses a custom configuration to adjust axis and label styling.

Sep 25, 2019

Loading thumbnail…

Franchise Revenues - Revenue Stream by Year Created

This scatterplot displays franchise revenue by year created, with each circle colored according to the franchise’s original media type and tooltips revealing franchise names. The visualization highlights outliers such as Hello Kitty, Disney Princess, and Pokémon merchandise earning high revenue despite their relatively recent origins. Built with vega-lite-api, the chart loads CSV data via d3.csv and renders marks using vl.markCircle with encoded x, y, color, and tooltip channels. The code applies custom axis and label styling from config.js to improve readability.

Sep 25, 2019

Loading thumbnail…

Television Show Ratings - Rating by Show

This visualization displays average television show ratings, filtered to exclude values below 9.1 and sorted by rating, with point size encoding rating share. Data comes from a CSV file, processed via `d3.csv`, and the chart is built using the Vega-Lite API with `vl.markPoint`, encoding fields for title, rating, and share. The visualization is rendered as a static SVG using the Vega rendering engine, with custom styling applied through a config object.

Sep 25, 2019

Loading thumbnail…

Television Show Ratings - Rating by Season

This scatterplot visualizes television show ratings across seasons, encoding average rating on the y-axis, season number on the x-axis, and audience share as point size. The chart filters out average ratings below 6 and seasons beyond 20, revealing how share declines steadily with more seasons while rating trends remain inconclusive. Built with the Vega-Lite API alongside d3 for CSV data loading, the visualization uses a custom dark theme and a tooltip to display show titles for each point.

Sep 25, 2019

Loading thumbnail…

Franchise Revenues - Revenue by Franchise

This chart displays franchise revenue by franchise name using horizontal bars, with color encoding for revenue category and a tooltip showing the original media type. It filters data to include only franchises with revenue above 10 units, highlighting how merchandise dominates the field. The visualization is built with the Vega-Lite API, using d3.csv for data loading and rendering via vega-tooltip for interactive hints. Revenue data comes from the Tidy Tuesday franchiseRevenues dataset.

Sep 25, 2019

Loading thumbnail…

Franchise Revenues - Total Revenue by Year Created

This scatterplot displays the total revenue of media franchises against their year of creation, with each circle colored by original media type and revealing trends such as higher earnings among newer franchises and notable outliers like Pokémon. The visualization encodes year as a temporal axis and revenue as a quantitative axis, using tooltips to identify franchises. It is built with the Vega-Lite API (via vega-lite-api) and D3 v5, loading CSV data from a GitHub gist and rendering through Vega and Vega-Lite with a tooltip handler.

Sep 25, 2019

Loading thumbnail…

Television Show Ratings

This example displays basic metadata about a television show ratings dataset, showing the file size, row count, and column count in a large text format. The page loads CSV data from a Tidy Tuesday repository using `d3.csv` and reports the results. The visualization is intentionally minimal, using a `<pre>` element to render the computed statistics rather than drawing charts or graphs. The code also includes commented-out alternatives using `fetch` with `async`/`await` and `d3.csvParse`, demonstrating different approaches to loading and parsing the same data source.

Sep 17, 2019

Loading thumbnail…

Franchise Revenues

Franchise Revenues summarizes the contents of a CSV file describing franchise revenue by category, media source, and creation year. The visualization displays three quantitative summary statistics: the file size in kilobytes, total row count, and column count. Using the D3 v5 API, this example loads the remote dataset with `d3.csv`, formats the response with `d3.csvFormat` to compute the size, and renders the resulting figures as plain text within a `<pre>` element. The data originates from Tidy Tuesday’s July 2019 franchise revenue dataset.

Sep 17, 2019

Loading thumbnail…

Student to Teacher Ratios

This example loads a student-to-teacher ratio dataset from a CSV file and displays summary statistics about the data, including its size in kilobytes, row count, and column count. The visualization uses the D3.js library (v5) to fetch and parse the CSV via `d3.csv`, then formats the results using `d3.csvFormat`. A large `<pre>` element shows the computed metrics in text form. The dataset, sourced from Tidy Tuesday, contains country, year, educational level, and ratio fields, though the current code only reports dataset dimensions rather than rendering charts or graphs.

Sep 17, 2019

Loading thumbnail…

Vasilios's Smiley Face

This interactive visualization depicts a stylized smiley face with a monkey-like appearance, featuring gradient-shaded facial features, ears, and a mouth. Built with React and D3.js v5, the graphic constructs SVG shapes from arcs and circles, using D3's `arc` API to generate the ear paths. The React component renders the entire face, with CSS styling for the page layout.

Aug 27, 2019