34:["$","title",null,{"children":"Pet Cats in UK #30DayMapChallenge Day 2 - Lines | Deepali Kank | Observable"}] 3c:T129e,const catMap = (() => { const pts = byCat.get(catPick); const info = refBy.get(catPick); const fmt = d3.utcFormat("%a %d %b · %H:%M"); const t0 = +pts[0].t, t1 = +pts.at(-1).t; const days = ((t1 - t0) / 864e5).toFixed(1); const DURATION = 30000; const wrap = html`

🐾 Nine Lives, One Neighbourhood

GPS-tracked adventures of ${info.animal_id}, a ${info.age_years}-year-old ${info.animal_sex === "f" ? "female" : "male"} ${info.animal_reproductive_condition.toLowerCase()} pet cat, over ${days} days. Pet Cats UK project (Movebank), summer 2017.

`; display(wrap); const map = L.map(wrap.querySelector(".map"), {zoomControl: true, attributionControl: true, maxZoom: 19}); // Esri World Street Map: free tiles, no API key required L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}", { attribution: "Tiles © Esri — Esri, HERE, Garmin, OpenStreetMap contributors", maxZoom: 19 }).addTo(map); const ll = pts.map(d => [d.lat, d.lon]); map.fitBounds(L.latLngBounds(ll).pad(0.25), {maxZoom: 17}); L.polyline(ll, {color: "#d6577f", weight: 1.5, opacity: 0.35}).addTo(map); const trail = L.layerGroup().addTo(map); L.circleMarker(ll[0], {radius: 7, color: "#fff", weight: 2, fillColor: "#7a2e52", fillOpacity: 1}).bindTooltip("Home sweet home").addTo(map); const icon = L.divIcon({ className: "", iconSize: [44, 44], iconAnchor: [22, 22], html: `

🐱

` }); const marker = L.marker(ll[0], {icon, zIndexOffset: 1000}).addTo(map); const times = pts.map(d => +d.t); const bis = d3.bisector(x => x).right; const TRAIL = 36 * 36e5; function posAt(t) { const i = Math.min(Math.max(bis(times, t) - 1, 0), pts.length - 1); if (i >= pts.length - 1) return {i, p: ll[pts.length - 1]}; const f = (t - times[i]) / (times[i + 1] - times[i]); return {i, p: [d3.interpolate(ll[i][0], ll[i + 1][0])(f), d3.interpolate(ll[i][1], ll[i + 1][1])(f)]}; } const cum = [0]; for (let k = 1; k < pts.length; k++) cum.push(cum[k - 1] + d3.geoDistance([pts[k-1].lon, pts[k-1].lat], [pts[k].lon, pts[k].lat]) * 6371); const clock = wrap.querySelector(".clock"), dist = wrap.querySelector(".dist"), scrub = wrap.querySelector(".scrub"); function draw(frac) { const t = t0 + frac * (t1 - t0); const {i, p} = posAt(t); marker.setLatLng(p); trail.clearLayers(); let s = i; while (s > 0 && times[s] > t - TRAIL) s--; for (let k = s; k < i; k++) { const age = (t - times[k + 1]) / TRAIL; L.polyline([ll[k], ll[k + 1]], {color: "#d6577f", weight: 4, opacity: Math.max(0.1, 1 - age), lineCap: "round"}).addTo(trail); } L.polyline([ll[i], p], {color: "#d6577f", weight: 4, opacity: 1}).addTo(trail); clock.textContent = fmt(new Date(t)); dist.textContent = `${cum[i].toFixed(1)} km wandered so far`; scrub.value = frac * 1000; } let frac = 0, last = performance.now(), raf, drag = false; scrub.addEventListener("input", () => { drag = true; frac = scrub.value / 1000; draw(frac); }); scrub.addEventListener("change", () => { drag = false; }); function tick(now) { if (!drag) { frac += (now - last) / DURATION; if (frac > 1.05) frac = 0; draw(Math.min(frac, 1)); } last = now; raf = requestAnimationFrame(tick); } raf = requestAnimationFrame(tick); invalidation.then(() => { cancelAnimationFrame(raf); map.remove(); }); return map; })();3d:[{"id":"e29f5198e3ebbf3d1968b9c3d3314d7a7b7c286131092a0821874a71f31e49b6deac17ae579052c3ab27b6d7ffef30f78311fe20a27266684369700d5ee5ef0f","href":"https://static.observableusercontent.com/files/e29f5198e3ebbf3d1968b9c3d3314d7a7b7c286131092a0821874a71f31e49b6deac17ae579052c3ab27b6d7ffef30f78311fe20a27266684369700d5ee5ef0f","name":".observable/cache/fetch-0k7pdgurh90eyh825cbjut9szd9bqdiz.blob","type":"text/plain; charset=utf-8","lastModified":1793675992000,"size":2073557},{"id":"b03221c97f1a627d8466f211e2320ba85aa284c73b7f4735aaa49fda21eafb01b1bf98ec65ae4cc8a7b752c26c100e13ac7d10d284ab37be72559e6aef76c267","href":"https://static.observableusercontent.com/files/b03221c97f1a627d8466f211e2320ba85aa284c73b7f4735aaa49fda21eafb01b1bf98ec65ae4cc8a7b752c26c100e13ac7d10d284ab37be72559e6aef76c267","name":".observable/cache/fetch-2y5wqwaoe69w34rezw7bue0d90shdybq.blob","type":"text/plain; charset=utf-8","lastModified":1793675992000,"size":11949}] 38:{"id":"5e713af1214da33d","slug":"pet-cats-in-uk-30-day-map-challenge-day-2-lines","title":"Pet Cats in UK #30DayMapChallenge Day 2 - Lines","thumbnail":"6e595cc8ecfd7c7560854538e6a7ec7829f2d3a4265f1bfed1a93005d55734d6","access_level":"public","create_time":"$D2026-11-03T03:18:11.469Z","update_time":"$D2026-11-03T05:25:26.028Z","view_time":null,"first_public_time":"$D2026-11-03T05:26:07.320Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":"starter_2024","bio":"Data Analyst with a passion for Data visualization and storytelling","followed_by_you":false,"follows_you":false},"version":31,"publish_version":31,"role":null,"authored":false,"authors":[{"type":"individual","id":"0b38fd39f0b1d2da","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":null,"bio":"Data Analyst with a passion for Data visualization and storytelling","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Pet Cats in UK #30DayMapChallenge Day 2 - Lines","cells":[{"id":1,"value":"# Pet Cats in UK #30DayMapChallenge Day 2 - Lines","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"const catPick = view(Inputs.select(stats.map(d => d.cat), {\n label: \"Choose a cat\",\n value: \"Max-Tag\",\n format: c => { const r = refBy.get(c); return `${r.animal_id} · ${r.animal_sex === \"f\" ? \"♀\" : \"♂\"} · ${r.age_years} yrs`; }\n}));","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$3c","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"const tracks = await d3.csv(\"https://raw.githubusercontent.com/rfordatascience/tidytuesday/main/data/2023/2023-01-31/cats_uk.csv\", {proxy: true, cache: true});\nconst ref = await d3.csv(\"https://raw.githubusercontent.com/rfordatascience/tidytuesday/main/data/2023/2023-01-31/cats_uk_reference.csv\", {proxy: true, cache: true});\ndisplay(tracks.columns); display(tracks.length); display(Inputs.table(tracks)); display(Inputs.table(ref));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"const clean = tracks\n .filter(d => d.manually_marked_outlier !== \"TRUE\" && d.algorithm_marked_outlier !== \"TRUE\" && d.location_lat && d.location_long)\n .map(d => ({cat: d.tag_id, t: new Date(d.timestamp), lat: +d.location_lat, lon: +d.location_long}))\n .sort((a, b) => a.t - b.t);\nconst refBy = new Map(ref.map(d => [d.tag_id, d]));\nconst byCat = d3.group(clean, d => d.cat);\nconst stats = Array.from(byCat, ([cat, pts]) => ({\n cat, n: pts.length,\n name: refBy.get(cat)?.animal_id ?? cat,\n spanKm: d3.geoDistance([d3.min(pts, d => d.lon), d3.min(pts, d => d.lat)], [d3.max(pts, d => d.lon), d3.max(pts, d => d.lat)]) * 6371\n})).filter(d => d.n > 50).sort((a, b) => d3.descending(a.spanKm, b.spanKm));\ndisplay(Inputs.table(stats.slice(0, 12)));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"const roamers = stats.map(s => {\n const pts = byCat.get(s.cat);\n const lat0 = d3.median(pts, d => d.lat), lon0 = d3.median(pts, d => d.lon);\n const xy = pts.map((d, i) => ({\n i, x: (d.lon - lon0) * 111320 * Math.cos(lat0 * Math.PI / 180), y: (d.lat - lat0) * 110574, t: d.t\n }));\n const far = d3.greatest(xy, d => Math.hypot(d.x, d.y));\n const km = d3.sum(xy.slice(1), (d, k) => Math.hypot(d.x - xy[k].x, d.y - xy[k].y)) / 1000;\n return {cat: s.cat, name: s.name, xy, far, maxM: Math.hypot(far.x, far.y), km};\n}).sort((a, b) => d3.descending(a.maxM, b.maxM)).slice(0, 12);\nroamers.forEach((r, k) => { r.rank = k + 1; r.label = `#${k + 1} ${r.name} · ${Math.round(r.maxM)} m from home`; });\ndisplay(Inputs.table(roamers.map(r => ({rank: r.rank, name: r.name, maxM: Math.round(r.maxM), tracked_km: +r.km.toFixed(1)}))));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"2"}} 33:null