Skip to content

Instantly share code, notes, and snippets.

@monfera

monfera/.block

Last active Sep 28, 2016
Embed
What would you like to do?
Dramatic pie chart
license: mit

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

<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment