2a:Tc3f,{ ctx.clearRect(0, 0, width, width) ctx.fillStyle = 'black' let colorInterpolator = d3.interpolate('white', '#f68b28') let colorInterpolator2 = d3.interpolate('#f68b28', '#fcc691') const duration = 750 const distanceMultiplier = 25 const dateMultiplier = 5 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) ctx.fillStyle = 'purple' ctx.beginPath() ctx.rect(pathNode.getBBox().x, pathNode.getBBox().y, pathNode.getBBox().width, pathNode.getBBox().height) ctx.stroke() 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; }2b:T849,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, circleCenter, {x: a.pos.x, y: a.pos.y, r: a.enclose.r + b.enclose.r + padding})[0] let newPos1 = circleIntersections(b.posOnPath, circleCenter, {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; }2c:[] 29:{"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":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"$2b","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":1016,"value":"ratio = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":"theRatio = {\n let bbox = pathNode.getBBox()\n return bbox.width / width;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"ctx = {\n let bbox = pathNode.getBBox()\n \n const canvas = DOM.canvas(width * ratio * theRatio * 1.5, height * ratio * theRatio * 1.5);\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*bbox.x + bbox.width * 0.25, -1*bbox.y + bbox.height * 0.25)\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":1048,"value":"circleCenter = {\n return {x: width / 2, y: height / 2}\n}","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([1.5 * Math.PI, -0.25 * Math.PI])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"pointOnCircle = (rad, r) => {\n return {\n x: r * Math.cos(rad) + width / 2,\n y: r * Math.sin(rad) + height / 2\n }\n}","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 / 20);\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.pos = pointOnCircle(dateScale(d.date), r)\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":"$W2c","stdlib":"1","titling":"auto"}