M

Matthew Dzwil

@Diz138·22 public vizzes

Loading thumbnail…

Final xP vs. Points for the 2021-2022 Premier League Season

This interactive scatter plot tracks Arsenal’s expected points (xP) and actual points across the 2021-2022 Premier League season. A sidebar of team crest buttons lets users switch teams, updating two overlaid line charts: a solid line for points and a dashed line for xP. Built with D3 v7, the visualization uses `scaleLinear`, `line`, and `axisBottom`/`axisLeft` from the `axes` module, with data fetched from CSV files via `csvParse`. A legend highlights line types, and hover effects scale crest images.

Loading thumbnail…

Line Plot comparing 2021-2022 PL teams xP to Total points Updated

This interactive line plot compares a selected Premier League team's expected points (xP) to their actual points across the 2021-2022 season. Users choose a team by clicking a button with the team’s logo, which updates the visualization using D3.js v7. The chart uses `d3.scaleLinear` and `d3.line` to render the two lines, with axes generated via `d3.axisLeft` and `d3.axisBottom`. Team data is fetched from a GitHub Gist CSV file.

Loading thumbnail…

Line Plot comparing 2021-2022 PL teams xP to total points

This interactive line plot compares each Premier League team's expected points (xP) against their actual points across the 2021-2022 season. Users select a team via image buttons or a dropdown menu, dynamically updating the chart to display two overlaid lines: a solid line for actual points and a dashed black line for expected points. The visualization uses d3.scaleLinear and d3.line to construct the axes and series from CSV data, with team colors sourced from stadium location data.

Loading thumbnail…

Scatter Plot PL xG Data with both xP and Points with menu

This interactive scatter plot visualizes Premier League data for a selected team, comparing actual points against expected points (xP) across matchweeks. A dropdown menu lets users choose among teams, updating two overlaid lines: a solid red line for actual points and a dashed black line for xP. Built with D3 v7, the visualization fetches CSV data from GitHub Gists, uses scaleLinear for axes, and implements a custom dropdown with scroll functionality. The menu, axes, and scatter plot are modularized into separate JavaScript functions, with styled red accents matching team colors.

Loading thumbnail…

Map of England with PL Club Logos

This example displays a map of England overlaid with the logos of Premier League clubs at their stadium locations. The visualization uses D3.js for geographic projection and rendering, specifically employing `d3.geoAlbers` for the map projection and `d3.geoPath` to draw the county boundaries from TopoJSON data. Club logos are placed as SVG images at coordinates derived from stadium latitude and longitude, with their size scaled by a `FinalPoints` value from a CSV file. The logo images are loaded as external resources via the `xlink:href` attribute.

Loading thumbnail…

Map of England Simple

This example shows a map of England and Wales with red circular markers indicating the locations of Premier League stadiums. Using the d3-geo Albers projection, it renders county boundaries from a TopoJSON dataset via `topojson.feature` and `d3.geoPath`. Stadium latitude and longitude coordinates from a CSV file are projected and plotted as circles. The visualization updates asynchronously as data loads, with the map and markers drawn after both the geographic and stadium datasets are fetched.

Loading thumbnail…

Scatter Plot PL xG Data with both xP and Points with button

This example visualizes Premier League expected goals (xG) data for Arsenal, plotting both actual points and expected points (xP) across matchweeks as separate scatter plot layers over a shared axis. A clickable “Team” button toggles a dropdown menu listing all teams, allowing the user to filter and compare different squads. The visualization is built with D3 v7, using `scaleLinear` for axes, `csvParse` to load data from a GitHub gist, and applies a join-based approach for incremental SVG rendering of circles and menus. The code also integrates custom axis and dropdown modules.

Loading thumbnail…

Table updated of PL xG Data with both xP and Points

This visualization displays Arsenal’s Premier League expected points (xP) and actual points across matchweeks, rendered as a table alongside a scatter plot with two overlaid line charts. The code uses D3 v7 APIs including `scaleLinear`, `line`, `axisLeft`, and `axisBottom` to draw axes and paths, while the table is built from parsed CSV data using `csvParse` and dynamic column mapping. Data comes from a GitHub-hosted CSV file, with xP and Points values converted to numbers.

Loading thumbnail…

Line Chart PL xG Data with both xP and Points

This line chart visualizes Arsenal's expected goals (xG) data across Premier League matchweeks, comparing their xP (expected points) against actual Points earned. The visualization uses a red solid line for points and a green dashed line for xP, with both plotted against the same axis. Built with D3.js v7, the implementation uses `scaleLinear` for axes and the `line()` generator to create path elements. The data is loaded via `csvParse` from a GitHub gist containing the 2021-22 season statistics.

Loading thumbnail…

Table of PL xG Data with both xP and Points

This example displays a table of Arsenal’s Premier League data, showing matchweek, expected points (xP), actual points, and expected points table position. The code fetches a CSV file from a GitHub gist, parses it with `d3.csvParse`, and filters rows for Arsenal. It builds an HTML table using D3’s selection and data-join methods, appending table headers and rows. The visualization also includes commented-out D3 line chart code using `d3.line()` and axes, but the active output is purely the tabular view.

Loading thumbnail…

Scatter Plot PL xG Data with both xP and Points

This scatter plot visualizes Arsenal’s Premier League performance by overlaying actual points and expected points (xP) across matchweeks. Red and green circles distinguish the two metrics, with both plotted against the same axes. The visualization uses d3.scaleLinear for scales, d3.scaleOrdinal for coloring, and d3.axisLeft and d3.axisBottom for axes. Data is fetched as CSV and parsed with d3.csvParse, then filtered to Arsenal. The chart updates responsively with window dimensions and renders separate groups for points and xP values.

Loading thumbnail…

Scatter Plot PL xG Data

This scatter plot shows Arsenal’s points and expected points (xP) per matchweek across a Premier League season. A single SVG canvas displays two overlaid linear scales mapping matchweek to points and xP, with axes labeled accordingly. The code uses D3 v7 primitives like `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` from the `axes` module. Data is loaded via `csvParse` from a raw GitHub CSV, filtered for Arsenal, and rendered as circles using `selectAll('circle').join()`. The visualization clarifies how actual results compare to underlying performance metrics.

Loading thumbnail…

Scatter Plot Simple PL xG Data

This scatter plot visualizes Arsenal's performance data from the 2021-22 Premier League season, displaying two overlapping datasets from a CSV file: actual points scored and expected points (xG) per matchweek. Both series appear as red and green circles plotted against matchweek on the x-axis, with no axes or labels visible. The visualization uses d3.scaleLinear for both coordinate mappings and d3.scaleOrdinal for color encoding, while data is fetched and parsed with d3.csvParse.

Loading thumbnail…

Scatter Plot Simple PL xG Data

This scatter plot visualizes Arsenal's performance data from the 2021-22 Premier League season, displaying two overlapping datasets from a CSV file: actual points scored and expected points (xG) per matchweek. Both series appear as red and green circles plotted against matchweek on the x-axis, with no axes or labels visible. The visualization uses d3.scaleLinear for both coordinate mappings and d3.scaleOrdinal for color encoding, while data is fetched and parsed with d3.csvParse.

Loading thumbnail…

Pseudo PL Plot

This example displays a cumulative expected points (xP) progression across ten match weeks for a single team, with circles marking each match and a red line connecting them. The visualization renders in an SVG generated by D3 v7, using the `d3.line` generator to create the path for the line and data joins with `.join()` to bind the circles. The custom `lineTest` and `xPosition` functions independently map match week and xP values to coordinates, with circle positioning based on the raw data and the line path derived from the same coordinate system.

Loading thumbnail…

Pseudo PL Plot with real data

This example combines two scatter plots into a single visualization, overlaying an x-position view and a y-position view of the same dataset. The x-position plot places circles along the horizontal axis based on matchweek, while the y-position plot centers all circles vertically. The code uses D3 v7 selections and joins, with separate `xPosition` and `yPosition` modules drawing on two SVG elements. Real data tracks team performance metrics across ten matchweeks, with circle radii differing between the two views.

Loading thumbnail…

Mapping Data for Premier League xG for teams from 21-22 season

This visualization displays the average points per game (PPG) and expected points per game (xPPG) for each Premier League team during the 21-22 season, derived from Understat data. It uses d3.csvParse to load the CSV, d3.flatRollup to group matches by team, and d3.max to calculate the final point totals before dividing by 38 matchweeks. The results are rendered as a JSON-formatted text block using d3.select and .join. Team, Matchweek, xP, Points, and xPTable variables are all parsed as quantitative or categorical types for the aggregation.

Loading thumbnail…

Data Transformation for Premier League xG for teams from 21-22 season

This example demonstrates data transformation for Premier League xG data from the 21-22 season, filtering the dataset to a single team (Arsenal) and computing their maximum accumulated xP and Points values. The visualization uses d3.csvParse to load the CSV, then applies type coercion to convert Matchweek, xP, Points, and xPTable from strings to numbers. Using d3.max, it calculates the season’s peak expected points and actual points for Arsenal, and displays the filtered team data as JSON in a pre element. The data originates from understat.com and is fetched asynchronously through a gist URL.

Loading thumbnail…

Loading Data for Premier League xG for teams from 21-22 season

This example demonstrates the loading process for Premier League expected goals (xG) data from the 21-22 season, sourced from Understat. The visualization displays the raw CSV data as a JSON-formatted table within a `<pre>` element, showing each team’s categorical name alongside quantitative values for matchweek, expected points (xP), actual points, and league table position based on xP. The code fetches the CSV file asynchronously, parses it with `d3.csvParse`, converts numeric strings to numbers, and renders the state using d3’s selection and join operations. The interface initializes with a loading state before populating the data table.

Loading thumbnail…

Loading Boston Celtics Shot Log Data from 2014-2015 Season

This example loads Boston Celtics shot log data from the 2014-2015 NBA season and displays the raw parsed dataset as a JSON-formatted text block. It uses `d3.csvParse` to convert a CSV file fetched from a GitHub gist, then coerces quantitative fields like `SHOT_DIST`, `PTS`, and `CLOSE_DEF_DIST` to numbers before rendering them. The visualization demonstrates a simple data-loading pipeline with `fetch`, `select`, and `join`, showing either a loading state or the full array of shot records.

Loading thumbnail…

Loading Overall Player Data for 21-22 Premier League

This example loads and displays the complete overall player dataset for the 2021-22 Premier League season, sourced from FBref. It shows the raw data as a JSON-formatted text dump within a `<pre>` element, initially displaying a "LOADING" state while fetching. The visualization uses D3 v7’s `csvParse` to convert the fetched CSV into an array of objects, coercing all quantitative fields to numbers. The `viz` function orchestrates the rendering, and state management is handled via a custom `setState` function that triggers re-renders. No visual chart is generated; the output is purely the parsed data structure.

Loading thumbnail…

Mouse Follower (Make Something)

A rectangle moves in opposition to the mouse's cursor, its position derived from the inverted coordinates of the pointer within the viewport. Clicking resets the rectangle to the mouse's location by swapping the axes. Built with D3 v7 and the `select` API, the visualization uses `svg.on('mousemove')` and `svg.on('click')` handlers to update state, which then drives the rectangle's `x` and `y` attributes, styled with an orange fill and purple stroke.