jackfletch / splash Goto Github PK

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.