D3 Kit Basketball Court

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/kristw/75b61f9beeab9b530612/raw/389e984e4041117a9185cf6edad9f6b85a38097a/d3kit.min.js"></script>

CoffeeScript

opts =
  margin: {top: 10, bottom: 10, left: 10, right: 10},
  initialHeight: 400,
  initialWidth: 600
  basketDiameter: 1.5
  basketProtrusionLength: 4
  basketWidth: 6
  colorLegendTitle: 'Efficiency'
  colorLegendStartLabel: '< avg'
  colorLegendEndLabel: '> avg'
  courtLength: 94
  courtWidth: 50
  freeThrowLineLength: 19
  freeThrowCircleRadius: 6
  heatScale: d3.scale.quantize().domain([
    0
    1
  ]).range([
    '#5458A2'
    '#6689BB'
    '#FADC97'
    '#F08460'
    '#B02B48'
  ])
  height: undefined
  hexagonBin: (point, bin) ->
    attempts = point.attempts or 1
    made = +point.made or 0
    bin.attempts = (bin.attempts or 0) + attempts
    bin.made = (bin.made or 0) + made
    return
  hexagonBinVisibleThreshold: 1
  hexagonFillValue: (d) ->
    d.made / d.attempts
  hexagonRadius: .75
  hexagonRadiusSizes: [
    0
    .4
    .6
    .75
  ]
  hexagonRadiusThreshold: 2
  hexagonRadiusValue: (d) ->
    d.attempts
  keyMarkWidth: .5
  keyWidth: 16
  restrictedCircleRadius: 4
  sizeLegendTitle: 'Frequency'
  sizeLegendSmallLabel: 'low'
  sizeLegendLargeLabel: 'high'
  threePointCutoffLength: 14
  threePointRadius: 23.75
  threePointSideRadius: 22
  title: 'Shot chart'
  translateX: (d) ->
    d.x
  translateY: (d) ->
    @_visibleCourtLength - (d.y)
  width: 500
    
calculateVisibleCourtLength = (o) ->
  halfCourtLength = o.courtLength/2
  threePointLength = o.threePointRadius + 
    o.basketProtrusionLength
  o.visibleCourtLength = threePointLength + 
    (halfCourtLength - threePointLength)/2
  return o
  
# helper to create an arc path
appendArcPath = (base, radius, startAngle, endAngle) ->
  points = 30
  angle = d3.scale.linear()
    .domain([0, points - 1])
    .range([startAngle, endAngle])
    
  line = d3.svg.line()
    .interpolate('basis')
    .tension(0)
    .radius(radius)
    .angle (d, i) -> angle(i)
  
  linePath = base.selectAll("path").data([{}])
  linePath.enter().append('path')
  linePath
    .datum(d3.range(points))
   ...