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.
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.