Independent Data Analytics Consultant, passionate about data visualization and storytelling · she/her 🏳️🌈
Public
Edited
Dec 14, 2023
7 stars
viewof selectedPositions = Inputs.checkbox(positions, {label: "Position", value: positions})
function playerImage(name) {
var data = nba_stats.filter(d => d.name === name);
var player_image = data[0].player_image
var pos = data[0].pos
var team_abbr = data[0].team_abbr
var team_logo = data[0].team_logo
return htl.html`<div class="player">
<div class="player-img-container">
<img src=${player_image} class="player-image" />
</div>
<div class="player-main">
<div class="player-main-name">${name}</div>
<div class="player-main-details">${pos} • ${team_abbr} </div>
</div>
<div class="player-team">
<img src=${team_logo} class="team-img" />
</div>
</div>`
}
nbaTable = () => { return Inputs.table(searchData, { height:470,
columns: ["name", "team_abbr","pos","g","fg","fga","fg_percent","pts"],
header: {
name: "PLAYER",
team_abbr: "TEAM",
pos: "POS",
g: "GP",
fg: "FGM",
fga: "FGA",
fg_percent: "FG %",
pts: "PTS"
},
align: {
pos:"center",
team_abbr: "center"
},
width: {
name: 230
},
format: {
name: x => playerImage(x)
}
})}
base_url = "https://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/"
positions = [...new Set(nba_stats.map(d => d.pos))].sort()
teams = [{value: 'ATL', label:'Atlanta Hawks'},
{value: 'DEN', label:'Denver Nuggets'},
{value: 'BOS', label: 'Boston Celtics'},
{value: 'LAC', label: 'LA Clippers'},
{value: 'GSW', label: 'GS Warriors'},
{value: 'LAL', label: 'LA Lakers'},
{value: 'PHO', label: 'Phoenix Suns'},
{value: 'OKC', label: 'OKC Thunder'},
{value:'DAL', label: 'Dallas Mavericks'}]
teamFormat = teams.map(d => ({ value: d.value, label: "<img style='height:30px;padding-right:5px;vertical-align:middle;'src="+base_url+d.value+".png><span style='vertical-align:middle;'>"+d.label+"</span>"}))
function dropdownButton(buttonName, content) {
function toggleDropdown() {
const dropdown = document.getElementById("dropdownContent");
// Check the current display property
if (dropdown.style.display === "none" || dropdown.style.display === "") {
dropdown.style.display = "block"; // Display the dropdown if it's hidden
// Add an event listener to the document body to detect clicks
document.body.addEventListener('click', closeDropdownOnClickOutside);
} else {
dropdown.style.display = "none"; // Hide the dropdown if it's displayed
// Remove the event listener when the dropdown is hidden
document.body.removeEventListener('click', closeDropdownOnClickOutside);
}
}
function closeDropdownOnClickOutside(event) {
const dropdown = document.getElementById("dropdownContent");
const button = document.querySelector('.dropbtn');
// Check if the click is outside the dropdown and button
if (!dropdown.contains(event.target) && event.target !== button) {
dropdown.style.display = "none"; // Hide the dropdown
document.body.removeEventListener('click', closeDropdownOnClickOutside);
}
}
const dropdownButton = htl.html`
<div class='dropdown'>
<button onclick=${toggleDropdown} class="dropbtn" style='height:30px;width:200px;padding:4px 2px;background-color:white;border:1px #ccc solid;border-radius:2px;'>${buttonName}</button>
<div class='dropdown-content' id='dropdownContent' style='position:absolute;z-index:2000;background-color:white;padding:5px 0px;display:none;width:200px;border-radius:2px;box-shadow:0 6px 12px rgba(0,0,0,.175);margin-top:5px;'>
<div style='margin:10px 5px;' class='inner-content'>${content}</div>
</div>
</div>`
return dropdownButton}
import {input} from "@jashkenas/inputs"
nba_full_stats.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
