Skip to main content
Log in
H

hmkyriacou

@hmkyriacou·15 public vizzes

Loading thumbnail…

NFL homeFieldAdvgt 4-10-23

This interactive visualization explores how weather affects home-field advantage in NFL football from 2015–2023, using data from Pro-Football-Reference.com. Users filter by weather type and month to see team logos plotted on a scatter plot comparing home win percentage against a chosen metric, with a choropleth map displaying team locations. Clicking logos highlights teams across views, with animated transitions via D3 v7’s `transition()` method and tooltips powered by custom `pointer` event handlers. The visualization combines `d3.scaleLinear`, `d3.geoAlbersUsa`, and `d3.geoPath` for map rendering.

Apr 10, 2023
Loading thumbnail…

image clipped

An NFL team logo is clipped by an arc-shaped mask, creating a pie-like visual effect. The logo renders as a static image within a D3.js SVG, clipped using an arc path generated by `d3.arc`. The visualization uses data from 2015–2023 NFL seasons, sourced from Pro-Football-Reference, though the current view focuses on a single logo. The implementation applies a `clipPath` and `xlink:href` to display the Steelers logo, with the arc positioned at the SVG center.

Mar 28, 2023
Loading thumbnail…

NFL homeFieldAdvgt 3-28-23

This interactive visualization explores the relationship between weather conditions and NFL home-field advantage from 2015 to 2023. Users can toggle between temperature, rainfall, and snowfall data, as well as select between two win-percentage metrics, with results displayed as a scatter plot, line chart, or geographic map of team locations. The map uses `d3.geoAlbersUsa` and `d3.geoPath` to project team coordinates, while pie charts show the proportion of wins at home. The scatter and line charts rely on `d3.scaleLinear` and `d3.line`. Data originates from Pro-Football-Reference, processed from raw game scores to calculate per-team win-percentage statistics.

Mar 28, 2023
Loading thumbnail…

NFL homeFieldAdvgt 3-18-23

This visualization explores NFL home field advantage by plotting team logos on a scatterplot, line chart, or map based on user-selected weather and win percentage metrics. Interactive dropdown menus let viewers switch between temperature, rainfall, and snowfall data, as well as toggle between home field win percentage and percent of wins at home. The map view uses d3.geoAlbersUsa and d3.geoPath projections with team logos as images, while the scatter and line charts use d3.scaleLinear and d3.line. The data spans the 2015-2023 seasons from pro-football-reference.com, with teams normalized across relocations and rebrandings.

Mar 20, 2023
Loading thumbnail…

NFL homeFieldAdvgt w Map

This interactive visualization explores NFL home field advantage by connecting team performance metrics with weather conditions. Users toggle between temperature, rainfall, and snowfall data via radio buttons, and can switch between scatter plots, line charts, and a map view. The scatter plot displays team logos as points, while the line chart tracks trends over time. A United States map uses d3.geoAlbersUsa and d3.geoPath to show team locations. Data comes from pro-football-reference.com for the 2015–2022 seasons, rendered with d3.v7 and topojson-client.

Mar 16, 2023
Loading thumbnail…

Data-Viz-Final-Project

This visualization uses scatter plots and line charts to explore NFL home field advantage from weather conditions, using data from the 2015-2023 seasons sourced from pro-football-reference.com. D3 v7 renders team logos as images positioned on scales for game attributes, with interactive radio buttons to switch between different data views. The chart includes labeled axes and transitions to animate between selections, showing trends in how weather impacts game outcomes for each franchise.

Feb 24, 2023
Loading thumbnail…

NFL-weather-vs-winPct

This scatterplot maps each NFL team’s home-field winning percentage against its city’s average annual temperature, using team logos as data points. The visualization is built with D3.js v7, including `scaleLinear` for axes and `axisLeft`/`axisBottom` for tick marks. Team logos render via SVG `image` elements using externally hosted URLs, while data on win percentages and temperatures spans the 2015–2023 seasons, sourced from Pro-Football-Reference.com.

Feb 19, 2023
Loading thumbnail…

first-viz

This visualization plots average weather conditions against win percentage for NFL teams, using team logos as scatterplot points. The axes map temperature (derived from the weather_data object) against win rates calculated from the nested game scores in data.json. Users can compare team performance across temperature conditions. The visualization is built with D3.js v7, using scaleLinear for axis scaling, while the scatterPlot module renders each team as an image positioned by the x and y scales.

Feb 19, 2023
Loading thumbnail…

pseudo viz

Four small multiples display home winning percentages for AFC East teams during the 2022 NFL season. Each panel uses team colors and a donut chart to represent the proportion of home games won, with text labels identifying the team and its percentage. The visualization loads game results from a JSON file, calculates win rates, and renders the charts using D3 v7’s `arc` generator and data joins.

Feb 6, 2023
Loading thumbnail…

Transforming CBP Data

This example transforms U.S. Census County Business Patterns data for New York State, identifying the economic sector with the most establishments in each county. The visualization fetches county-level records via the Census API, filters out the “Total for all sectors” row, and uses `flatGroup` and `maxIndex` to summarize the dominant sector per county. The resulting JSON summary is displayed as text in a `pre` element, with all data processing handled through D3 v7 utilities like `csvParse`, `rollup`, and `bin`.

Jan 29, 2023
Loading thumbnail…

Video Game Sales

This example visualizes video game sales data from Kaggle, showing all games with over 100,000 sales. It uses d3.csvParse to load and parse the dataset, converting sales figures and release years to numbers for analysis. The visualization renders the current state as a JSON string in a pre element using d3’s data join, allowing users to inspect the raw data structure. The code demonstrates a state management pattern with setState, triggering re-renders through d3.select and text updates.

Jan 22, 2023
Loading thumbnail…

County Business Practices

This example displays the U.S. Census Bureau’s County Business Patterns data for 2020, showing employment figures and firm-size distributions across different industry classifications within a chosen Combined Statistical Area. The visualization presents the dataset as a raw table, allowing users to inspect the hierarchical NAICS codes alongside metrics like annual payroll, number of establishments, and employee count brackets. Under the hood, the code fetches the CSV, parses it with `d3.csvParse`, and converts numeric strings to numbers before rendering the JSON structure into a `<pre>` element via D3’s `selectAll` and `join` operations.

Jan 22, 2023
Loading thumbnail…

County Business Practices

This visualization compares data from the U.S. Census Bureau’s County Business Patterns for 2020 against a separate dataset of scores. Using a D3.js-based web application, it loads two CSV files from GitHub Gists and displays their parsed contents as JSON in two separate `<pre>` elements. The code leverages d3’s `csvParse` and `select` APIs within a state-driven render loop, fetching and updating data asynchronously to showcase raw data from the Combined Statistical Areas. It offers a minimal, text-based view of the structured datasets.

Jan 22, 2023
Loading thumbnail…

NFL Stats Data

This example displays NFL matchup and scoring data loaded from two CSV files. The visualization initially shows raw parsed data as JSON text using D3’s `csvParse` and `select`/`join` pattern. It fetches two datasets—matchups and per-team scores—and converts numeric fields like points for/against and wins. The code demonstrates a state-management flow where data loads asynchronously and triggers re-renders via a custom `setState` function, though no graphical chart is yet implemented beyond the text output.

Jan 22, 2023
Loading thumbnail…

Ball Bounce

A circle rests at the center of the screen, and the user can click and drag it with the mouse. Upon release, the ball's velocity is calculated from the drag distance and time, causing it to move and bounce off the window edges. The ball can be grabbed again mid-motion to be thrown anew. The visualization uses D3 v7’s `select`, `timer`, and event handlers on the SVG to manage rendering, with state tracked for position and momentum.

Jan 18, 2023