Home/Away Viz

100%

✓ Published0🌍 Public

Last edited Jul 13, 2020

Created on Jul 7, 2020

This visualization displays the home and away games for 30 teams across 176 days of a season. Black rectangles mark home games for each team, while red rectangles indicate away games, with team names listed along the left edge. The upper display organizes games by each team’s schedule order, while the lower display arranges them chronologically by day. Built with D3.js v5 and SVG, the code reads from a CSV file and dynamically redraws the visualization on window resize.

AI-generated description

https://vizhub.com/jeremy-weiss/43f6ccb50f274c4b9b5fd5bc52bcea51

Vizualizes the home/away games for the schedule described by schedule.csv.

Black is HOME

Red is AWAY

MIT Licensed

Similar vizzes

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.

Hhmkyriacou

70% match

Loading thumbnail…

NBAanalysis

This interactive bar chart displays the number of games played by players on selectable NBA teams. A dropdown menu chooses the team, and a color legend distinguishes wins from losses by shaded bars. The visualization is built with React and D3 v5, using `scaleBand` for the x-axis and `scaleLinear` for the y-axis. SVG rectangles render the data, which is parsed from a CSV URL using D3's `csv` function.

Yyc4004

70% match

Loading thumbnail…

Gist 45a6ae045cfccdc8c2e66ea43963e225

This visualization shows shot differentials for NHL games in the 2017-2018 season, with each game displayed as a small sparkline-style chart. The interactive team selector filters games by team. The charts are generated with d3.v4, using `d3.scaleLinear` for axes, `d3.line` for the score lines, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data comes from CSV files containing play-by-play shots and goals, rendered as SVG with hover effects.

MMbrownshoes

69% match

Loading thumbnail…

Untitled

This interactive bar chart displays games played by NBA players for a selected team, with a dropdown menu to switch between all 30 teams. Each bar represents a player, colored lightgreen, and the y-axis shows games played while the x-axis lists abbreviated player names. The visualization is built with React and rendered as SVG, using d3.scaleBand and d3.scaleLinear for scales, d3.csv for data loading, and ReactDropdown for team selection. Data comes from the NBA Player State Dataset, with player names shortened to first initial and last name initial format.

AAnne Lin

69% match

Loading thumbnail…

HTML Starter

This example displays two animated line charts comparing "Away" and "Home" values across eight time points, with interactive hover effects that highlight lines and reveal individual data points. The visualization uses D3 v5 scales (d3.scaleLinear), axes, and line generators to render SVG paths, with circles marking each value. The code also incorporates React as the framework and includes smooth transitions and hover tooltips that display numeric values.

Rremyapk

69% match

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.

Hhmkyriacou

69% match

Loading thumbnail…

Activity6_Question2_3

This stacked bar chart compares home and away cricket match wins across teams, using horizontal bars where each team’s total wins are segmented into two colored parts. The visualization loads CSV data from GitHub, employs d3.stack for data stacking, and uses D3 v7 with SVG rendering to draw the chart, including axes, labels, a legend, and a tooltip that shows team and win-type details on hover.

Ggnitishreddy0245@gmail.com

68% match

Loading thumbnail…

SVG

This example shows two labeled line charts, “Home” and “Away,” tracking a numeric value across eight time steps, with hover interactions highlighting each line and its points. The visualization is built with React and D3 v5, using `d3.scaleLinear` for axes, `d3.line` for path generation, and SVG elements for rendering. Circles mark individual data points and show their values on hover, while lines increase in opacity and stroke width on mouseover. The chart includes bottom and left axes generated with `d3.axisBottom` and `d3.axisLeft`, and all transitions use D3’s `.transition()` and `.duration()` methods.

VVishwas2629

68% match