jackfletch / splash Goto Github PK
View Code? Open in Web Editor NEWNBA Shooting Visualization :basketball:
Home Page: https://splash.jackfletch.com
NBA Shooting Visualization :basketball:
Home Page: https://splash.jackfletch.com
The color legend is loading an image from d3's repo to show the color scheme. This should be served locally.
Victory's event propagation is quite slow, and for some reason victory's charts re-render all elements when only the hover element changes. Similar to the LeftRightChart, change BarChart to use the custom Voronoi implementation for performance gains.
While developing, I noticed the hover cursor for HexShotchart is off-center. This bug is not live on https://splash.jackfletch.com (running 2b71c29) so there must've been a recent regression that messed up with the positioning or scaling.
Hexagonal bins are difficult to smooth values between. Write a function that applies a simple kernel over the hexbins to even out the shooting percentage between nearby bins. This will help with the varied colors behind the 3-pt line.
Route /player/[playerId] to the player with playedId
The app crashes when hovering over the HexShotchart hexagons which are supposed to trigger a tooltip.
As noted (and found to be problematic) in #17, code similar to the following exist in all of the chart components:
const margin = {top: 20, right: 20, bottom: 20, left: 20};
const svgWidth = 540;
const svgHeight = 500;
const width = svgWidth - margin.left - margin.right;
const height = svgHeight - margin.top - margin.bottom;
const x = scaleLinear()
.domain([0, maxDistance])
.range([0, width]);
const y = scaleLinear()
.domain([0, 1])
.range([height, 0]);
Refactoring this duplicated configuration to a reusable component/function/hook would be wise.
Victory is a great React visualization library. However, its charts are quite slow for this project's use case due to re-rendering every time a prop changes.
I have implemented some custom charting components (e.g., #23) and removed all of the most victory charting components (e.g., #26). Because I'm favoring my custom components over victory's, I want to cleanse the project of any remaining mention of the library.
The charts using victory
as a charting library do not respond to the hover
prop that holds the current hover distance. Instead, they pass a built-in label component to victory
's VictoryVoronoiContainer
, which dictates which data point is hovered.
Change these charts to respond to hover
instead of using the built-in label component method.
Left-right charts will showcase a player's tendencies towards a specific side of the court.
Extract functions from src/lib
to @jackfletch/splash-vis-utils.
Having all axis ticks helps the user understand the data...
There is an uncolored hexagon bin (located near half court) in Lebron's 2019-20 season shotchart. I believe this is a bug associated with a shot from within maxDistance but its bin is centered beyond maxDistance.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.