Skip to main content
100%

Real Madrid Opta

✓ Published0🌍 Public
Aandrewbt
Last edited Feb 20, 2018
Created on Feb 20, 2018

Real Madrid Opta plots basketball shot locations on a full-court image overlay using Leaflet and CartoDB. Three CartoDB sublayers query separate SQL tables to render shot markers as colored dots, with each color representing a different opponent and match date. The map is centered at an extreme zoom level of 21 over the court image, and a small readout div displays zoom information. The visualization uses the CartoDB.js library and Leaflet.zoomdisplay plugin to show the current zoom level.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Basketball Density Shot

This visualization displays the shot density and accuracy of LeBron James on a basketball court, using player shot data from the nba_api. Each shot is shown as a small circle, with green marks for made shots and red for misses, overlaid on a pixelated density grid. The grid’s color, using an interpolatePiYG palette driven by a d3.scalePow, indicates the ratio of misses to makes per cell. The court and its markings are drawn with React’s SVG components, while d3’s scaleLinear handles the coordinate mapping for both the player shots and the court geometry.

DDavid Emmanuel Katz
65% match
Loading thumbnail…

Fork of More Basketball Shot Charts

This interactive visualization displays LeBron James’s shot chart overlaid on a basketball court, with green and red circles marking made and missed shots. The court is drawn as SVG elements using React components. Shot data is loaded from a CSV via `d3.csv`, scaled with `d3.scaleLinear`, and rendered as circles using the `Marks` component. The court geometry uses `d3.lineRadial` for arcs, while player data comes from the `nba_api` dataset.

BbeauMarko
64% match
Loading thumbnail…

Basketball Shot Chart

This visualization displays an NBA basketball shot chart, plotting made and missed field goals as red and green circles on a detailed court diagram. The court, including the three-point line, free-throw lane, and basket, is drawn with React components and D3’s `scaleLinear`, `lineRadial`, and `arc` methods. Shot data is loaded from a CSV using `d3.csv` and mapped to positions. Makes are green, misses red, with the court rendered in SVG.

MMichael Bergerson
63% match
Loading thumbnail…

More Basketball Shot Charts

A basketball shot chart displays LeBron James’s field goal attempts as red and green dots on an SVG court, with misses in red and makes in green. The court is drawn using React components and D3 scales and radial line generators. Shot data comes from a CSV loaded via D3’s `csv` method, and the visualization maps player coordinates to court positions using `scaleLinear`.

MMichael Bergerson
61% match
Loading thumbnail…

Shotplot

This interactive SVG visualization plots every shot taken by a single soccer player across a season, with each shot positioned on a pitch diagram and colored by outcome (goal, blocked, off target, etc.). Hovering over a shot reveals a tooltip with the opponent, match minute, and home/away status. The visualization uses D3.js version 3.5 to draw the pitch, render the shot data points, and handle the d3-tip tooltips, with the data displayed in a static text file.

SSaintat1
61% match
Loading thumbnail…

Real Madrid vs. Elche (1st half)

This visualization shows pass networks between starting players during the first half of a Real Madrid vs. Elche match, plotted on an SVG soccer field. Player positions are fixed coordinates representing their average location, and curved links between them indicate completed passes, with stroke width scaled by pass frequency. Built with D3.js and the d3.rollup plugin, the code loads player and pass data from a JSON file, renders the field from a separate SVG file, and adds interactive tooltips on hover that highlight incoming and outgoing passes. The animation shows the pass network’s structure dynamically as users explore individual players.

KKRE87
60% match
Loading thumbnail…

Real Madrid vs. Elche (1st half)

This visualization shows pass connections among Real Madrid's starting players during the first half of their September 23, 2014 match against Elche. Player positions appear as circles overlaid on a soccer pitch, with curved arcs linking them; arc thickness reflects the number of passes between two players. Hovering over a player highlights outgoing passes in blue and incoming passes in orange, while a tooltip displays the player’s name, number, and position. The code uses D3.js and the `d3.rollup` library to aggregate pass data from a JSON file, rendering the pitch from an SVG template and animating interactions via D3 transitions.

KKRE87
60% match
Loading thumbnail…

Shot Distance Bar Plot

An interactive bar plot displays NBA shot distances across six court zones, with bars colored steelblue and labeled axes for area and goals. Buttons update the visualization to filter shots by game quarter. Built with D3 v7, the chart uses scaleBand and scaleLinear for positioning, while d3.csv loads data from a GitHub-hosted CSV file of NBA shot chart details, and transitions animate bar height changes across updates.

Yyc4004
60% match