28:null 29:["$","title",null,{"children":"p5js citibike trips | Zhi Keng He | Observable"}] 2f:T543,date_picker = { const container = html`

Select a date:

`; const dates = await dbClient.sql`select extract('day' FROM start)::int as date, count(*)::int as cnt from sept_rides group by extract('day' FROM start)`; const dates_div = container.querySelector("#dates"); dates_div.innerHTML = dates .map(({ date, cnt }) => { const dt = new Date(2022, 8, date); return `

${dt.toDateString()}

Total trips in NYC: ${d3.format(",")( cnt )}

`; }) .join(""); [...dates_div.querySelectorAll(".date")].map((date) => date.addEventListener( "click", (e) => (mutable selectedDate = +date.dataset.date) ) ); return container; }30:T677,canvas = p5((sketch) => { const new_width = width > 1200 ? 1200 : width; const height = 500; const center_lng = -73.9663; const center_lat = 40.7844; let seconds = 0; let mapimg; sketch.preload = function () { const url = `https://api.mapbox.com/styles/v1/mapbox/dark-v11/static/${center_lng},${center_lat},${zoom},0/${new_width}x${height}?access_token=pk.eyJ1IjoiemhpayIsImEiOiJjaW1pbGFpdHQwMGNidnBrZzU5MjF5MTJiIn0.N-EURex2qvfEiBsm-W9j7w`; mapimg = sketch.loadImage(url); }; sketch.setup = function () { sketch.createCanvas(new_width, height); sketch.frameRate(fps); }; sketch.draw = function () { seconds += 30; if (seconds > 3600) { seconds = 0; } sketch.push(); sketch.background(0); sketch.translate( -convertX(center_lng) + new_width / 2, -convertY(center_lat) + height / 2 ); sketch.image( mapimg, convertX(center_lng) - new_width / 2, convertY(center_lat) - height / 2 ); const s = seconds % 60; const m = Math.floor(seconds / 60); const time_current = new Date(Date.UTC(2022, 8, selectedDate, hour, m, s)); particles.forEach((p, i) => { p.show(sketch, time_current, i); }); sketch.pop(); //add text sketch.textFont("monospace"); sketch.textSize(25); sketch.fill(255); sketch.text(time_current.toUTCString().replace(" GMT", ""), 10, 25); // //point at columbus circle for testing // sketch.stroke(255, 255, 255); // sketch.fill(255, 0); // sketch.ellipse( // convertX(-73.98189497852522), // convertY(40.76805744254376), // 2.5 // ); }; })31:T964,orientation = { const container = html`

Orientation: # of trips through Central Park at ${ hour > 12 ? (hour === 12 ? "12 PM" : hour - 12 + " PM") : hour + " AM" }

Sept ${selectedDate} 2022

??Orientation: Total miles of trips through Central Park at ${ hour > 12 ? (hour === 12 ? "12 PM" : hour - 12 + " PM") : hour + " AM" }

`; const height = 500; const svg = d3 .select(container) .select("div") .append("svg") .attr("width", width) .attr("height", height); const g = svg .append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); const axisCircles = 4; const slices = 360 / roundAngle; const radius = height / 2; const angleSlice = (Math.PI * 2) / (slices - 1); const rScale = d3 .scaleLinear() .domain([0, d3.max(bearings_bins_miles_agg.map((i) => i[1]))]) .range([0, radius]); const radarLine = d3 .lineRadial() .curve(d3.curveLinear) .radius((d) => rScale(d)) .angle((d, i) => i * angleSlice); const plots = g.append("g").attr("class", "plots"); //convert to 255 and invert const hue = d3.scaleLinear().domain([0, 360]).range([0, 360]); plots .selectAll("path") .data(bearings_bins_miles_agg) .enter() .append("path") .attr("d", (d, i) => { const rad = +d[0] * (Math.PI / 180); const round_rad = roundAngle * (Math.PI / 180); console.log(d[0], d3.hsl(hue(d[0]), 255, 255)); return d3 .arc() .innerRadius(0) .outerRadius(rScale(d[1])) .startAngle(rad) .endAngle(rad + round_rad)(); }) .attr("fill", (d) => d3.hsl(hue(d[0]), 1.0, 0.5)); const axisGrid = g.append("g").attr("class", "axisWrapper"); //circles axisGrid .selectAll(".levels") .data(d3.range(1, axisCircles + 1).reverse()) .enter() .append("circle") .attr("class", "gridCircle") .attr("r", (d, i) => (radius / axisCircles) * d) .style("fill", "#CDCDCD") .style("stroke", "rgba(200,200,200,0.4)") .style("fill-opacity", 0.1); //labels axisGrid .selectAll(".labels") .data(d3.range(1, axisCircles + 1).reverse()) .enter() .append("text") .attr("x", (d, i) => (radius / axisCircles) * d + 5) .attr("y", 0) .attr("font-size", "0.8rem") .attr("fill", "black") .text((d, i) => { const t = d3.format(".1f")(rScale.invert((radius / axisCircles) * d)); return i === 0 ? t + " miles" : t; }); return container; }33:T630,class Particle { constructor(start_coords, end_coords, start_time, end_time, type) { this.start_coords = start_coords; this.end_coords = end_coords; this.start_time = start_time; this.end_time = end_time; this.type = type; //calculate default items this.line = turf.lineString([this.start_coords, this.end_coords]); this.distance = turf.distance(this.start_coords, this.end_coords, { units: "miles" }); this.bearing = convertBearing( turf.bearing(this.end_coords, this.start_coords) ); this.intersectsPark = turf.booleanIntersects(this.line, central_park); //calculate time diff in hours this.time_diff = (end_time - start_time) / 60000 / 60; //miles per hour this.mph = this.distance / this.time_diff; } show(sketch, current_time = this.start_time, i) { //if (i === 0) console.log(self.bearing, 100, 100); if (current_time < this.start_time || current_time > this.end_time) { return 0; } try { const time_diff_current = (this.end_time - current_time) / 60000 / 60; const est_coords = turf.along(this.line, time_diff_current * this.mph, { units: "miles" }).geometry.coordinates; //color based on bearing sketch.colorMode(sketch.HSB, 360, 100, 100, 100); sketch.stroke(this.bearing, 100, 100, this.intersectsPark ? 100 : 0); sketch.colorMode(sketch.RGB); sketch.fill(255, 0); sketch.ellipse(convertX(est_coords[0]), convertY(est_coords[1]), 2); } catch (err) { //console.log(err.message); } } }34:[{"id":"c471be881ff1ae39d8c8ac8543857a46b8849e306a1de292492d9061cf2ae105f58d36e6e604be83253b9595451c50e3cce36af384d1848869c4ee0c1f30be04","href":"https://static.observableusercontent.com/files/c471be881ff1ae39d8c8ac8543857a46b8849e306a1de292492d9061cf2ae105f58d36e6e604be83253b9595451c50e3cce36af384d1848869c4ee0c1f30be04","name":"sept_stations.csv","type":"text/csv","lastModified":1667226712363.887,"size":195619},{"id":"3d288c7ae8fe2a45639ad6e7b47ddaba3afd757cefca6ac334a3396f8a710919f28a86a73bd97fa1932e325c71b4220a0f3e07bd77110c19e5b4f6ad15d805d6","href":"https://static.observableusercontent.com/files/3d288c7ae8fe2a45639ad6e7b47ddaba3afd757cefca6ac334a3396f8a710919f28a86a73bd97fa1932e325c71b4220a0f3e07bd77110c19e5b4f6ad15d805d6","name":"sept_rides.parquet","type":"application/octet-stream","lastModified":1667226701598.884,"size":12113508}] 2c:{"id":"a5d12dcfa786340a","slug":null,"title":"p5js citibike trips","thumbnail":"7feb090d6d54868ebd12ecf9ab652a11f3dac8fe7cd93b363868ecc71156a0e0","access_level":"public","create_time":"$D2022-10-31T14:11:26.880Z","update_time":"$D2023-01-27T18:19:10.273Z","view_time":null,"first_public_time":"$D2022-11-01T16:24:54.753Z","fork":false,"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"},"version":904,"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}],"members":[{"type":"individual","id":"215e59083f0e53f8","login":"zhik","name":"Zhi Keng He","avatar_url":"https://avatars-next.observableusercontent.com/1921c3cb8ffa82cde953aa4417dc8b601dbd05384629c1f8ecf0544be068a204","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"p5js citibike trips","cells":[{"id":0,"value":"# p5js citibike trips\n\n- https://blog.mapbox.com/visualizing-street-orientations-on-an-interactive-map-1eefa6002afc\n- https://observablehq.com/@palewire/radar-chart\n- https://www.youtube.com/watch?v=ZiYdOwOrGyc","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"import { p5 } from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"import { DuckDBClient } from \"@cmudig/duckdb\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"dbClient = DuckDBClient.of([\n { file: FileAttachment(\"sept_rides.parquet\"), header: true },\n { file: FileAttachment(\"sept_stations.csv\"), header: true }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"turf = require(\"@turf/turf@6.5.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"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"},{"id":74,"value":"sept_stations = dbClient.sql`select * from sept_stations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"central_park_stations = {\n const buffer = turf.buffer(central_park, 0.5, { units: \"miles\" });\n const stations = sept_stations.map((station) => {\n const point = JSON.parse(station.coordinates);\n station.aroundPark = turf.booleanPointInPolygon(point, buffer);\n return station;\n });\n\n return stations.filter((station) => station.aroundPark);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"filtered_trips = (\n await dbClient.sql`\nwith trips as (select * from sept_rides where (extract('hour' FROM start) = ${\n hour - 1\n } or extract('hour' FROM start) = ${hour}) and extract('day' FROM start) = ${selectedDate})\nselect a.*, sept_stations.coordinates as end_coords,sept_stations.name as end_name from (\n select trips.*,sept_stations.coordinates as start_coords, sept_stations.name as start_name from trips left join sept_stations on start_station_id = id) as a left join sept_stations on end_station_id = id \n`\n)\n .map((i) => {\n i.start_coords = JSON.parse(i.start_coords);\n i.end_coords = JSON.parse(i.end_coords);\n return i;\n })\n .filter((i) => i.start_coords && i.end_coords)","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"viewof fps = Inputs.range([1, 60], { label: \"FPS\", step: 1, value: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"mutable selectedDate = 26","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"zoom = 12.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"viewof hour = Inputs.range([5, 19], { label: \"Hour\", step: 1, value: 10 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"bearings_bins = Object.entries(\n particles\n .filter((p) => p.intersectsPark)\n .map((p) => p.bearing)\n .reduce((bins, bearing) => {\n if (!(bearing in bins)) bins[bearing] = 0;\n bins[bearing] += 1;\n return bins;\n }, {})\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"bearings_bins_miles_agg = Object.entries(\n particles\n .filter((p) => p.intersectsPark)\n .reduce((bins, { bearing, line }) => {\n if (!(bearing in bins)) bins[bearing] = 0;\n bins[bearing] += turf.length(line, { units: \"miles\" });\n return bins;\n }, {})\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"roundAngle = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"particles = filtered_trips.map(\n (p) =>\n new Particle(p.start_coords, p.end_coords, p.start, p.end, p.member_casual)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"function convertBearing(turfBearing) {\n //convert from turf bearing which is between -180 and 180 degrees (positive clockwise) to 360\n let t1 = turfBearing;\n if (turfBearing < 0) t1 = turfBearing + 360;\n //shift to manhattan grid, round to the nearest primary\n const t2 = t1 + 29 > 360 ? t1 + 29 - 360 : t1 + 29;\n return Math.floor(t2 / roundAngle) * roundAngle;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":" function convertX(lng) {\n lng = lng * (Math.PI / 180);\n const a = (255 / Math.PI) * Math.pow(2, zoom);\n const b = lng + Math.PI;\n return a * b;\n }\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"function convertY(lat) {\n lat = lat * (Math.PI / 180);\n const a = (255 / Math.PI) * Math.pow(2, zoom);\n const b = Math.tan(Math.PI / 4 + lat / 2);\n const c = Math.PI - Math.log(b);\n return a * c;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2d:"$2c:body"