The avatar for @tashapiro
Tanya Shapiro
Independent Data Analytics Consultant, passionate about data visualization and storytelling · she/her 🏳️‍🌈
Public
Edited
Apr 20, 2023
Fork of Plot: LeBron James’ shots
•
6 forks
21 stars
3
Notebook examples
Disjoint force-directed graphExplore 🤗 Hugging Face datasets with ParquetNVIDIA RTX 3000 PricesMarket Cap TreemapShark Tank: Tech Pitches ExplorationExperimental Plot BeeswarmBeeswarm for demographic dataArc chart in a boxActive peers by daytimeWindsor-Essex Emergency Rooms - An Analysis of Wait Time DataZoomable Sunburst for food imports in the US from 2010 to 2017.Clinical Trials Annotation Data Exploration067 Tessellated tangramsInteractive Exploration of Wine Quality and ValuationUnder The InfluenceNewspaper Contour MapsRecommender systemsPlot: LeBron James’ shots
NBA Player Shot Charts
Linde–Buzo–Gray stipplingGive Me ColorsWatercolor
Also listed in…
Sports
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mark =
// if mark is Scatter
plot_input==='Scatter' ?
Plot.dot(filteredShots,
{x:"locationX",
y:"locationY",
fill:`${filters.color_input}`,
title: (d) => `Shot ID #${d.idEvent} \n Event: ${d.typeEvent} \n Distance: ${d.distanceShot} ft}`,
stroke:"white",
strokeWidth:1,
r:8}) :
// if mark is Tile
plot_input==='Tile' ?
[Plot.rect(filteredShots,
Plot.bin({fill: "count"}, {x: "locationX", y: "locationY", inset: 0, interval: filters.tile_bin_input})),
Plot.gridX({interval: filters.tile_bin_input, strokeOpacity: 0.05}),
Plot.gridY({interval: filters.tile_bin_input, strokeOpacity: 0.05})]:
plot_input == "Density" ?
Plot.density(filteredShots,
{x:"locationX", y:"locationY", fill:`${filters.color_input}`}) : null;
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {Plot} from "@mkfreeman/plot-tooltip"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
shots_player.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
player_images.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
filteredShots = shots_player.filter(i => {
if (filters.player_input.includes(i.namePlayer) && i.distanceShot<=filters.distance_input) {
if (filters.event_input === "Missed Shot" || filters.event_input === "Made Shot") {
return i.typeEvent === filters.event_input;
} else {
return true;
}
} else {
return false;
}
});
Insert cell
filteredImage = player_images.filter(i => filters.player_input.includes(i.namePlayer))
Insert cell
player_list = [...new Set(shots_player.map(i => i.namePlayer))].sort()
Insert cell
Insert cell
<style>
@import url('https://fonts.googleapis.com/css?family=Archivo&display=swap');

body, h1{
font-family:'Archivo';
max-width:none;
}

label, form, input, select {
font-family:'Archivo'!important;
font-size:16px !important;
}

label {
font-weight:bold;
}

p {
max-width:none;
}

.hover{
font-family:'Archivo';
font-size:12px;
}
.player-image-container{
display:inline-block;
border-radius:50%;
height:70px;
width:70px;
border: 1px solid;
background-color:whitesmoke;
margin-right:15px;
}

.player-image {
display: block;
object-fit: cover; /* Scale the image to cover the entire container */
height: 70px; /* Set the height to 70px */
width: 70px; /* Set the width to 70px to make it square */
margin-right: 15px; /* Add margin for spacing */
clip-path: circle(50% at 50% 50%); /* Clip the image into a circle */
}

.player-shots {
padding-left:50px;
font-size:25px;
}
.player-info, .player-card, .player-image {
display:flex;
align-items:center;
}

.player-info{
margin-right:30px;
height:90px;
}

.player-title{
font-weight:bold;
font-size:25px;
}


.player-team{
color:grey;
font-size:20px;
}

.team-title{
width:300px;
}


.team-title, .player-stats{
display:block;
}


</style>
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more