25:["$","title",null,{"children":"CitiBike trips around Central Park | Zhi Keng He | Observable"}] 49:Ta90,{ const container = html`

${ hour >= 12 ? (hour === 12 ? hour : hour - 12) + " pm" : hour + " am" }

Start Trips

End Trips

`; const height = 800; const outgoingSvg = d3 .select(container) .select("#outgoing") .append("svg") .attr("viewBox", [0, 0, width / 2, height]); const incomingSvg = d3 .select(container) .select("#incoming") .append("svg") .attr("viewBox", [0, 0, width / 2, height]); const projection = d3 .geoTransverseMercator() .rotate([74, -40, 29]) .fitExtent( [ [0, 0], [width / 2, height] ], turf.buffer(central_park, 0.5, { units: "miles" }) ); const path = d3.geoPath(projection); const outgoingGroup = outgoingSvg.append("g"); const incomingGroup = incomingSvg.append("g"); //land polygon outgoingGroup .selectAll(".land") .data([manhattan]) .join("path") .classed("land", true) .attr("d", path) .attr("fill", "#ececed") .attr("stroke", "black") .attr("stroke-width", 0.1); incomingGroup .selectAll(".land") .data([manhattan]) .join("path") .classed("land", true) .attr("d", path) .attr("fill", "#ececed") .attr("stroke", "black") .attr("stroke-width", 0.1); //park polygon outgoingGroup .selectAll(".park") .data([central_park]) .join("path") .classed("park", true) .attr("d", path) .attr("fill", "#a9c0b3") .attr("stroke", "grey") .attr("stroke-width", 0); incomingGroup .selectAll(".park") .data([central_park]) .join("path") .classed("park", true) .attr("d", path) .attr("fill", "#a9c0b3") .attr("stroke", "grey") .attr("stroke-width", 0); //stations outgoingGroup .selectAll(".stations") .data(central_park_stations) .join("circle") .attr("fill", (d) => d.properties.aroundPark ? "rgba(64, 160, 255,0.8)" : "rgba(155,155,155,0.2)" ) .attr("cx", (d) => projection(d.geometry.coordinates)[0]) .attr("cy", (d) => projection(d.geometry.coordinates)[1]) .attr("r", (d) => rScale(d.properties.outgoing)); incomingGroup .selectAll(".stations") .data(central_park_stations) .join("circle") .attr("fill", (d) => d.properties.aroundPark ? "rgba(255, 64, 64,0.8)" : "rgba(155,155,155,0.2)" ) .attr("cx", (d) => projection(d.geometry.coordinates)[0]) .attr("cy", (d) => projection(d.geometry.coordinates)[1]) .attr("r", (d) => rScale(d.properties.incoming)); return container; }4a:[{"id":"0dcf0cc90899c0676c2f4c15d5dc9c44a6e9f71f1031394494b146217af75911921b8f440867eb1e87a86abc7537b79966ff23b0c3d827da7c63a64e2ea124fb","href":"https://static.observableusercontent.com/files/0dcf0cc90899c0676c2f4c15d5dc9c44a6e9f71f1031394494b146217af75911921b8f440867eb1e87a86abc7537b79966ff23b0c3d827da7c63a64e2ea124fb","name":"manhattan-3.geojson","type":"application/geo+json","lastModified":1666876882594.674,"size":26457},{"id":"c471be881ff1ae39d8c8ac8543857a46b8849e306a1de292492d9061cf2ae105f58d36e6e604be83253b9595451c50e3cce36af384d1848869c4ee0c1f30be04","href":"https://static.observableusercontent.com/files/c471be881ff1ae39d8c8ac8543857a46b8849e306a1de292492d9061cf2ae105f58d36e6e604be83253b9595451c50e3cce36af384d1848869c4ee0c1f30be04","name":"sept_stations@1.csv","type":"text/csv","lastModified":1666876882594.674,"size":195619},{"id":"3d288c7ae8fe2a45639ad6e7b47ddaba3afd757cefca6ac334a3396f8a710919f28a86a73bd97fa1932e325c71b4220a0f3e07bd77110c19e5b4f6ad15d805d6","href":"https://static.observableusercontent.com/files/3d288c7ae8fe2a45639ad6e7b47ddaba3afd757cefca6ac334a3396f8a710919f28a86a73bd97fa1932e325c71b4220a0f3e07bd77110c19e5b4f6ad15d805d6","name":"sept_rides.parquet","type":"application/octet-stream","lastModified":1666876882594.674,"size":12113508}] 29:{"id":"b3eec6a91b625203","slug":null,"title":"CitiBike trips around Central Park","thumbnail":"5abd43408243aad8ed14bb1f9b7a5e6c2364d5309f03018dc23b8d6365aaef2d","access_level":"public","create_time":"$D2022-10-27T13:21:22.594Z","update_time":"$D2022-12-16T14:57:31.800Z","view_time":null,"first_public_time":"$D2022-10-27T13:21:22.594Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"16506c8d98fe0d4f","login":"zhik","name":"Zhi Keng He","avatar_url":"https://avatars-next.observableusercontent.com/1921c3cb8ffa82cde953aa4417dc8b601dbd05384629c1f8ecf0544be068a204","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":463,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"215e59083f0e53f8","login":"zhik","name":"Zhi Keng He","avatar_url":"https://avatars-next.observableusercontent.com/1921c3cb8ffa82cde953aa4417dc8b601dbd05384629c1f8ecf0544be068a204","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"215e59083f0e53f8","login":"zhik","name":"Zhi Keng He","avatar_url":"https://avatars-next.observableusercontent.com/1921c3cb8ffa82cde953aa4417dc8b601dbd05384629c1f8ecf0544be068a204","tier":null,"role":"editor"}],"comments":[{"id":"f08a2dfe5d0d39dc","reply_to_id":null,"content":"Why I can't make the array into a dataset?","create_time":"$D2022-10-27T19:09:27.239Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5e6ddf36973f353a","login":"hhc9106","name":"HaoChe","avatar_url":"https://avatars-next.observableusercontent.com/5518bb0143f9e13eda2bd7e68d7c0e3cfb1c7026b4ef72826c068ae773d3d9b3","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CitiBike trips around Central Park","cells":[{"id":0,"value":"# CitiBike trips around Central Park","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"viewof hour = Inputs.range([5, 19], { label: \"Hour\", step: 1, value: 8 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"rScale = d3\n .scaleLinear()\n .domain([\n 0,\n d3.max([\n ...central_park_stations.map((i) => i.properties.incoming),\n ...central_park_stations.map((i) => i.properties.outgoing)\n ])\n ])\n .range([0, 10])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"manhattan = await (\n await FileAttachment(\"manhattan-3.geojson\").json()\n).features[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"central_park = ({\n type: \"Feature\",\n properties: {},\n geometry: {\n coordinates: [\n [\n [-73.98184731377465, 40.76805485662834],\n [-73.9581323755779, 40.80063095637897],\n [-73.94921655865086, 40.79689325670785],\n [-73.97298060280693, 40.76432477079467],\n [-73.98184731377465, 40.76805485662834]\n ]\n ],\n type: \"Polygon\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"sept_stations = {\n const stations = await FileAttachment(\"sept_stations@1.csv\").csv();\n\n return stations.map(({ id, name, coordinates }) => ({\n type: \"Feature\",\n properties: { id, name },\n geometry: {\n coordinates: JSON.parse(coordinates),\n type: \"Point\"\n }\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"central_park_stations = {\n const buffer = turf.buffer(central_park, 0.25, { units: \"miles\" });\n const stations = sept_stations.map((pt) => {\n pt.properties.aroundPark = turf.booleanPointInPolygon(pt, buffer);\n return pt;\n });\n\n const outgoing = sept_rides\n .params({ hour: hour })\n .filter((d) => d.start_hour === hour)\n .groupby(\"start_station_id\")\n .count()\n .objects();\n const incoming = sept_rides\n .params({ hour: hour })\n .filter((d) => d.start_hour === hour)\n .groupby(\"end_station_id\")\n .count()\n .objects();\n\n return stations.map((station) => {\n const id = station.properties.id;\n\n const outgoing_data = outgoing.find((i) => i[\"start_station_id\"] === id);\n const incoming_data = incoming.find((i) => i[\"end_station_id\"] === id);\n station.properties.outgoing = outgoing_data?.count ?? 0;\n station.properties.incoming = incoming_data?.count ?? 0;\n return station;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"sept_rides = {\n const data = await getDataTable(await FileAttachment(\"sept_rides.parquet\"));\n return data.derive({\n start_hour: (d) => op.hours(d.start),\n end_hour: (d) => op.hours(d.end)\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import { aq, op } from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"parquetWasm = import(\"https://cdn.jsdelivr.net/npm/parquet-wasm@0.1.1/web.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"init = parquetWasm.default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"readParquet = parquetWasm.readParquet","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"async function getDataTable(file) {\n await init();\n const arrayBuffer = await file.arrayBuffer();\n const arr = new Uint8Array(arrayBuffer);\n const arrowIPC = readParquet(arr);\n const dt = aq.fromArrow(arrowIPC);\n return dt;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null