Dramatic pie chart by monfera

Constant area for the known quantity, anchoring at the mass center of its sector - a quick remake draft on known legal (turquoise) vs. unknown black market weed use.

(Tweening is achieved by a few lines of winged physics. Yes I should’ve just used D3 and SVG but I tried faster-paced animations first.)

Other issues remain, e.g.

the maximum possible black market size or ratio is unknown
the probability distribution of this random variable is unknown
the animation can be misread as representing temporality
appropriateness of the pie chart form in general

A new property of the remake: it can cause nausea, which is only fitting, given the subject matter. It’s also somewhat more psychedelic than the original.

Built with blockbuilder.org

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<canvas id="canvas">
</canvas>
  <script>
    
var ctx = canvas.getContext('2d')

var width = 960
var height = 500

var background = 'rgba(245,244,246, 0.5)'
var blackMarket = 'rgba(0, 0, 0, 0.5)'
var legit = '#32abaf'

canvas.width  = width
canvas.height = height

var legitMarketSize = 5000 // arbitrary constant, as it's known

// Ken "Perlin noise" Perlin's smootherstep translated to JS
// (disused due to having switched to random jumps with physics easing)
function smootherstep(edge0, edge1, x0) {
  // Scale, and clamp x to 0..1 range
  var x = Math.max(0, Math.min(1,  (x0 - edge0) / (edge1 - edge0)))
  // Evaluate polynomial
  return Math.pow(x, 3) * (x * (x * 6 - 15) + 10)
}

var weight = 10000
var friction = 0.25
var target = 1.03 * Math.sqrt(legitMarketSize / Math.PI) + 150
var velocity = 0
var force = 0
var current = target
var lastT
var deltaT

window.requestAnimationFrame(function jump(t) {

  lastT = t

  target = 1.03 * Math.sqrt(legitMarketSize / Math.PI) 
         + 150 * Math.pow(Math.random(), 2)

  window.setTimeout(function() {
    window.requestAnimationFrame(jump)
  }, 1000)
})

window.requestAnimationFrame(function render(t) {

  ctx.fillStyle = background
  ctx.fillOpacity = 0.0
  ctx.rect(0, 0, 960, 500)
  ctx.fill()

  // poor man's winged physics
  force = target - current // a spring
  deltaT = t - lastT
  velocity += deltaT * force / weight
  velocity *= 1 - friction
  current += velocity * deltaT
  lastT = t

  var totalRadius = Math.max(0, current) // momentum might cause -ve val

  var totalMarket = Math.pow(totalRadius, 2) * Math.PI

  var legitFraction = legitMarketSize / totalMarket
  var legitAngle = 2 * Math.PI * legitFraction

  var centroidX = 4 * totalRadius * Math.sin(legitAngle / 2) / (3 * legitAngle)

  var centerX = 3 * width / 5 - centroidX
  var centerY = height / 2
  var startX = centerX + totalRadius * Math.cos(legitAngle / 2)
  var startY1 = centerY - totalRadius * Math.sin(legitAngle / 2)
  var startY2 = centerY + totalRadius * Math.sin(legitAngle / 2)

  ctx.beginPath()
  ctx.fillStyle = legit
  ctx.moveTo(centerX, centerY)
  ctx.lineTo(startX, startY1)
  ctx.arc(centerX, centerY, totalRadius, - legitAngle / 2, legitAngle / 2)
  ctx.lineTo(centerX, centerY)
  ctx.fill()

  ctx.beginPath()
  ctx.fillStyle = blackMarket
  ctx.moveTo(centerX, centerY)
  ctx.lineTo(startX, startY2)
  ctx.arc(centerX, centerY, totalRadius, legitAngle / 2, -legitAngle / 2)
  ctx.lineTo(centerX, centerY)
  ctx.fill()

  window.requestAnimationFrame(render)
})

  </script>
</body>
</html>