carey price's goals against

100%

carey price's goals against

✓ Published0🌍 Public

Last edited Mar 26, 2018

Created on Mar 26, 2018

This visualization plots the location of shots and goals against goaltender Carey Price during the 2017/18 NHL season. Using D3.js v4 with the d3-hexbin plugin, the chart aggregates shot locations into hexagonal bins over a hockey rink diagram, coloring each bin by the proportion of goals scored from that area. The color scale ranges from steel blue to red, with redder areas indicating a higher goal rate. The rink background is drawn from the war-on-ice icerink library, and the data comes from a CSV file of individual shot events.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Gist 1debda22711f899486839341c67adf87

This visualization maps hockey shot and goal locations from the allGames.csv dataset, plotting each event as a point on an ice rink. It uses D3.js to position and render markers, with the x and y coordinates directly reflecting the recorded spatial data. The concrete libraries involved include D3 for SVG manipulation and data binding, allowing for interactive exploration of shot patterns by goalie and event type. This example demonstrates a straightforward scatterplot approach to sports analytics, making it easy to compare shooting tendencies across different players.

MMbrownshoes

66% 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

65% match

Loading thumbnail…

D3 Scatter Plot - Gretzky

This D3 scatter plot visualizes Wayne Gretzky’s career goals, plotting each goal’s date against the period (period 1, 2, or 3) in which it was scored. Using a time-scaled x-axis and a categorical point-scaled y-axis, the SVG rendering displays overlapping semi-transparent circles. The implementation leverages d3.csv for data parsing, d3.scaleTime and d3.scalePoint for axes, and d3.axisLeft and d3.axisBottom for ticks, with the dataset sourced from a GitHub Gist.

PPatrick-Houlihan

63% match

Loading thumbnail…

Gist 35554bfea1e16fad6823260f8957d873

This visualization presents NHL player statistics from the 2018-2019 season, comparing performance metrics across different competition levels, alongside team standings throughout the season. The player view uses a radar chart to display various advanced stats, while the standings section shows points progression. The code leverages D3.js for data binding and SVG rendering, with JSON files providing the underlying data for both individual player analytics and team ranking trajectories.

MMbrownshoes

62% match

Loading thumbnail…

Scatter Plot

A scatter plot visualizes the relationship between year and goals scored for NHL playoff teams, with circles colored by team. The chart includes labeled axes for both dimensions, rendering data from a CSV file. The visualization uses D3 v7 for its scales, axes, and data joins, with a helper function `scatterPlot` managing the plotting logic. Axes are generated using `axisLeft` and `axisBottom`, while `scaleLinear` and `extent` handle the data mapping. The visualization populates incrementally as data loads asynchronously via `fetch`.

Sstchiang

61% match

Loading thumbnail…

Gist 2d7133b7a34afa5c0ddb698237987830

This example visualizes NHL team performance metrics from a JSON dataset of game statistics, plotting each team's goals for and against across multiple games. It uses D3.js to render a scatterplot with team abbreviations as labels, positioning points based on goalsFor and goalsAgainst values while encoding win/loss records through point color. The visualization leverages d3.scalePoint for axes, d3.forceSimulation for label collision avoidance, and Canvas rendering to display all team data points from the standings.json file.

MMbrownshoes

60% match

Loading thumbnail…

Fork of NBA Hex Shot Chart

A hexbin shot chart visualizes Damian Lillard's 2019-20 regular season field goal attempts, overlaid on a basketball court. Each hexagon's size encodes shot frequency, while its color, using a red-yellow-blue scale, shows the difference between his field goal percentage and the league average. The visualization uses `d3.hexbin` for binning and `scaleSequential` with `interpolateRdYlBu` for coloring. Shot data is loaded from a CSV, with the court drawn as an SVG path and the chart rendered in SVG.

Qqwxyyigesm

60% match

Loading thumbnail…

Fork of NBA Hex Shot Chart v3

This dashboard compares playoff shot charts for Stephen Curry and Jayson Tatum, displaying hexagonal bins colored by field goal percentage relative to league average and sized by shot frequency on a rotated basketball court. It uses d3.hexbin to aggregate shot coordinates into hexagons, with d3.scaleSequential and interpolateRdYlBu for color encoding, and loads data from CSV files via d3.csv. The SVG rendering includes dual courts, legends, and player labels, all styled with custom CSS.

MMichael Bergerson

60% match