2a:null 2b:["$","title",null,{"children":"Walkers Animated Pictogram with Part of a Whole | Tereza Iofciu | Observable"}] 30:Te2d,main = { //loop over all options removeAllFromStage(mutable stack); removeAllFromStage(mutable substack); movePeopleToUnused(); mutable stack = []; mutable substack = []; var peopletopercentscale = d3.scaleLinear().domain([0, 100]); var stackVerticalHeightTracker = 0; if (!results.length) { //Remove Unusedpeople removeUnusedPeople(); return; } for (var i = 0; i < results.length; i++) { var d = results[i]; var curOption = d.opt; //Now filter data for this type sub values... var peopleForThisOption = d.size; var peopleStrongForThisOption = d.value; if (peopleForThisOption == 0) { //skip the mepty option, but dont do this, as its hard to compare.. //continue; } //add label.. var text = prepareText( curOption + ' - total '+ peopleForThisOption, stackVerticalHeightTracker, null, null, 700 ); mutable stack.push(text.node); stackVerticalHeightTracker += text.height + 10; app.stage.addChild(text.node); //add label for percentage.. var text = prepareText( peopleStrongForThisOption + '%', stackVerticalHeightTracker, 14, null, 700 ); mutable substack.push(text.node); text.node.anchor.x = 0.2; text.node.anchor.y = 0.5; text.node.visible = false; app.stage.addChild(text.node); stackVerticalHeightTracker += 8; //margin for people top.. var widthOfRow = chartWidth - 12 - 60; var widthOfPerson = 20; var numberOfPeoplePerRow = widthOfRow / widthOfPerson; peopletopercentscale.range([0, numberOfPeoplePerRow]); peopleForThisOption = peopletopercentscale(peopleForThisOption); var rowsRequiredToDisplayPeople = Math.ceil( peopleForThisOption / numberOfPeoplePerRow ); var heightOfRow = 34; var heightOfRegion = heightOfRow * rowsRequiredToDisplayPeople; if (peopleForThisOption == 0) { heightOfRegion += 34; } //Create people var colIndex = 0; var prevIntenralRow = 0; var maxXOffset = 0; var peopleStrongPercent = Math.ceil(peopleStrongForThisOption * peopleForThisOption / 100) for (var p = 0; p < peopleForThisOption; p++) { //Find row based on index var currentInternalRow = Math.ceil(p / numberOfPeoplePerRow) - 1; if (currentInternalRow < 0) { currentInternalRow = 0; } //Row is incremented if (prevIntenralRow !== currentInternalRow) { colIndex = 1; prevIntenralRow = prevIntenralRow + 1; } else { colIndex = colIndex + 1; } var curXOffset = colIndex * widthOfPerson - 12; if (maxXOffset < curXOffset) { maxXOffset = curXOffset; } //position and color var yDestination = stackVerticalHeightTracker + currentInternalRow * heightOfRow; //get a person and move him var person = provisionPerson(question - 1, curXOffset, yDestination); walkPerson(person, curXOffset, yDestination); changeColor(person, d.color); if (p>peopleStrongPercent){ changeColor(person, grey_color); } } text.node.x = curXOffset + widthOfPerson + 10; text.node.y = stackVerticalHeightTracker + heightOfRegion - heightOfRow ; stackVerticalHeightTracker += heightOfRegion; } setTimeout(function() { mutable substack.forEach(function(d) { d.visible = true; }); }, 2200); mutable chartHeight = stackVerticalHeightTracker; //Remove Unusedpeople removeUnusedPeople(); // Animate app.ticker.add(function(t) { TWEEN.update(); }); }31:T9c2,function addStatePlayer(sprite) { //Make sure the sprite is a Pixi MovieClip /* if (!(sprite instanceof PIXI.MovieClip)) { throw new Error("You can only animate PIXI.MovieClip sprites"); return; } */ //Intialize the variables var frameCounter = 0, numberOfFrames = 0, startFrame = 0, endFrame = 0, timerInterval = undefined, playing = false; //The `show` function (to display static states) function show(frameNumber) { //Reset any possible previous animations reset(); //Find the new state on the sprite sprite.gotoAndStop(frameNumber); } //The `playSequence` function, to play a sequence of frames function playSequence(sequenceArray) { //Reset any possible previous animations reset(); //Figure out how many frames there are in the range startFrame = sequenceArray[0]; endFrame = sequenceArray[1]; numberOfFrames = endFrame - startFrame; //Calculate the frame rate. Set a default fps of 12 if (!sprite.fps) sprite.fps = 12; var frameRate = 1000 / sprite.fps; //Set the sprite to the starting frame sprite.gotoAndStop(startFrame); //If the state isn't already playing, start it if (!playing) { timerInterval = setInterval(advanceFrame.bind(this), frameRate); playing = true; } } //`advanceFrame` is called by `setInterval` to dislay the next frame //in the sequence based on the `frameRate`. When frame sequence //reaches the end, it will either stop it or loop it. function advanceFrame() { //Advance the frame if `frameCounter` is less than //the state's total frames if (frameCounter < numberOfFrames) { //Advance the frame sprite.gotoAndStop(sprite.currentFrame + 1); //Update the frame counter frameCounter += 1; } else { //If we've reached the last frame and `loop` //is `true`, then start from the first frame again if (sprite.loop) { sprite.gotoAndStop(startFrame); frameCounter = 1; } } } function reset() { //Reset `playing` to `false`, set the `frameCounter` to 0, //and clear the `timerInterval` if (timerInterval !== undefined && playing === true) { playing = false; frameCounter = 0; startFrame = 0; endFrame = 0; numberOfFrames = 0; clearInterval(timerInterval); } } //Add the `show` and `playSequence` methods to the sprite sprite.show = show; sprite.playSequence = playSequence; }32:[{"id":"b11c4bfc692ed59f773c055b3cf8cdfc19c1937a242685cc9ba179d5cc2069b172a870cc446c32db7df512283e71de3fa2d085a60d67c76e4c432a8cc24fa22a","href":"https://static.observableusercontent.com/files/b11c4bfc692ed59f773c055b3cf8cdfc19c1937a242685cc9ba179d5cc2069b172a870cc446c32db7df512283e71de3fa2d085a60d67c76e4c432a8cc24fa22a","name":"walkers.png","type":"image/png","lastModified":1617375150255.971,"size":9395},{"id":"d76a3b2f1e65761dcc039beceaa64f8cf9b4d8f5e1bd483130b908892bdb791e45ad1bf9087d3bdf1f4ac3b381e4caf1efe86ac0bc0d6283138b234615b42590","href":"https://static.observableusercontent.com/files/d76a3b2f1e65761dcc039beceaa64f8cf9b4d8f5e1bd483130b908892bdb791e45ad1bf9087d3bdf1f4ac3b381e4caf1efe86ac0bc0d6283138b234615b42590","name":"walkers-how-to-use.PNG","type":"image/png","lastModified":1617375150255.971,"size":52250},{"id":"9672c83bfe5712fc67cbdf523898f07738fe9cf409c426f97e3406c75240b896d9f8cce668c4f1f6fced922b3d5384fd7ee9a4d0c3641de695000164cc62ec04","href":"https://static.observableusercontent.com/files/9672c83bfe5712fc67cbdf523898f07738fe9cf409c426f97e3406c75240b896d9f8cce668c4f1f6fced922b3d5384fd7ee9a4d0c3641de695000164cc62ec04","name":"walkers-preview.png","type":"image/png","lastModified":1617375150255.971,"size":15645}] 2e:{"id":"07919701d8a76ecf","slug":"walkers-animated-pictogram-with-part-of-a-whole","title":"Walkers Animated Pictogram with Part of a Whole","thumbnail":"cdfe6bb9c5648218e01bde5d71b1016abeca41035471cf984c57f0a299596c17","access_level":"public","create_time":"$D2021-04-02T14:52:30.255Z","update_time":"$D2021-04-02T15:26:43.007Z","view_time":null,"first_public_time":"$D2021-04-02T14:56:05.703Z","fork":{"id":"ca8e586627148511","slug":"walkers-animated-pictogram","title":"Walkers Animated Pictogram","owner":{"id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala"}},"stars":9,"starred":false,"owner":{"type":"team","id":"bcfdd45295e26854","login":"terezaif","name":"Tereza Iofciu","avatar_url":"https://avatars-next.observableusercontent.com/226f3cb624f4054ae9dc13ea08fbbc3e6927e81037fb0558ac27d1b27bc1b384","tier":"starter_2024"},"version":494,"publish_version":494,"role":null,"authored":false,"authors":[{"type":"individual","id":"30151ae41f7fc118","login":"terezaif","name":"Tereza Iofciu","avatar_url":"https://avatars-next.observableusercontent.com/226f3cb624f4054ae9dc13ea08fbbc3e6927e81037fb0558ac27d1b27bc1b384","tier":null}],"members":[{"type":"individual","id":"30151ae41f7fc118","login":"terezaif","name":"Tereza Iofciu","avatar_url":"https://avatars-next.observableusercontent.com/226f3cb624f4054ae9dc13ea08fbbc3e6927e81037fb0558ac27d1b27bc1b384","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"Walkers Animated Pictogram with Part of a Whole","cells":[{"id":0,"value":"md`# Walkers Animated Pictogram with Part of a Whole`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":418,"value":"FileAttachment(\"walkers-preview.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":421,"value":"md`### Interactive Demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":424,"value":"md`Try changing the radio toggle below to see the magic!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":276,"value":"viewof question = radio({\n options: [\"1\", \"2\"],\n value: \"1\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"viewof app = {\n var dom = html`

`;\n var app = new PIXI.Application({\n transparent: false,\n backgroundColor: 0xffffff,\n resolution: window.devicePixelRatio,\n antialias: false\n });\n dom.appendChild(app.view);\n dom.value = app;\n invalidation.then(() => {\n app.destroy();\n });\n return dom;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":439,"value":"md`*\"Why use this\"*, you ask? and then think... *\"Well, in the world of meaningless animations for data visualization, is this just another fancy way to show data?\"*\n\nNot really, when survey results are visualized as bars and those bars change height or width people are less likely to understand the underlying impact, such as people switching from one product to the other, this pictogram with animations tries to show exactly that.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":403,"value":"md`### How to reuse this in your notebook?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":414,"value":"md`Import the viewof app, main, set_sizes while providing your own array of elements with opt (label), value (numeric), color (array of rgb values) to setup. The chart will animate on initial load and everytime the data changes.\n\nBesides opt, value and color, the data now also needs size to define the size of the groups`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":406,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":428,"value":"md`### Implementation details`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":279,"value":"results = {\n if (question == 1) {\n return [\n { opt: \"Mobile\", value: 59, size:230, color: [86, 81, 255] },\n { opt: \"PC\", value: 41,size:150, color: [254,237,0] },\n { opt: \"Emulator\", value: 2,size:80, color: [246, 28, 133] }\n ];\n } else if (question == 2) {\n return [\n { opt: \"Mobile\", value: 29, size:100, color: [86, 81, 255] },\n { opt: \"PC\", value: 21, size:100, color: [0, 218, 187] },\n { opt: \"Emulator\", value: 40, size:100, color: [246, 28, 133] },\n { opt: \"NOT KNOWN\", value: 4, size:100, color: [12, 28, 133] }\n ];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"mutable chartWidth = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"mutable chartHeight = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":183,"value":"set_sizes = {\n app.renderer.resize(chartWidth, chartHeight);\n app.render();\n app.view.style['width'] = chartWidth + 'px';\n app.view.style['height'] = chartHeight + 'px';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":468,"value":"mutable grey_color = [177,179,179]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":198,"value":"frames = {\n var frames = [];\n var url = await FileAttachment(\"walkers.png\").url();\n var xoffsets = [624, 312, 390, 468, 546, 0, 78, 156, 234];\n xoffsets.forEach(function(xo) {\n var img = PIXI.Texture.from(url);\n var frame = new PIXI.Texture(img, new PIXI.Rectangle(xo, 0, 78, 98));\n frames.push(frame);\n });\n return frames;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"mutable stack = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"mutable substack = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"mutable people = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"mutable peopleUnused = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":472,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"function removeUnusedPeople() {\n var pep;\n while ((pep = peopleUnused.pop())) {\n app.stage.removeChild(pep);\n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"function movePeopleToUnused() {\n var pep;\n while ((pep = people.pop())) {\n peopleUnused.push(pep);\n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"function getPersonFromArray(n, x, y) {\n var personsTemp = peopleUnused.filter(function(d, i) {\n d.ind = i;\n if (d.question == n && d.qY == y) {\n return true;\n }\n });\n var person;\n if (personsTemp.length) {\n person = personsTemp.pop();\n peopleUnused.splice(person.ind, 1);\n } else {\n person = peopleUnused.pop();\n }\n return person;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"function provisionPerson(n, newX, newY) {\n //var person = peopleUnused.pop();\n //TBD choose the right person rather than the last one in array..\n var person = getPersonFromArray(n, newX, newY);\n if (typeof person === 'undefined') {\n person = new PIXI.AnimatedSprite(frames);\n setPropsForAnim(person);\n people.push(person);\n app.stage.addChild(person);\n person.question = n;\n person.qX = newX;\n person.qY = newY;\n\n //for no ghosting..\n if (1) {\n person.x = getRandomArbitrary(newX - 300, newX + 300);\n person.y = getRandomArbitrary(newY - 300, newY + 300);\n }\n } else {\n if (person.question == n) {\n mutable people.push(person);\n } else {\n //person.x = getRandomArbitrary(0, -50);\n //person.y = getRandomArbitrary(0, 20);\n mutable people.push(person);\n person.question = n;\n }\n person.qX = newX;\n person.qY = newY;\n }\n\n return person;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"function removeAllFromStage(ar) {\n for (var i = 0; i < ar.length; i++) {\n var elm = ar[i];\n app.stage.removeChild(elm);\n elm.destroy({ children: true, texture: true, baseTexture: true });\n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"function prepareText(text, stackHeight, size, color, weight) {\n var textNode = new PIXI.Text(text, {\n fontSize: size ? size : 16,\n fontWeight: weight ? weight : 400,\n fontFamily: 'Segoe UI',\n fill: color || '#5f6369',\n align: 'left',\n wordWrapWidth: chartWidth - 24,\n wordWrap: true,\n stroke: '#FFFFFF',\n strokeThickness: 0\n });\n textNode.x = 0;\n textNode.y = stackHeight;\n textNode.resolution = 2;\n return {\n node: textNode,\n height: textNode.height\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"function stopSprit(anim) {\n anim.state = \"stop\";\n anim.show(0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"function changeColor(anim, c) {\n var matrix = anim.filters[0].matrix;\n\n var currentR = matrix[3];\n var currentG = matrix[8];\n var currentB = matrix[13];\n\n var destinationR = c[0] / 255;\n var destinationG = c[1] / 255;\n var destinationB = c[2] / 255;\n\n anim.tween_color && TWEEN.remove(anim.tween_color);\n \n var starter = {\n r: currentR,\n g: currentG,\n b: currentB\n };\n var tw = new TWEEN.Tween(starter)\n .to(\n {\n r: destinationR,\n g: destinationG,\n b: destinationB\n },\n 1500\n )\n .onUpdate(function() {\n matrix[3] = starter.r;\n matrix[8] = starter.g;\n matrix[13] = starter.b;\n })\n .interpolation(TWEEN.Interpolation.Bezier)\n .start();\n\n anim.tween_color = tw;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"function setPropsForAnim(anim) {\n //anim.x = getRandomArbitrary(0, chartWidth);\n //anim.y = getRandomArbitrary(0, chartHeight);\n anim.x = getRandomArbitrary(0, -50);\n anim.y = getRandomArbitrary(0, 20);\n anim.anchor.set(0.5);\n anim.width = (312 / 18) * 1.62;\n anim.height = (390 / 18) * 1.62;\n addStatePlayer(anim);\n anim.fps = 4;\n\n var filter = new PIXI.filters.ColorMatrixFilter();\n filter.resolution = 2;\n filter.matrix[3] = 1;\n filter.matrix[8] = 1;\n filter.matrix[13] = 1;\n anim.filters = [filter];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"function moveRight(anim) {\n anim.state = \"right\";\n anim.playSequence([1, 4]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"function moveLeft(anim) {\n anim.state = \"left\";\n anim.playSequence([5, 8]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"function walkPerson(person, x, y) {\n var startX = person.x;\n var startY = person.y;\n var timeToTravel = (Math.abs(startX - x) / 14) * getRandomArbitrary(100, 250);\n if (timeToTravel > 3000) {\n timeToTravel = 3000;\n }\n stopSprit(person);\n person.tween_walk && TWEEN.remove(person.tween_walk);\n var starter = {\n x: startX,\n y: startY\n };\n var tw = new TWEEN.Tween(starter)\n .to(\n {\n x: x,\n y: y\n },\n timeToTravel\n )\n .onUpdate(function() {\n person.x = starter.x;\n person.y = starter.y;\n })\n //.interpolation( TWEEN.Interpolation.Bezier )\n .interpolation(function tenStepEasing(k) {\n return Math.floor(k * 10) / 10;\n });\n person.tween_walk = tw;\n if (startX < x) {\n moveRight(person);\n } else if (startX > x) {\n moveLeft(person);\n }\n tw.start();\n tw.onComplete(function() {\n stopSprit(person);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"function getRandomArbitrary(min, max) {\n return Math.floor(Math.random() * (max - min) + min);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"TWEEN = require('@tweenjs/tween.js@18.5.0/dist/tween.cjs.js').catch(\n () => window[\"TWEEN\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"PIXI = require('pixi.js@5.1.2/dist/pixi.min.js').catch(() => window.PIXI)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"d3 = require(\"d3@v5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":371,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"