Get above/below .500 point differential for NBA teams.

100%

Get above/below .500 point differential for NBA teams.

✓ Published0🌍 Public

Last edited Feb 9, 2014

Created on Feb 9, 2014

This example visualizes how NBA teams perform against opponents above and below the .500 win-percentage threshold, ranking teams by their point differential against sub-.500 teams across each season. The Ruby script queries a PostgreSQL database of game and team statistics, then computes average scoring margins for games versus winning and losing opponents, sorting teams by the spread between those two margins. It outputs a terminal table via the `terminal-table` gem and writes the same ranked data to CSV files. The code relies on raw SQL through the `pg` API to join game results, demonstrating a straightforward data-processing pipeline rather than interactive visualization.

AI-generated description

Similar vizzes

Loading thumbnail…

Generate graphs from NBA data

The visualization generates two bar charts from NBA team statistics, each plotting point differentials against a baseline. The first chart displays each team’s overall point spread, while the second groups the same differentials into “Above 500” and “Below 500” categories for comparison. Using pandas for data manipulation and matplotlib for plotting, the code reads CSV files, sorts teams by differential, and renders bar charts with custom colors and axis labels. The output is saved as PNG images at 150 DPI, with data sourced from stats.nba.com.

CCaged

73% match

Loading thumbnail…

Gist fd36310058f0b9965318

The graphic displays the score differential for every NBA game in 2015, charting the home team’s lead (positive) or deficit (negative) at each minute of play. Each team is shown in its own small multiples panel, with colored circles representing each game’s trajectory and a line highlighting a selected match. Built with `d3.js`, `d3-jetpack`, and `d3-starterkit`, the visualization uses a threshold color scale to encode the point difference, and interactive hover effects reveal game details such as date, opponent, and final score. The data originates from a JSON file containing minute-by-minute scores for games on a specific date.

11wheel

67% match

Loading thumbnail…

Gist 1e62506e7bca2ddfbb82

This visualization maps every NBA game since 1946 onto a grid where the x-axis represents combined losses and the y-axis represents combined wins. Each cell’s color and size indicate the number of games played between teams with that specific combined win-loss record. The chart uses d3.csv, d3.nest, and d3.scale.quantile to process the game data and render the colored rectangles. The visualization also highlights the best and worst historical records with step-after lines, making it easy to compare team performance over time.

11wheel

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

63% match

Loading thumbnail…

Transforming data of Historical NBA Performance

This example displays historical average winning percentages for NBA teams, computed from a CSV dataset and rendered as a JSON array. The visualization uses D3 v7’s `flatRollup` and `sum` functions to aggregate win percentages per team across all seasons. After fetching the data via a URL, `csvParse` converts the CSV string into objects. The computed results are output as formatted text inside a `<pre>` element, demonstrating a straightforward data-transformation pipeline without additional chart rendering.

QQingyang Wang Profolio

63% match

Loading thumbnail…

Table

This interactive table displays 2018-2019 NBA team statistics, including win/loss records, percentages, and scoring differentials, sorted by wins. Users can filter the data by league conference using the Eastern and Western buttons. The visualization combines a jQuery DataTable with SVG foreignObject rendering to embed an HTML table within a D3 graphic, loading its data from a CSV file and updating the table contents dynamically upon button selection.

JJerfaas

62% 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…

Final Project

This interactive NBA visualization compares team winning percentages from 2010 to 2022 using two switchable chart types. A line chart displays seasonal win rates for all teams, highlighting a selected team in black, while a scatter plot shows the relationship between a team’s historical average win rate and its performance in a selected season using team logos as points. Users toggle between charts via buttons, select teams or seasons from dropdown menus, and hover over scatter plot logos for detailed tooltips. The visualization is built with D3 v7, using CSV data parsed and aggregated with `csvParse` and `flatRollup`.

QQingyang Wang Profolio

61% match