31:Tb83,{ ctx.clearRect(-10000, -10000, 20000, 20000) ctx.fillStyle = 'black' let colorInterpolator = d3.interpolate('white', '#AF7852') let colorInterpolator2 = d3.interpolate('#AF7852', '#f68b28') const duration = 750 const distanceMultiplier = 15 const dateMultiplier = 3 let maxDistance = 0; let nodes = []; for (var i = 0; i < timelineNodes.length; i++) { let node = timelineNodes[i] node.distance = dateMultiplier * pathNode.getTotalLength() * dateScale(node.date) for (var j = 0; j < node.nodes.length; j++) { let student = {} student.x = node.nodes[j].x + node.pos.x student.y = node.nodes[j].y + node.pos.y student.offset = node.distance + (node.nodes[j].distance * distanceMultiplier) if (student.offset > maxDistance) { maxDistance = student.offset } nodes.push(student) } } let midpoint = 0.5 let metaScale = d3.scaleSequential(d3.easeExpOut).domain([0, duration]).clamp(true) let scale = d3.scaleThreshold() .range([ d3.scaleSequential((t) => colorInterpolator(t)).domain([0, midpoint]).clamp(true), d3.scaleSequential((t) => colorInterpolator2(d3.easeExpIn(t))).domain([midpoint, 1]).clamp(true) ]) const totalDuration = duration + maxDistance; let lastElapsed = 0; function draw(elapsed) { if (elapsed >= totalDuration) t.stop(); let filtered = nodes.filter(student => ((lastElapsed - student.offset) < duration) && ((elapsed - student.offset) > 0)); for(var i = 0; i < filtered.length; i++){ let student = filtered[i]; // ctx.fillStyle = 'white'; // ctx.beginPath() // ctx.arc(student.x, student.y + (height / 2), radius + 0.3, 0, 2*Math.PI) // ctx.fill() ctx.fillStyle = scale(metaScale(elapsed - student.offset))(metaScale(elapsed - student.offset)) ctx.beginPath() ctx.arc(student.x, student.y, radius, 0, 2*Math.PI) ctx.fill() } lastElapsed = elapsed; } let t = d3.timer(draw) // for(var i = 0; i < nodes.length; i++){ // let student = nodes[i]; // ctx.fillStyle = 'black' // ctx.beginPath() // ctx.arc(student.x, student.y, radius, 0, 2*Math.PI) // ctx.fill() // } // for (var i = 0; i < timelineNodes.length; i++) { // let school = timelineNodes[i] // ctx.fillStyle = 'none' // ctx.strokeStyle = 'black' // ctx.beginPath() // ctx.arc(school.pos.x, school.pos.y, school.enclose.r, 0, 2 * Math.PI) // ctx.stroke() // ctx.strokeStyle = 'red' // ctx.beginPath() // ctx.moveTo(school.normalPoint.x, school.normalPoint.y) // ctx.lineTo(school.posOnPath.x, school.posOnPath.y) // ctx.stroke() // ctx.strokeStyle = 'green' // ctx.beginPath() // ctx.moveTo(school.pos.x, school.pos.y) // ctx.lineTo(school.posOnPath.x, school.posOnPath.y) // ctx.stroke() // } return totalDuration / 1000; }32:T847,dodge = (schoolsArray, padding = 1) => { let schools = schoolsArray.slice().map(school => { school.offsetPointA = pathNode.getPointAtLength(pathNode.getTotalLength() * dateScale(school.date) + 10) school.offsetPointA.r = 50 school.offsetPointB = pathNode.getPointAtLength(pathNode.getTotalLength() * dateScale(school.date) - 10) school.offsetPointB.r = 50 school.normalPoint = firstIntersectionOfTwoCircles(school.offsetPointA, school.offsetPointB) return school }) const epsilon = 1e-3; let head = null, tail = null; function intersects(x, y, r) { let a = head; while (a) { if ((a.enclose.r + r + padding - epsilon) ** 2 > (a.pos.x - x) ** 2 + (a.pos.y - y) ** 2) { return true; } a = a.next; } return false } for (const b of schools) { while (head && head.pos.x < b.pos.x - (b.enclose.r * 2 + padding)) head = head.next; if (intersects(b.pos.x, b.pos.y, b.enclose.r)) { let a = head; b.pos = {x: Infinity, y: Infinity} do { //let y = a.pos.y + Math.sqrt((a.enclose.r + b.enclose.r + padding) ** 2 - (a.pos.x - b.pos.x) ** 2); //let x = a.pos.x + Math.sqrt((a.enclose.r * b.enclose.r + padding) ** 2 - (a.pos.y - b.pos.y) ** 2); let newPos0 = circleIntersections(b.posOnPath, b.normalPoint, {x: a.pos.x, y: a.pos.y, r: a.enclose.r + b.enclose.r + padding})[0] let newPos1 = circleIntersections(b.posOnPath, b.normalPoint, {x: a.pos.x, y: a.pos.y, r: a.enclose.r + b.enclose.r + padding})[1] if (distance(newPos0, b.posOnPath) < distance(b.pos, b.posOnPath) && !intersects(newPos0.x, newPos0.y, b.enclose.r)) { b.pos = newPos0; } if (distance(newPos1, b.posOnPath) < distance(b.pos, b.posOnPath) && !intersects(newPos1.x, newPos1.y, b.enclose.r)) { b.pos = newPos1; } a = a.next; } while (a); } b.next = null; if (head === null) head = tail = b; else tail = tail.next = b; } return schools; }33:[] 2f:{"title":"Test for beeswarm layout along path","cells":[{"id":0,"value":"md`# Test for beeswarm layout along path`","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"svg = DOM.element('svg:svg', {width, height, style: 'position: absolute; left: 10'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"el = {\n let el = DOM.element('div')\n el.appendChild(ctx.canvas)\n el.appendChild(svg)\n return el\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"value":"timelineNodes = dodge(schools, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":919,"value":"distance = (a, b) => { return Math.sqrt((b.x - a.x)**2 + (b.y - a.y)**2) }","pinned":false,"hidden":false,"mode":"ojs"},{"id":921,"value":"firstIntersectionOfTwoCircles = (circle1, circle2) => {\n let d = distance(circle1, circle2)\n let a = (circle1.r ** 2 - circle2.r ** 2 + d ** 2) / (2 * d)\n let h = Math.sqrt(circle1.r ** 2 - a ** 2)\n let p2 = {\n x: circle1.x + a * (circle2.x - circle1.x) / d,\n y: circle1.y + a * (circle2.y - circle1.y) / d\n }\n return {\n x: p2.x - h * (circle2.y - circle1.y) / d,\n y: p2.y + h * (circle2.x - circle1.x) / d,\n r: 3\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":916,"value":"circleIntersections = (a, b, c) => {\n let d = {x: (b.x - a.x)/distance(a, b), y: (b.y - a.y)/distance(a, b)}\n let t = d.x * (c.x - a.x) + d.y * (c.y - a.y)\n let e = {x: t * d.x + a.x, y: t * d.y + a.y}\n if (distance(e, c) < c.r) {\n let dt = Math.sqrt(c.r ** 2 - distance(e, c) ** 2)\n return [\n {\n x: (t - dt) * d.x + a.x, \n y: (t - dt) * d.y + a.y\n }, \n {\n x: (t + dt) * d.x + a.x, \n y: (t+dt) * d.y + a.y\n }\n ]\n } else if (distance(e, c) === c.r) {\n return [e, e];\n } else {\n return [{x: -5, y: -5}, {x: -5, y: -5}]\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"pathNode.getBBox().x","pinned":false,"hidden":false,"mode":"ojs"},{"id":1074,"value":"r","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"ratio = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"minX = d3.min(timelineNodes.map(d => d.pos.x - d.enclose.r))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"maxX = d3.max(timelineNodes.map(d => d.pos.x + d.enclose.r))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"ctx = {\n let minX = d3.min(timelineNodes.map(d => d.pos.x - d.enclose.r))\n let minY = d3.min(timelineNodes.map(d => d.pos.y - d.enclose.r))\n let maxX = d3.max(timelineNodes.map(d => d.pos.x + d.enclose.r))\n let maxY = d3.max(timelineNodes.map(d => d.pos.y + d.enclose.r))\n let theRatio = (maxX - minX) / width;\n \n const canvas = DOM.canvas(width * ratio * theRatio, height * ratio * theRatio);\n canvas.style.width = `${width}px`\n canvas.style.height = `${height}px`\n let ctx = canvas.getContext('2d')\n \n ctx.scale(ratio, ratio)\n ctx.translate(-1*minX, -1*minY)\n return ctx;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"d3SVG = d3.select(svg)","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"viewof r = DOM.range(0, 1000, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"pathNode = { \n d3SVG.selectAll('path').remove()\n \n return d3SVG.append('path').attr('d', \n `M${width / 2 - 100},${200} A ${r},${r} 0 1 0 ${width * 0.75 - 100},${250}`)\n .style('stroke', 'none')\n .style('fill', 'none')\n .node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"radius = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"dateParser = d3.timeParse('%m/%d/%Y')","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"schoolDataRaw = d3.json('https://gist.githubusercontent.com/jmuyskens/1780892ccc60ab26801c9eaf7d0aa9a7/raw/8d0c6e4aa0d8269404798e35c288614c7479f718/shootings.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"schoolData = schoolDataRaw.data.map(school => {\n school.date = dateParser(school.date);\n school.adjust = +school.adjust;\n return school;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"dateRange = d3.extent(schoolData.map(d => d.date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"dateScale = d3.scaleTime().domain(dateRange).range([0, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"schoolData.map(d => dateScale(d.date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"masterSchools = await d3.json('https://gist.githubusercontent.com/jmuyskens/9d003af53fd26f421b24503b01d3d4f4/raw/4b915216003950510f08c67c4a7016fbdb2befce/masterSchools.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"schools = schoolData.filter(d => d.adjust > 0).sort((a, b) => { return a.date - b.date}).map(d => {\n let school = {};\n school.date = d.date;\n school.exposed = Math.ceil(d.adjust / 10);\n school.nodes = masterSchools.slice(0, school.exposed)\n school.enclose = d3.packEnclose(school.nodes)\n school.pos = pathNode.getPointAtLength(pathNode.getTotalLength() * dateScale(d.date))\n school.posOnPath = school.pos\n return school\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}