3f:null 40:["$","title",null,{"children":"Constellations | Michelle Sharer | Observable"}] 46:Tcf4,class Node { constructor({ startFromCenter = false } = {}) { let side1 = random(0, 3); let side2 = random(0, 3, [side1]); if (startFromCenter) { this.source = { x: width/2, y: height/2 }; this.destination = getCoords(side1); } else { this.source = getCoords(side1); this.destination = getCoords(side2); } this.distance = distance(this.source, this.destination); // create scale to find any x and y values along 'this's travel path this.getX = d3.scaleLinear() .domain([0, this.distance]) .range([this.source.x, this.destination.x]); this.getY = d3.scaleLinear() .domain([0, this.distance]) .range([this.source.y, this.destination.y]); this.initiateCircle(); this.createConnections(); this.initiateMouseLine(); } get x() { return this.circle.attr('cx'); } get y() { return this.circle.attr('cy'); } get coords() { return { x: this.x, y: this.y }; } initiateCircle() { this.circle = circle(this.source); this.circle.attr('fill', colorScale(random(1, 10))); this.circle.transition() .duration(this.distance * 30) .ease(d3.easeLinear) .attr('cx', this.destination.x) .attr('cy', this.destination.y) .on('end', () => { this.circle.attr('class', 'gone') }) .remove(); } createConnections() { mouse.nodes.forEach(node => { let connection = line(this.coords, node.coords); let nodeDistanceLeft = distance(node.coords, node.destination); let duration, endx1, endy1, endx2, endy2, progress; // figure out if 'this' or 'node' will reach its destination first if (this.distance < nodeDistanceLeft) { duration = this.distance; endx1 = this.destination.x; endy1 = this.destination.y; // find the (x,y) coordinates of 'node' when 'this' reaches its destination progress = node.distance - nodeDistanceLeft; endx2 = node.getX(this.distance + progress); endy2 = node.getY(this.distance + progress); } else { duration = nodeDistanceLeft; // find the (x,y) coordinates of 'this' when 'node' reaches its destination endx1 = this.getX(nodeDistanceLeft); endy1 = this.getY(nodeDistanceLeft); endx2 = node.destination.x; endy2 = node.destination.y; } connection.transition() .duration(duration * 30) .ease(d3.easeLinear) .attr('x1', endx1) .attr('y1', endy1) .attr('x2', endx2) .attr('y2', endy2) .attrTween('stroke-width', () => { return () => strokeScale(distance(this.coords, node.coords)) }) .remove(); }) } initiateMouseLine() { this.line = line(this.coords, mouse, 'mouse'); this.line.style('visibility', mouse.gone ? 'hidden' : 'visible'); this.line.transition() .duration(this.distance * 30) .ease(d3.easeLinear) .attr('x1', this.destination.x) .attr('y1', this.destination.y) .attrTween('stroke-width', () => { return () => { return strokeScale(distance(mouse, this.coords)); } }) .remove(); } }47:[] 44:{"id":"cb5e38a2812fc56f","slug":"constellations","title":"Constellations","thumbnail":"5c3f1c2cdbb755047bc54ff666ea6a655143e08e979993967c5405326c444e1c","access_level":"public","create_time":"$D2018-08-05T18:18:51.479Z","update_time":"$D2018-08-05T20:41:41.812Z","view_time":null,"first_public_time":"$D2018-08-05T20:19:48.166Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"a8c61a0bd942bbae","login":"michellesh","name":"Michelle Sharer","avatar_url":"https://avatars-next.observableusercontent.com/3b3457ea034b092ee6e8816f25ca63ab51d6818c09fee1007b6c5c72db95c4fc","tier":"starter_2024","bio":"Code is art","following":false},"version":161,"publish_version":161,"role":null,"authored":false,"authors":[{"type":"individual","id":"9fee62f7566ea13e","login":"michellesh","name":"Michelle Sharer","avatar_url":"https://avatars-next.observableusercontent.com/3b3457ea034b092ee6e8816f25ca63ab51d6818c09fee1007b6c5c72db95c4fc","tier":null,"bio":"Code is art","following":false}],"members":[{"type":"individual","id":"9fee62f7566ea13e","login":"michellesh","name":"Michelle Sharer","avatar_url":"https://avatars-next.observableusercontent.com/3b3457ea034b092ee6e8816f25ca63ab51d6818c09fee1007b6c5c72db95c4fc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Constellations","cells":[{"id":0,"value":"md`# Constellations\n\ninspired by https://iohk.io/about/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"{\n const constant = html`