Canvas Animated Visualization

2b:null 2c:["$","title",null,{"children":"Canvas Animated Plots | Brianna Wilson | Observable"}] 31:T5e4,function animate(nextLayout) { if (isAnimating) return // do nothing if animation is in progress mutable isAnimating = true // set flag to indicate animation is in progress // Stop any current animation if (timer) mutable timer.stop() // Store the first position of the points points.forEach(point => { point.sx = point.x point.sy = point.y }) // Apply the next layout to adjust point positions nextLayout(points, pointWidth) // Store the destination position of the points points.forEach(point => { point.tx = point.x point.ty = point.y }) // Reset points to their starting positions for the animation. points.forEach(point => { point.x = point.sx point.y = point.sy }) // Animate the interpolation of points from one position to another mutable timer = d3.timer((elapsed) => { // Compute the current progress of the animation (0 to 1) const progress = Math.min(1, d3.easeCubic(elapsed / animationDuration)) // Update point positions (interpolate between source and target) points.forEach(point => { point.x = point.sx + (point.tx - point.sx) * progress point.y = point.sy + (point.ty - point.sy) * progress }) // Draw the update draw() // Stop the animation when the progress is complete if (progress === 1) { // stop current layout's timer and start new one mutable timer.stop() mutable isAnimating = false } }) }32:T5ad,function barChartLayout(points, pointWidth, pointMargin = 1) { const pointWithMargin = pointWidth + pointMargin const pointsPerLayer = 28 // how many points wide each bar is // Initialize each bar's starting position let xOffset = 0 // Process each color bar for (let color of distinctColors) { // Filter points for the current color const currentPoints = points.filter(p => p.color === color) // Initialize the position for the current bar let rowIndex = 0 let verticalIndex = 0 // Process each point in the current bar for (let i = 0; i < currentPoints.length; i++) { const point = currentPoints[i] // Check if we need to start a new layer if (i !== 0 && i % pointsPerLayer === 0) { rowIndex = 0 // start a new layer verticalIndex++ // move the layer up } // Position the point in the current layer point.x = xOffset + (rowIndex * pointWithMargin) point.y = verticalIndex * pointWithMargin rowIndex++ // move to the next point in the layer } // Calculate the width of the current bar const barWidth = pointWithMargin * pointsPerLayer // Update the starting position for the next bar xOffset += barWidth + 5 // we're adding some space between bars } }33:T2190,// If you want to run from a .html file // // // // // // Canvas Animated Visualization // // // // // //

// //

// // // // 34:[] 2f:{"id":"75210d2759f63c88","slug":null,"title":"Canvas Animated Plots","thumbnail":"c9ed1ce6930e91441240b0712c8cfc506b0dce3329e60bd6cecaa84e831fd457","access_level":"public","create_time":"$D2023-10-29T06:13:30.830Z","update_time":"$D2023-10-29T23:36:54.340Z","view_time":null,"first_public_time":"$D2023-10-29T06:13:30.830Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bdd5b15ae58c174e","login":"bronna","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/e8378cd926f2998bd803d1651f90f4c1442c923062ce42676a4fc5460cf815fc","tier":"starter_2024"},"version":131,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc0841074bf3ab25","login":"briannawilson","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/eee1750230ba4eac2ba9c81f461a7c2cb3c2448d6fd4b00a8f3f13a73e80c37c","tier":null}],"members":[{"type":"individual","id":"dc0841074bf3ab25","login":"briannawilson","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/eee1750230ba4eac2ba9c81f461a7c2cb3c2448d6fd4b00a8f3f13a73e80c37c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"839d21f59c8d2be4","slug":"dvs-workshop","title":"DVS-workshop","owner":{"id":"bdd5b15ae58c174e","login":"bronna","name":"Brianna Wilson"}},"type":"notebook","body":{"titling":"auto","title":"Canvas Animated Plots","cells":[{"id":0,"value":"# Canvas Animated Plots\nAdapted from: https://bocoup.com/blog/smoothly-animate-thousands-of-points-with-html5-canvas-and-d3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"## HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"### 1 - Create the canvas element you'll draw on","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"viewof playButton = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"canvasElement = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Javascript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"### 2 - Grab the HTML canvas element & set the context to 2d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"canvas = canvasElement","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"ctx = canvas.getContext('2d')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"### 3 - Define your visualization's attributes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"numPoints = 10000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"pointWidth = 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"### Create different colors for different data breakpoints","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"distinctColors = d3.quantize(d3.interpolatePlasma, 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"colorScale = d3.scaleThreshold()\n .domain(indexBreakpoints)\n .range(distinctColors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"### Set the order of layouts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"layouts = [phyllotaxisLayout, barChartLayout]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"mutable layoutIndex = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"### Draw the initial layout","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"function draw() {\n // erase any existing points on canvas before drawing\n ctx.clearRect(0, 0, canvas.width, canvas.height)\n\n // draw each point as a square\n for (let i = 0; i < points.length; i++) {\n const point = points[i]\n ctx.fillStyle = point.color\n ctx.fillRect(point.x, point.y, pointWidth, pointWidth)\n }\n\n ctx.restore()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"phyllotaxisLayout(points, pointWidth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"draw()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"### Set up the animation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"animationDuration = 1500 // milliseconds","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"mutable timer = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"mutable isAnimating = false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"### Add action to 'PLAY' button","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"d3.select('.play-control')\n .on('click', () => {\n if(!isAnimating) {\n const nextLayoutIndex = (layoutIndex + 1) % layouts.length\n const nextLayout = layouts[nextLayoutIndex]\n animate(nextLayout)\n mutable layoutIndex = nextLayoutIndex\n }\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"## Helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"### Create data points","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"breakpointsPercent = [0.05, 0.2, 0.45, 0.85]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"indexBreakpoints = breakpointsPercent.map(breakpoint => Math.floor(breakpoint * numPoints))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"points = d3.range(numPoints).map(index => ({\n id: index,\n color: colorScale(index)\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"### Phyllotaxis layout","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"function phyllotaxisLayout(points, pointWidth, xOffset = canvas.width / 2, yOffset = canvas.height / 2, iOffset = 0) {\n // theta determines the spiral of the layout\n const theta = Math.PI * (3 - Math.sqrt(5))\n \n const pointRadius = pointWidth\n \n points.forEach((point, i) => {\n const index = (i + iOffset) % points.length\n const phylloX = pointRadius * Math.sqrt(index) * Math.cos(index * theta)\n const phylloY = pointRadius * Math.sqrt(index) * Math.sin(index * theta)\n \n point.x = xOffset + phylloX - pointRadius\n point.y = yOffset + phylloY - pointRadius\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"### Bar chart layout","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"