32:T9db,p5(sketch => { let timing = 0; let vis = 1; const change = 100; let speed = change / 10; 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(); // points in the map for (var i = 0; i < dataSim.length; i++) { scaleX.range([dataSim[i].center.x, dataSim[i].x]).clamp(true); scaleY.range([dataSim[i].center.y, dataSim[i].y]).clamp(true); sketch.circle(scaleX(timing * 2), scaleY(timing * 2) , diameter); } } else { sketch.fill(dot); sketch.noStroke(); // points for (var i = 0; i < dataSim.length; i++) { scaleX.range([dataSim[i].x, dataSim[i].center.x]).clamp(true); scaleY.range([dataSim[i].y, dataSim[i].center.y]).clamp(true); sketch.circle(scaleX(timing), scaleY(timing), 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) { 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(); } })33:[{"id":"e90f554bdae9af5e6a4878cc1ef5b36ad6a7f2dfef70ff7ce9fcc960509d215611a91507c1867635f210db589cd860dfcb0fb0ff654aaec875e3828ccf8cfb53","href":"https://static.observableusercontent.com/files/e90f554bdae9af5e6a4878cc1ef5b36ad6a7f2dfef70ff7ce9fcc960509d215611a91507c1867635f210db589cd860dfcb0fb0ff654aaec875e3828ccf8cfb53","name":"hym_stores.csv","type":"text/csv","lastModified":1614448917477.349,"size":2255}] 30:{"title":"Canvas, P5.js and circle packing (collision and cluster force) on a map","cells":[{"id":0,"value":"md`# Canvas, P5.js and circle packing (collision and cluster force) on a map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"md`## H&M Stores Around the World (as of November 2019)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"md`Data from https://hmgroup.com/wp-content/uploads/2020/10/HM_Annual-Report-2019.pdf`","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"md`The layout takes a bit of time to calculate. Please, be patient :) `","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":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"md`Same idea, but using only phyllotaxis packing layouts available in https://observablehq.com/@irenedelatorre/canvas-p5-and-circle-packing-in-a-map.`","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 let arrayGeo = [];\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 newArray.push({\n country: thisCountry.name,\n cluster: `${thisCountry.name}`,\n // id: `${thisCountry.name}_${j}`,\n lon_lat: [thisCountry.Longitude, thisCountry.Latitude],\n center : {x: width / 2, y: height / 2, 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":659,"value":"md`Phyllotaxis packing method from https://observablehq.com/@mbostock/circle-packing-methods`","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"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":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"dataSim = createGeoPoints(array);","pinned":true,"hidden":false,"mode":"ojs"},{"id":785,"value":"md`Precalculation of the force layout`","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"function createGeoPoints(thisData) {\n const newArray = [];\n \n for (var i = 0; i < thisData.length; i++) {\n newArray.push({\n cluster: thisData[i].cluster,\n center: thisData[i].center,\n country: thisData[i].country,\n lon_lat: thisData[i].lon_lat,\n });\n } \n \n simulation_geo\n .nodes(newArray);\n \n for (let i = 0; i < 300; ++i) simulation_geo.tick();\n \n return newArray;\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"md`## Force layout functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"simulation_geo = d3.forceSimulation()\n .force('collide', forceCluster_Collision)\n .force(\"x\", forceX)\n .force(\"y\", forceY)\n .stop();","pinned":true,"hidden":false,"mode":"ojs"},{"id":374,"value":"md`Import Force Cluster Collision from Nadieh Bremer's notebook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"import {forceClusterCollision} from \"@nbremer/custom-cluster-force-layout\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"md`Apply collision with padding`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"forceCluster_Collision = forceClusterCollision()\n .radius(d => radius + padding / 3)\n .strength(0.8)\n .clusterPadding(padding) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"md`Create the force that will attract the points to their geographical point`","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"forceX = d3.forceX(d => projection(d.lon_lat)[0]).strength(0.7)","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"forceY = d3.forceY(d => projection(d.lon_lat)[1]).strength(0.7)","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":213,"value":"d3_cluster = require(\"https://unpkg.com/d3-force-cluster@latest\")","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":"$W33","stdlib":"1","titling":"auto"}