2d:null 2e:["$","title",null,{"children":"Radial Dots - Canvas with PIXI.js | dianaow | Observable"}] 33:T246b,chart = { // config let resetState = true const SCREEN_WIDTH = width; const SCREEN_HEIGHT = width; const RESOLUTION = window.devicePixelRatio; const NODE_RADIUS = 5; const NODE_HIT_WIDTH = 5; const NODE_HIT_RADIUS = NODE_RADIUS + NODE_HIT_WIDTH; const TEXTURE_COLOR = 0xffffff; const CIRCLE = 'CIRCLE'; let tick = 0 let color = ["0xf7524f", "0x4561cc", "0xf8bc2e", "0x17c3b2", "0x9336fd", "0xff928b"] let IDs = ["1", "2", "3", "4", "5", "6"] let config = {} let attrs = {} IDs.map((d,i)=>{ config[d] = null attrs[d] = {idx: i, color: color[i], scale: i>=5 ? 2 : 1, offset: i===0 ? 110 : 90} }) const container = html`

`; const positions = runLayout(nodes) // run force simulation to radially position nodes //getRandomArbitrary(-1000, 1000): to create the mass movment of nodes on page load //getRandomArbitrary(-10, 10): give final settling position of nodes some jitter, or it will look neatly packed after the radial force is executed on it nodes.forEach((nodeData,i) => { const position = positions[i][1]; let randX = getRandomArbitrary(-10, 10) let randY = getRandomArbitrary(-10, 10) nodeData.id = i nodeData.x1 = position.x + getRandomArbitrary(-1000, 1000) + randX; nodeData.y1 = position.y + getRandomArbitrary(-1000, 1000) + randY; nodeData.x = position.x + randX nodeData.y = position.y + randY nodeData.offset = 0 }); // normalize node positions such that all elements fit on screen const minNodeX = Math.min(...nodes.map(nodeData => nodeData.x)); const maxNodeX = Math.max(...nodes.map(nodeData => nodeData.x)); const minNodeY = Math.min(...nodes.map(nodeData => nodeData.y)); const maxNodeY = Math.max(...nodes.map(nodeData => nodeData.y)); const graphWidth = Math.abs(maxNodeX - minNodeX); const graphHeight = Math.abs(maxNodeY - minNodeY); const WORLD_WIDTH = Math.max(SCREEN_WIDTH * 2, graphWidth * 1.1); const WORLD_HEIGHT = Math.max(SCREEN_HEIGHT * 2, graphHeight * 1.1); nodes.forEach(nodeData => { nodeData.x = nodeData.x - minNodeX - graphWidth / 2 + WORLD_WIDTH / 2; nodeData.y = nodeData.y - minNodeY - graphHeight / 2 + WORLD_HEIGHT / 2; nodeData.x1 = nodeData.x1 - minNodeX - graphWidth / 2 + WORLD_WIDTH / 2; nodeData.y1 = nodeData.y1 - minNodeY - graphHeight / 2 + WORLD_HEIGHT / 2; }); // create PIXI application const app = new PIXI.Application({ width: SCREEN_WIDTH, height: SCREEN_HEIGHT, resolution: RESOLUTION, transparent: true, antialias: true, autoDensity: true, autoStart: false // disable automatic rendering by ticker, render manually instead, only when needed }); // create PIXI viewport const viewport = new Viewport({ screenWidth: SCREEN_WIDTH, screenHeight: SCREEN_HEIGHT, worldWidth: WORLD_WIDTH, worldHeight: WORLD_HEIGHT, backgroundColor : 0x061639, interaction: app.renderer.plugins.interaction, }); const resetViewport = () => { viewport.center = new PIXI.Point(WORLD_WIDTH / 2, WORLD_HEIGHT / 2); viewport.fitWorld(true); }; app.stage.addChild(viewport); viewport.drag().pinch().wheel().decelerate().clampZoom({ minWidth: SCREEN_WIDTH, minHeight: SCREEN_HEIGHT }); // create layers const nodesLayer = new PIXI.Container(); viewport.addChild(nodesLayer); // create textures const circleGraphics = new PIXI.Graphics(); circleGraphics.beginFill(TEXTURE_COLOR); circleGraphics.drawCircle(NODE_RADIUS, NODE_RADIUS, NODE_RADIUS); const circleTexture = app.renderer.generateTexture(circleGraphics, PIXI.settings.SCALE_MODE, RESOLUTION); // create node graphics const nodeDataGfxPairs = nodes.map(nodeData => { const nodeGfx = new PIXI.Container(); nodeGfx.x = nodeData.x; nodeGfx.y = nodeData.y; nodeGfx.interactive = true; nodeGfx.buttonMode = true; nodeGfx.hitArea = new PIXI.Circle(0, 0, NODE_HIT_RADIUS); const circle = new PIXI.Sprite(circleTexture); circle.name = CIRCLE; circle.x = -circle.width / 2; circle.y = -circle.height / 2; circle.tint = '#000'; circle.alpha = 0.5; nodeGfx.addChild(circle); nodesLayer.addChild(nodeGfx); return [nodeData, nodeGfx]; }); // create lookup tables let nodeDataToNodeGfx = new WeakMap(nodeDataGfxPairs.map(([nodeData, nodeGfx]) => [nodeData, nodeGfx])); let nodeGfxToNodeData = new WeakMap(nodeDataGfxPairs.map(([nodeData, nodeGfx]) => [nodeGfx, nodeData])); let nodesF = nodes.slice() let nodesF_previous = nodesF updatePositions(); // kick off initial transition on page load resetViewport(); //app.render() app.ticker.start() container.appendChild(app.view); // prevent body scrolling app.view.addEventListener('wheel', event => { event.preventDefault(); }); function updatePositions() { nodes.forEach(nodeData => { const nodeGfx = nodeDataToNodeGfx.get(nodeData); nodeGfx.x = nodeData.x1; nodeGfx.y = nodeData.y1; }); let T = new PIXI.Ticker() T.add((delta) => animate(delta, nodes, T, {idx: -1, color: "0x000000", scale: 1, offset: 0}, 'initial')); T.start() }; // Iterate over each data point and adjust coordinates function animate(delta, data, ticker, attrs, reverse) { data.forEach((d,i)=>{ move(d.id) //this function is called for each tick }) tick += 1 function angle(cx, cy, ex, ey) { var dy = ey - cy; var dx = ex - cx; var theta = Math.atan2(dy, dx); return theta; } function move(id){ let n = nodes.find(d=>d.id === id) let N = nodeDataToNodeGfx.get(n) //identify PIXI conatiner holding the element //calculate angle between the element and a horizontal line to enable finding x-distance and y-distance of element from center let angRad = angle(WORLD_WIDTH/2, WORLD_HEIGHT/2, nodes[id].x, nodes[id].y) //element is moved inwards by amount indicated in attr.offset let xDist, yDist xDist = attrs.offset * Math.cos(angRad) yDist = attrs.offset * Math.sin(angRad) //element is moved outwards to revert to original position (n.offset amount is different for each element) let xDistR, yDistR xDistR = n.offset * Math.cos(angRad) yDistR = n.offset * Math.sin(angRad) let steps = reverse === 'initial' ? 80 : 20 //increase the number of steps to slow the transition let scaleTo = attrs.scale if(tick <= steps) { if(reverse === 'initial'){ let xDistR = (n.x1-n.x) let yDistR = (n.y1-n.y) N.position.x -= xDistR/steps // element is moved step-by-step with each tick N.position.y -= yDistR/steps } else if(reverse === 'reverse'){ if(n.offset){ N.position.x += xDistR/steps N.position.y += yDistR/steps if(n.scale === 2){ N.scale.set((1/steps*tick),(1/steps*tick)); } } } else { N.position.x -= xDist/steps N.position.y -= yDist/steps } if(scaleTo !== 1){ N.scale.set((scaleTo/steps*tick),(scaleTo/steps*tick)); } const circle = N.getChildByName(CIRCLE); circle.tint = attrs.color; } else { ticker.stop() //ticker will loop infinitely unless it is stopped if(reverse === 'reverse'){ nodes.forEach(d=>{ d.offset = 0 }) nodesF = nodes } } } } function run(group){ resetState = false let index = IDs.indexOf(group) let groupInt = parseInt(group) config[groupInt] = group nodesF_previous = nodesF nodesF = nodesF.filter(d=>(d[groupInt] === group)) if(nodesF_previous.length !== nodesF.length){ nodesF.forEach((d,i)=>{ let idx = nodes.find(el=>el.id === d.id).id nodes[idx].offset += attrs[groupInt].offset nodes[idx].scale = index >= 5 ? 2 : 1 }) startTicker(groupInt, nodesF, new PIXI.Ticker(), attrs[groupInt]) } } function startTicker(id, nodes, ticker, attrs, reverse){ if(config[id] !== null){ tick = 0 if(nodes.length !== 0){ ticker.add((delta) => animate(delta, nodes, ticker, attrs, reverse)); ticker.start() } } } function loop(){ if(resetState === false) return let counter = 0 let timer = setInterval(function(){ run(IDs[counter]) counter += 1 resetState = false if(IDs[counter] === undefined) { clearInterval(timer) }; }, 1000); } function reset(){ if(resetState) return resetState = true startTicker(0, nodes, new PIXI.Ticker(), {idx: 0, color: '0x000000', scale: 1, offset: null}, 'reverse') IDs.map((d,i)=>{ config[d] = null }) } const animateButton = html``; animateButton.addEventListener('click', () => loop()); const resetButton = html``; resetButton.addEventListener('click', () => reset()); const toolbar = html`

`; toolbar.appendChild(animateButton); toolbar.appendChild(resetButton); container.appendChild(toolbar); yield container }34:[{"id":"39de349a3cbf85fe777bed303575fc5afd7afd96de34d7045eb6a722632ca9125dff69b602bcd828a817d8935de1059a92b7a9ef73a58e3c156f2c8db6257cd2","href":"https://static.observableusercontent.com/files/39de349a3cbf85fe777bed303575fc5afd7afd96de34d7045eb6a722632ca9125dff69b602bcd828a817d8935de1059a92b7a9ef73a58e3c156f2c8db6257cd2","name":"DataVizCensus2020-AnonymizedResponses_new.csv","type":"text/csv","lastModified":1608451051603.697,"size":2586131}] 31:{"id":"c664a5f46e1377a1","slug":"radial-dots-canvas-with-pixi-js","title":"Radial Dots - Canvas with PIXI.js","thumbnail":"9ec03b6c748d9bfe63cd321f625f804d5c463dee6b12d3105fb83668689bacd6","access_level":"public","create_time":"$D2020-12-20T07:57:31.603Z","update_time":"$D2021-01-27T06:26:51.231Z","view_time":null,"first_public_time":"$D2021-01-24T14:31:38.605Z","fork":true,"stars":8,"starred":false,"owner":{"type":"team","id":"9565060d73fcbf2d","login":"dianaow","name":"","avatar_url":"https://avatars-next.observableusercontent.com/bb37a5423d45df1bdef69047e6b5572c6bd8c31c0112ced9f5c7f80f9aa9fd8e","tier":"starter_2024"},"version":2551,"publish_version":2551,"role":null,"authored":false,"authors":[{"type":"individual","id":"f9d57064cf004ad0","login":"dianaow","name":"","avatar_url":"https://avatars-next.observableusercontent.com/bb37a5423d45df1bdef69047e6b5572c6bd8c31c0112ced9f5c7f80f9aa9fd8e","tier":null}],"members":[{"type":"individual","id":"f9d57064cf004ad0","login":"dianaow","name":"","avatar_url":"https://avatars-next.observableusercontent.com/bb37a5423d45df1bdef69047e6b5572c6bd8c31c0112ced9f5c7f80f9aa9fd8e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Radial Dots - Canvas with PIXI.js","cells":[{"id":1,"value":"md`# Radial Dots - Canvas with PIXI.js\n\nFork of this example [Force-Directed Graph - WebGL & Canvas with PIXI.js](https://observablehq.com/@zakjan/force-directed-graph-pixi), modified to arrange nodes radially with additional animations:\n\nLink to UI with this visual: [Are there data visualizers with a smiliar skillset as me?](https://data-visualizers.herokuapp.com/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1999,"value":"function getRandomArbitrary(min, max) {\n return Math.random() * (max - min) + min;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"function runLayout(data) {\n\n const iterations = 300;\n const nodeRepulsion = -250;\n\n d3.forceSimulation(data)\n .force(\"charge\", d3.forceCollide().radius(9))\n .force(\"r\", d3.forceRadial(function(d,i) { return 680; }))\n .force('center', d3.forceCenter(0, 0))\n .stop()\n .tick(iterations);\n\n const positions = data.map((node,i) => {\n return [i, { x: node.x, y: node.y }];\n });\n\n return positions;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2462,"value":"nodes = {\n const nodes = [];\n \n for (let i = 0; i < 2200; i++) {\n let randGroup = Math.round(getRandomArbitrary(1, 6)).toString()\n let randGroup1 = Math.round(getRandomArbitrary(1, 6)).toString()\n let randGroup2 = Math.round(getRandomArbitrary(1, 6)).toString()\n let randGroup3 = Math.round(getRandomArbitrary(1, 6)).toString()\n let randGroup4 = Math.round(getRandomArbitrary(1, 6)).toString()\n let randGroup5 = Math.round(getRandomArbitrary(1, 6)).toString()\n nodes.push({\n id: i,\n [randGroup]: randGroup,\n [randGroup1]: randGroup1,\n [randGroup2]: randGroup2,\n [randGroup3]: randGroup3,\n [randGroup4]: randGroup4,\n [randGroup5]: randGroup5,\n });\n }\n \n return nodes;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@5.14.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"PIXI = require('pixi.js@5.2.0/dist/pixi.min.js').catch(async () => {\n window.PIXI.Cull = (await require('https://bundle.run/@pixi-essentials/cull@1.0.5/dist/cull.js')).PIXI.Cull;\n return window.PIXI;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"Viewport = (await require('https://bundle.run/pixi-viewport@4.5.0/dist/viewport.js')).Viewport","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2388,"value":"import {inputsForm} from '@zakjan/inputs-form'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2390,"value":"import {select} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"