30:Tb8d,bearWalks = { await visibility(); if (visibility()) { mutable x = 0; } replay; const container = html`

`; yield container; // Give the container dimensions. const zoom = width < 650 ? 8 : 9; const map = (container.value = new mapboxgl.Map({ container, center: [-114.6659426, 49.3], zoom: zoom, style: r, scrollZoom: false, interactive: false })); map.addControl(new mapboxgl.ScaleControl({ position: "bottom-right" })); const bb = container.getBoundingClientRect(); console.log(bb); const svg = d3 .select(container) .append("svg") .style("position", "absolute") .style("top", 0) .style("left", 0) .attr("width", bb.width) .attr("height", bb.height) .style("pointer-events", "none"); // .call(zoom); //Project any point to map's current state function projectPoint(lon, lat) { var point = map.project(new mapboxgl.LngLat(lon, lat)); this.stream.point(point.x, point.y); } //Projection function var transform = d3.geoTransform({ point: projectPoint }); var path = d3.geoPath().projection(transform); const g = svg.append("g").attr("id", "map-layers"); let current_circle = undefined; let circle; circle = svg .append("circle") // .append("image") // .attr("xlink:href", bear) .attr("r", 6) .attr( "transform", "translate(" + dataByDate.features[0][0].geometry.coordinates[0] + ")" ) .style("fill", "#8A643C") .style("stroke", "black"); function animatePath(ind) { g.selectAll("#linesMade" + ind) .transition() .ease(d3.easeLinear) .duration((d) => { return duration; }) .attrTween("stroke-dasharray", tweenDash); } // animate // invalidation; dataByDate.features.forEach((e, i) => { setTimeout(function () { const bearPath = g .append("g") .selectAll("path") .data(e) .join("path") .attr("id", "linesMade" + i) .attr("class", "lines") .attr("d", path) .attr("fill", "none") .attr("stroke-width", 5) .attr("stroke", (d, i) => { return "#1E5D6F"; }) .attr("stroke-opacity", 0.5) .attr("stroke-linecap", "round"); animatePath(i); circle .transition() .ease(d3.easeLinear) .duration((d, i) => { return duration; }) .attrTween("transform", translateAlong(bearPath.node())) .end(); // } // Returns an attrTween for translating along the specified path element. function translateAlong(circuitLine) { var l = circuitLine.getTotalLength(); return function (d, i, a) { return function (t) { var p = circuitLine.getPointAtLength(t * l); return "translate(" + p.x + "," + p.y + ")"; }; }; } }, i * duration); }); }31:[{"id":"3df5ed1933b5c495339ed5cd6ef4bbb0af0cb42ba542bd7a905737765356a97ca69af0398c230af4d8941dbf1f0c0ff594049045a0dfd25f1ab8b52d15ad0cee","href":"https://static.observableusercontent.com/files/3df5ed1933b5c495339ed5cd6ef4bbb0af0cb42ba542bd7a905737765356a97ca69af0398c230af4d8941dbf1f0c0ff594049045a0dfd25f1ab8b52d15ad0cee","name":"eva.nc","type":"application/octet-stream","lastModified":1610145868958.483,"size":4110096},{"id":"2dab61e75f296946a24c36f27db14672fbf3d6f6d1daae19338112816fa6d3e888b75bec327c55d2dd6b0528efcaa667b28dccf604049a8c1f7d7dc13bc8c2b3","href":"https://static.observableusercontent.com/files/2dab61e75f296946a24c36f27db14672fbf3d6f6d1daae19338112816fa6d3e888b75bec327c55d2dd6b0528efcaa667b28dccf604049a8c1f7d7dc13bc8c2b3","name":"Male 150 GPS points.csv","type":"text/csv","lastModified":1610145868958.483,"size":31169},{"id":"545147a3a62c526ac16445d2f724f739a618686c35120706fe784e7d8b8acb076660a014b90c361f9f33de431088cf127a7b34072e4773510b4f2621c8b24209","href":"https://static.observableusercontent.com/files/545147a3a62c526ac16445d2f724f739a618686c35120706fe784e7d8b8acb076660a014b90c361f9f33de431088cf127a7b34072e4773510b4f2621c8b24209","name":"mike579.nc","type":"application/octet-stream","lastModified":1610145868958.483,"size":1205656},{"id":"6fcc1e15c89e7656db04448822b9835fe34c40b94aa36559157f982548fd87e7facb4e3fd4e6123529ed7542c0ea270aed1010278cf8c7c3533219d4257c9ff2","href":"https://static.observableusercontent.com/files/6fcc1e15c89e7656db04448822b9835fe34c40b94aa36559157f982548fd87e7facb4e3fd4e6123529ed7542c0ea270aed1010278cf8c7c3533219d4257c9ff2","name":"Google-Noto-Emoji-Animals-Nature-22259-bear-face.ico","type":"image/x-icon","lastModified":1610476394287.436,"size":178564}] 2e:{"title":"Bear on the go","cells":[{"id":0,"value":"md`# Bear on the go \n\nThis visualization tracks the movements of a grizzly bear in the Canadian Rocky Mountains in 2006. Embedded in [Hakai Magazine](https://www.hakaimagazine.com/features/where-now-grizzly-bear/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4373,"value":"width","pinned":true,"hidden":false,"mode":"ojs"},{"id":722,"value":"viewof replay = html`