31:Tabf,p5(sketch => { const points = createPoints(); let timing = 0; let vis = 1; const change = 100; let speed = change / 5; const scaleX = d3.scaleLinear().domain([0, speed]); const scaleY = d3.scaleLinear().domain([0, speed]); let canvas; let context; sketch.setup = function() { sketch.createCanvas(width, height); sketch.noStroke(); sketch.fill(color_background); sketch.rect(0, 0, width, height); sketch.frameRate(30); //get the html canvas element created by p5 canvas = document.getElementById('defaultCanvas0'); //get canvas context. d3 uses that to draw on canvas context = canvas.getContext("2d"); }; sketch.draw = function() { sketch.background(color_background); if (vis === 2) { // draw the map geoPath.context(context); drawMap(context); sketch.fill(dot); sketch.noStroke(); for (var i = 0; i < points.length; i++) { const random_x = Math.random(); const random_y = Math.random(); scaleX.range([points[i].center.x, points[i].geo_center.x]).clamp(true); scaleY.range([points[i].center.y, points[i].geo_center.y]).clamp(true); sketch.circle(scaleX(timing * 2) + random_x, scaleY(timing * 2) + random_y, diameter) } } else { sketch.fill(dot); sketch.noStroke(); for (var i = 0; i < points.length; i++) { const random_x = Math.random() / 2; const random_y = Math.random() / 2; scaleX.range([points[i].geo_center.x, points[i].center.x]).clamp(true); scaleY.range([points[i].geo_center.y, points[i].center.y]).clamp(true); sketch.circle(scaleX(timing) + random_x, scaleY(timing) + random_y, diameter); } } if (type === 0) { if (timing >= change) { timing = -1; if (vis === 2) { vis = 1; } else { vis = 2; }; } else { timing = timing + 1; } } else if (type === 1) { console.log('1'); vis = 1; timing = speed; } else if (type === 2) { vis = 2; timing = speed; } } function drawMap(context) { // graticule sketch.strokeWeight(0.5); sketch.stroke(color_outline); // initialize the path context.beginPath(); geoPath(graticule); context.stroke(); context.closePath(); sketch.fill(color_land); sketch.noStroke(); // initialize the path context.beginPath(); geoPath(land); context.fill(); context.closePath(); // outline // initialize the path sketch.stroke(color_outline); sketch.strokeWeight(2); context.beginPath(); geoPath(outline); context.stroke(); context.closePath(); } })32:[{"id":"e90f554bdae9af5e6a4878cc1ef5b36ad6a7f2dfef70ff7ce9fcc960509d215611a91507c1867635f210db589cd860dfcb0fb0ff654aaec875e3828ccf8cfb53","href":"https://static.observableusercontent.com/files/e90f554bdae9af5e6a4878cc1ef5b36ad6a7f2dfef70ff7ce9fcc960509d215611a91507c1867635f210db589cd860dfcb0fb0ff654aaec875e3828ccf8cfb53","name":"hym_stores.csv","type":"text/csv","lastModified":1615054505591.723,"size":2255}] 2f:{"title":"Canvas, P5 and circle packing in a map","cells":[{"id":0,"value":"md`# Canvas, P5 and circle packing in a map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":764,"value":"md`## H&M Stores Around the World (as of November 2019)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"md`Data from https://hmgroup.com/wp-content/uploads/2020/10/HM_Annual-Report-2019.pdf`","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"viewof object_cluster = {\n const types = html`\n

Select type of cluster

\n \n \n `;\n\n types.onclick = event => {\n mutable type = +event.target.id;\n };\n \n return types;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"md`Same idea, but using also a collision and cluster force layout available in https://observablehq.com/@irenedelatorre/canvas-p5-js-and-circle-packing-collision-and-cluster-force`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md`## Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"height = width * 9 /16","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"color_background = '#CC071E'","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"color_land = '#990516'","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"color_outline = 'rgba(153, 5, 22, 0.7)'","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"dot = 'rgba(255, 255, 255, 0.7)'","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"diameter = 2.5;","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"radius = diameter / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"padding = 1.75; // separation between same-color nodes","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"mutable type = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`## Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {world} from \"@d3/world-airports\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"import {land} from \"@d3/world-airports\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"outline = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"md`### Map Projections`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"projection = projections.geoNaturalEarth()\n .scale(width / 2 / Math.PI)\n .translate([width / 2, height / 2])\n .center([0, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`Geographic path generator for given projection and canvas context (that's in the draw function)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"geoPath = d3.geoPath()\n .projection(projection);","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"data = d3.csvParse(await FileAttachment(\"hym_stores.csv\").text(), d3.autoType).filter(d => d.name !== \"Franchise and other\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"totalStores = d3.sum(data, d => d.hym_Number);","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"array = createPoints();","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"function createPoints() {\n \n const newArray = [];\n const angle = Math.PI * (3 - Math.sqrt(5));\n\n for (let i = 0; i < data.length; i++) {\n const thisCountry = data[i];\n \n for (let j = 0; j < thisCountry.hym_Number; j++) {\n const xy = projection([thisCountry.Longitude, thisCountry.Latitude]);\n const r_geo = (radius + padding / 4) * 1.2 * Math.sqrt(j + 1);\n const a_geo = (j + 1) * angle;\n const x_geo = xy[0] + r_geo * Math.cos(a_geo);\n const y_geo = xy[1] + r_geo * Math.sin(a_geo);\n \n newArray.push({\n country: thisCountry.name,\n cluster: `${thisCountry.name}`,\n id: `${thisCountry.name}_${j}`,\n lon_lat: [thisCountry.Longitude, thisCountry.Latitude],\n xy: xy,\n // center : {x: width / 2, y: height / 2, r: radius},\n geo_center: {x: x_geo, y: y_geo, r: radius}\n })\n }\n \n if (newArray.length === totalStores) {\n createCentralPack(newArray);\n };\n }\n \n return newArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"md`Phyllotaxis packing method from https://observablehq.com/@mbostock/circle-packing-methods`","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"function createCentralPack(thisArray) {\n \n const angle = Math.PI * (3 - Math.sqrt(5));\n const x0 = width / 2;\n const y0 = height / 2;\n \n for (let i = 1; i <= thisArray.length; ++i) {\n const r = (radius + padding) * 1.2 * Math.sqrt(i);\n const a = i * angle;\n const x = x0 + r * Math.cos(a);\n const y = y0 + r * Math.sin(a);\n \n thisArray[i - 1].center = {x: x, y: y, r: radius}\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`## Import libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`Import p5 library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {p5} from \"@tmcw/p5\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`Import topojson library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"projections = require(\"d3-geo@1\", \"d3-geo-projection@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}