mzujewski@wpi.edu

College Basketball Visualized

This interactive treemap visualization displays college basketball team performance from the 2023 season, with teams nested within conference rectangles sized by tournament seed. Users can Alt+Click to select conferences or teams for comparison. The code uses d3.treemap, d3.hierarchy, and d3.scaleOrdinal for the hierarchical layout, while team data is loaded from a CSV using d3.group. Overlay panels created with JavaScript DOM manipulation include comparison tables and radar charts built with d3.lineRadial to show normalized performance metrics.

College Basketball Visualized Interaction

This interactive treemap organizes 2023 college basketball tournament teams by conference, with each team's cell size reflecting seed strength. Clicking a conference smooths the view, zooming in on that group. Built with D3.js, the visualization uses `treemapResquarify` for layout and `transition` for animated zoom effects. Team performance data comes from the College Basketball Team Performance Dataset, and hover tooltips reveal individual team statistics.

Fork of Blank Slate with Hot Reloading

This example demonstrates the “Hello World” for the VizHub V3 Runtime Environment, supporting continuous hot reloading through interactive widgets. The code imports D3 and loads team logo images from GitHub URLs, appending each image to the document body with styling. It uses the native `Image` object and `document.body.appendChild` to display the logos, with `onload` and `onerror` handlers logging success or failure. The example highlights the simplified entry point where an exported `main` function receives a `container` and `options` object.

College Basketball Visualized

Conference College Basketball Dataset

This treemap visualization displays the distribution of college basketball tournament teams across their respective conferences, with each rectangle representing a conference and its size reflecting the number of teams that made the tournament. The code filters the dataset for teams with valid SEED values, then uses `d3.hierarchy` and `d3.treemap` to calculate the layout, with `d3.group` aggregating teams by conference and random HSL colors distinguishing each conference box. The data comes from the 2023 College Basketball Team Performance Dataset, rendered as an SVG.

MZ College Basketball Dataset

This treemap visualization organizes 2023 college basketball tournament teams by conference, with each colored rectangle representing a conference and its size reflecting the number of teams that made the tournament. The layout uses `d3.hierarchy`, `d3.treemap`, and `d3.group` to structure and render the data from the cbb24.csv dataset, which is imported directly and filtered to include only teams with valid SEED values. Conference labels appear inside each box, while random colors distinguish the conferences visually.

Colleges with Lowest Acceptance rate

This visualization displays a US map with bubbles representing universities with the lowest acceptance rates. Each university appears as a circle positioned by geographic coordinates, sized by acceptance rate, and colored with school colors. The visualization sequentially animates bubble growth using D3.js transitions with a bouncing ease effect, while a React component manages the map rendering. University names appear alongside bubbles using SVG text elements. The map uses TopoJSON data processed with `geoAlbers` and `geoPath` projections, with university data sourced from US News.

MZ Simple Scatter Plot

This scatter plot displays movie ratings over time, with each circle representing a film positioned by its release date on the x-axis and average user rating on the y-axis. It reveals trends, outliers, and clusters across decades of cinema. Built with React and D3, the visualization uses `scaleTime` and `scaleLinear` for axes, with data from a 9k_Movies.csv dataset. Rendering uses WebGL via D3’s SVG and circle elements, applying `extent` for domain calculation. The plot includes labeled axes and a grey inner rectangle to focus on the data points.

MZ Line Chart with D3

This chart shows movie release counts for five genres from 2000 to 2020 using a stacked bar chart with overlaid trend lines. The stacked bars represent the total number of movies per year, while each genre’s trend line tracks its annual fluctuations. The visualization uses D3’s `d3.stack()` to compute the bar layers, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.line()` for the trend lines. Fake data is rendered as SVG elements within the browser.

MZ Marks and Channels

This example demonstrates six fundamental marks and channels in D3, each rendered as a separate SVG panel using `d3.select`, `selection.join`, and `selection.each`. It sequentially applies positional encodings (x, y), size (radius), bar length, shape via `d3.symbol` with contrasting symbols, and hue using `d3.schemeCategory10` color scheme. Each panel uses static synthetic data—an array [0,1,2,3,4]—and explicit pixel mappings for scales, with circles, rectangles, and paths drawn as SVG elements. The main `index.js` orchestrates multiple modules, importing named functions and binding them to data-driven SVG containers.

Largest Four-Year College Campuses by Enrollment, Fall 2022

Ten university bubbles appear sequentially on a green United States map, with each circle's size scaled to its enrollment and filled with the school's official color. A white text label for the university name and enrollment count fades in beside each bubble after it finishes growing. The visualization uses React for the interface, D3's `geoAlbers` and `geoPath` for map projection, and D3 transitions with an ease bounce effect to animate the circles from radius zero. Enrollment data originates from BestColleges.

College Basketball Dataset

This visualization displays the first row of a college basketball dataset as a formatted JSON object, showing one team’s advanced metrics including adjusted offensive and defensive efficiency, effective field goal percentage, and wins above bubble. The code imports the CSV data using a data import statement, then converts all numeric fields to numbers using unary plus operators before rendering the JSON string with an HTML pre element. The example demonstrates a minimal data inspection approach using only JavaScript and template literals, without any external visualization libraries.

Most Streamed Spotify Songs 2023

This example displays the first record from the Spotify 2023 dataset as raw JSON in a preformatted block, using a fixed font size of 36 pixels to emphasize the data structure. The visualization parses numeric fields like streams, BPM, and danceability percentages from the CSV before rendering. It uses the Vue framework to manage the container and imports the dataset file directly, showcasing the data's schema and attribute types without additional charting libraries.

Movies 1910-2024

This example displays the raw JSON encoding of the first movie record from the 9k_Movies.csv dataset, showing fields such as title, release date, and user rating. The visualization serves as a minimal data preview, converting the parsed CSV data into a readable object for inspection. Using React and WebGL rendering, the code imports the CSV file, converts rating and vote count to numeric values, and uses `container.innerHTML` to render the JSON stringified with two-space indentation at a font size of 36 pixels, initializing with the dataset’s first entry.

MZ Fork of Circles with D3

Ten circles are arranged in a spiral, expanding outward from the center of the canvas against a pastel green background. Each circle uses a different radius, position, and color from a repeating palette of red, white, and blue. Built with D3.js, the code employs the `select` API and the General Update Pattern with `selectAll`, `data`, and `join` to create and style the SVG elements, with positions calculated using trigonometric functions on the container’s dimensions.