28:null 29:["$","title",null,{"children":"p5js citibike trips lines | 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:Td90,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(10); 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 ); //draw lines const time_current = new Date(Date.UTC(2022, 8, selectedDate, hour, 0, 0)); particles.forEach((p, i) => { p.show(sketch, time_current, i, -100); }); sketch.pop(); //add text sketch.textFont("monospace"); sketch.textSize(25); sketch.fill(255); sketch.text( time_current.toLocaleString("en-US", { weekday: "long", month: "short", day: "numeric", hour: "numeric", timeZone: "UTC" }), 10, 25 ); }; sketch.draw = function () { seconds += 5; if (seconds > 360) { seconds = 0; } if (rotate_bearing.length) { 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 ); //draw lines const time_current = new Date( Date.UTC(2022, 8, selectedDate, hour, 0, 0) ); particles.forEach((p, i) => { p.show(sketch, time_current, i, seconds); }); sketch.pop(); //add text sketch.textFont("monospace"); sketch.textSize(25); sketch.fill(255); sketch.text( time_current.toLocaleString("en-US", { weekday: "long", month: "short", day: "numeric", hour: "numeric", timeZone: "UTC" }), 10, 25 ); } }; // 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:T7e8,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, select_bearing) { //if (i === 0) console.log(self.bearing, 100, 100); if (current_time < this.start_time || current_time > this.end_time) { return 0; } try { const [start_x, start_y] = this.start_coords.map((d, i) => i === 0 ? convertX(d) : convertY(d) ); const [end_x, end_y] = this.end_coords.map((d, i) => i === 0 ? convertX(d) : convertY(d) ); //color based on bearing const color = sketch.colorMode(sketch.HSB, 360, 100, 100, 100); if (select_bearing >= 0) { //set to full alpha if select_bearing is within 10 units const diff = this.bearing <= 350 ? Math.abs(select_bearing - this.bearing) : Math.abs(select_bearing - (this.bearing - 360)); const alpha = diff < 10 ? 100 : 10; sketch.stroke(this.bearing, 100, 100, this.intersectsPark ? alpha : 0); } else { sketch.stroke( this.bearing, 100, 100, this.intersectsPark ? 100 : 0, 100 ); } sketch.line(start_x, start_y, end_x, end_y); } catch (err) { //console.log(err.message); } } }34:[{"id":"3d288c7ae8fe2a45639ad6e7b47ddaba3afd757cefca6ac334a3396f8a710919f28a86a73bd97fa1932e325c71b4220a0f3e07bd77110c19e5b4f6ad15d805d6","href":"https://static.observableusercontent.com/files/3d288c7ae8fe2a45639ad6e7b47ddaba3afd757cefca6ac334a3396f8a710919f28a86a73bd97fa1932e325c71b4220a0f3e07bd77110c19e5b4f6ad15d805d6","name":"sept_rides.parquet","type":"application/octet-stream","lastModified":1671206784251.215,"size":12113508},{"id":"c471be881ff1ae39d8c8ac8543857a46b8849e306a1de292492d9061cf2ae105f58d36e6e604be83253b9595451c50e3cce36af384d1848869c4ee0c1f30be04","href":"https://static.observableusercontent.com/files/c471be881ff1ae39d8c8ac8543857a46b8849e306a1de292492d9061cf2ae105f58d36e6e604be83253b9595451c50e3cce36af384d1848869c4ee0c1f30be04","name":"sept_stations.csv","type":"text/csv","lastModified":1671206784251.215,"size":195619}] 2c:{"id":"6b709c2a76142063","slug":null,"title":"p5js citibike trips lines","thumbnail":"23a48372c650a06393c72d7ae74b5475eb3c9a610e5a9fbd02f9dd55a9c5d83d","access_level":"public","create_time":"$D2022-12-16T16:06:24.251Z","update_time":"$D2022-12-16T17:13:00.832Z","view_time":null,"first_public_time":"$D2022-12-16T16:06:24.251Z","fork":{"id":"a5d12dcfa786340a","slug":null,"title":"p5js citibike trips","owner":{"id":"16506c8d98fe0d4f","login":"zhik","name":"Zhi Keng He"}},"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":978,"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":0,"collection":null,"type":"notebook","body":{"title":"p5js citibike trips lines","cells":[{"id":0,"value":"# p5js citibike trips lines\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":936,"value":"viewof rotate_bearing = Inputs.checkbox([\"Rotate Bearings?\"])","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\n .map(\n (p) =>\n new Particle(\n p.start_coords,\n p.end_coords,\n p.start,\n p.end,\n p.member_casual\n )\n )\n .sort((a, b) => b.bearing - a.bearing)","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"