31:Tbc4,timemap = { const onClickItem = function (event) { console.log(d3.select(this).datum()); d3.select(map.element) .selectAll("svg circle") .filter((d) => d3.select(this).datum().id == d.id) .raise() .transition() .ease(d3.easeLinear) .duration((d) => (d.end - d.start) / 1000) .attr("r", 20) .attr( "cx", (d) => map.map.latLngToLayerPoint([ d.pickup_latitude + (d.dropoff_latitude - d.pickup_latitude) / 2, d.pickup_longitude + (d.dropoff_longitude - d.pickup_longitude) / 2 ]).x ) .attr( "cy", (d) => map.map.latLngToLayerPoint([ d.pickup_latitude + (d.dropoff_latitude - d.pickup_latitude) / 2, d.pickup_longitude + (d.dropoff_longitude - d.pickup_longitude) / 2 ]).y ) .transition() .attr("r", 4) .attr( "cx", (d) => map.map.latLngToLayerPoint([d.dropoff_latitude, d.dropoff_longitude]) .x ) .attr( "cy", (d) => map.map.latLngToLayerPoint([d.dropoff_latitude, d.dropoff_longitude]) .y ) .transition() .duration(500) .style("opacity", 0) .transition() .duration(0) .style("opacity", 1) .attr( "cx", (d) => map.map.latLngToLayerPoint([d.pickup_latitude, d.pickup_longitude]).x ) .attr( "cy", (d) => map.map.latLngToLayerPoint([d.pickup_latitude, d.pickup_longitude]).y ) .transition() .duration(500) .attr("r", 4); }; const onMapZoomEnd = function (event) { let filteredData = data.filter( (d) => d["pickup_latitude"] < event._northEast.lat && d["pickup_longitude"] < event._northEast.lng && d["pickup_latitude"] > event._southWest.lat && d["pickup_longitude"] > event._southWest.lng ); const bounds = timeline.getBounds(); filteredData = filteredData.filter( (d) => d.start > bounds.start && d.end < bounds.end ); timeline.update(filteredData); map.update(filteredData); }; const onTimelineZoomEnd = function (event) { console.log(event); let filteredData = data.filter( (d) => d.start > event.start && d.end < event.end ); const bounds = map.map.getBounds(); filteredData = filteredData.filter( (d) => d["pickup_latitude"] < bounds._northEast.lat && d["pickup_longitude"] < bounds._northEast.lng && d["pickup_latitude"] > bounds._southWest.lat && d["pickup_longitude"] > bounds._southWest.lng ); timeline.update(filteredData); map.update(filteredData); }; const timeline = Timeline(data, { from: d3.min(data, (d) => d.start), until: d3.max(data, (d) => d.start), onClickItem, onTimelineZoomEnd }); const map = LeafletMap(onMapZoomEnd, onClickItem); return { map, timeline }; }32:T7aa,LeafletMap = (onZoomEnd, onClickItem) => { const element = html`

`; const map = L.map(element, { zoomSnap: 0.25 }).setView( [40.7299, -73.9923], 13 ); const radius = 4; L.tileLayer( "https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}{r}.png", { attribution: "© OpenStreetMap contributors" } ).addTo(map); // D3 L.svg({ clickable: true }).addTo(map); const overlay = d3.select(map.getPanes().overlayPane); const svg = overlay.select("svg").attr("pointer-events", "auto"); const update = (data) => svg .selectAll("circle") .data(data) .join("circle") .attr("fill", "red") .style("stroke", "white") .style("stroke-width", 1) .style("cursor", "pointer") .attr( "cx", (d) => map.latLngToLayerPoint([d.pickup_latitude, d.pickup_longitude]).x ) .attr( "cy", (d) => map.latLngToLayerPoint([d.pickup_latitude, d.pickup_longitude]).y ) .attr("r", 4) .on("mouseover", () => { d3.select(this) .transition() .duration("150") .attr("fill", "white") .attr("r", 2 * radius); }) .on("mouseout", () => { d3.select(this) .transition() .duration("150") .attr("fill", "red") .attr("r", radius); }) .on("click", onClickItem); update(data); const zoomEnd = () => { svg .selectAll("circle") .attr( "cx", (d) => map.latLngToLayerPoint([d.pickup_latitude, d.pickup_longitude]).x ) .attr( "cy", (d) => map.latLngToLayerPoint([d.pickup_latitude, d.pickup_longitude]).y ) .attr("r", radius); onZoomEnd(map.getBounds()); }; map.on("zoomend", zoomEnd); map.on("moveend", zoomEnd); return { map, element, update }; }33:[{"id":"ed06fff32bc29833008b21894f77b7249e4d35798d1814a165b8525ef12efacdb18620a0a288ba099ea6a7ca546ef5eb05742e4ae9fd2feab62210e124f8b44e","href":"https://static.observableusercontent.com/files/ed06fff32bc29833008b21894f77b7249e4d35798d1814a165b8525ef12efacdb18620a0a288ba099ea6a7ca546ef5eb05742e4ae9fd2feab62210e124f8b44e","name":"2016-02-02.csv","type":"text/csv","lastModified":1665955154065.11,"size":135094}] 2f:{"title":"New York City Taxi Trip Duration","cells":[{"id":0,"value":"# New York City Taxi Trip Duration \n","pinned":false,"hidden":false,"mode":"md"},{"id":367,"value":"This is a data exploration of the data set from the Kaggle competition [https://www.kaggle.com/c/nyc-taxi-trip-duration](https://www.kaggle.com/c/nyc-taxi-trip-duration). \n\nEach item on the timeline and on the map represent a taxi trip. Click on an item on the timeline to see an animation of the trip on the map. The timeline and the map are zoomable.","pinned":false,"hidden":false,"mode":"md"},{"id":287,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"timemap.map.element","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"timemap.timeline.element","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"years = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"MS_PER_YEAR = 365.24 * MS_PER_DAY // include leap year","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"MS_PER_DAY = 24 * MS_PER_HOUR","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"MS_PER_HOUR = 60 * 60 * 1000","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"scaleX = {\n const span = d3.extent(data, (d) => d.start);\n const from = span[0];\n const until = span[1];\n\n const timeScale = d3\n .scaleUtc()\n .domain([from, until])\n .range([margin.left, width - margin.right]);\n\n return timeScale;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"margin = ({ top: 80, right: 20, bottom: 20, left: 20 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"scaleX.domain()[0]\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"import { Timeline } from \"@jcolot/zoomable-timeline-with-items\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"data = {\n const text = await FileAttachment(\"2016-02-02.csv\").text();\n const parseDate = d3.utcParse(\"%Y-%m-%d %H:%M:%S\");\n return d3.csvParse(text, (d) => {\n d.pickup_longitude = parseFloat(d.pickup_longitude);\n d.pickup_latitude = parseFloat(d.pickup_latitude);\n d.dropoff_longitude = parseFloat(d.dropoff_longitude);\n d.dropoff_latitude = parseFloat(d.dropoff_latitude);\n d.start = parseDate(d.pickup_datetime);\n d.end = parseDate(d.dropoff_datetime);\n return d;\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"data[0].start","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}