45:["$","title",null,{"children":"Week 9 Lab: Building interactive spatio-temporal visualizations | rk2546 | Observable"}] 4d:Tb02,### 1C. Practicing with time formatting If we want to work with d3.timeParse() then we need to know how to define something like "%d-%m-%Y" to begin with. How do we do that? The kind of neat thing about D3's time format system is that it uses the same kind of syntax that was first pioneered by C's strtime function (Python also uses this too, actually). Here's a table to help you understand the syntax involved: | Directive | Meaning | Example | | --------- | ----------------------------------------- | ----------------- | | `%Y` | 4-digit year | `2025` | | `%y` | 2-digit year | `25` | | `%m` | Month number (01–12) | `03` | | `%b` | Abbreviated month name | `Jan`, `Feb` | | `%B` | Full month name | `January` | | `%d` | Day of month (01–31) | `09` | | `%e` | Day of month (space-padded) | ` 9` | | `%a` | Abbreviated weekday | `Mon` | | `%A` | Full weekday | `Monday` | | `%H` | Hour (00–23, 24-hour clock) | `14` | | `%I` | Hour (01–12, 12-hour clock) | `02` | | `%p` | AM/PM indicator | `AM`, `PM` | | `%M` | Minute (00–59) | `05` | | `%S` | Second (00–61, includes leap seconds) | `09` | | `%L` | Milliseconds (000–999) | `123` | | `%Z` | Time zone abbreviation | `GMT`, `UTC` | | `%j` | Day of year (001–366) | `032` | | `%U` | Week number (Sunday as first day of week) | `07` | | `%W` | Week number (Monday as first day of week) | `06` | | `%x` | Locale-specific date | depends on locale | | `%X` | Locale-specific time | depends on locale | | `%%` | Literal `%` | `%` | For example, if you have a timestamp such as "01/15/20", you can easily designate the format as "%m/%d/%y"; this tells d3.timeParse() that "I expect timestamps to be in a month/day/year format".4e:T794,In today's lecture, we covered the NYC Taxi Open Dataset, which gives us a lot of juicy info about taxi pickups across many years in NYC. Let's look at one specific subset of that data: the week of Thanksgiving in November, 2024. We've imported three files into this notebook already: - yellow_tripdata_2024-11_thanksgiving.csv - Google Drive alternative - this Google Colab Pre-Processing - taxi_zones_wgs84.json - Google Drive alternative - Google Colab Pre-Processing The taxi data was originally formatted in the .parquet format, which JavaScript and D3 cannot read. We've pre-processed the dataset, removed some unnecessary columns, and converted it into a .csv for you already via this Google Colab Notebook. Furthermore, the same data repository provides shapefiles for taxi regions in NYC. However, this geodata's coordinates were localized to the New York State Plane coordinates (EPSG:2263). We used this Google Colab notebook to convert all coordinates to EPSG:4326 (longitude/latitude) as well as transform it into GeoJson.4f:T40f,### Creating counts for each Location ID Our taxi_data dataset has the weekly taxi pickups and drop-offs for the week of Thanksgiving. Let's say that we want to aggregate, for the entire week, the total number of pickups and drop-offs that occurred per location in our taxi zones. To achieve this, we will have to use a special function from D3 called d3.rollup(). It's a special function that lets you create a JavaScript Map that effectively acts as a dictionary. The general syntax is as follows: ```js d3.rollup(data, v => // the aggregated rows as an array d => d.key); ``` So if we have a huge dataset and we want to aggregate the data while also creating a dictionary where we want to identify the total number of counts per location, then we can use this kind of logic.50:T4d8,### Understanding Zooming and D3 The ability to zoom into geodata visualizations is a useful tool to distinguish finer details. In understand how to incorporate zoom functionality, observe the code sample below: ```js // We assume that you have an `svg` and a `chart` already const zoom = d3.zoom() // Zoom Multiplier: [min, max] .scaleExtent([1, 10]) // Event Listener: on "zoom", transform your visualization container .on("zoom", (event) => chart.attr("transform", event.transform)) ``` In this code example, we are creating a callback function called zoom. This function checks how much you are scrolling with your mouse and restricts the zoom amount up to 10x the original scale. It then creates an event listener such that, upon detecting a mouse scroll, it transforms the chart

[NOTE]

We modify chart instead of svg because we want the visualization to be windowed within the dimensions of the svg itself. If we applied the transformation to svg itself, then you'll see some pretty weird behavior.

51:T5fd,### Plotting GeoJSON with Zoom and Pickup/Dropoff

[TO-DO]

Let's combine the steps from Parts 3a, 3b, and 3c to create an interactive map, with zooming functionality. The order of operations generally can be described as:

Use both pickup_lookup or dropoff_lookup to append new properties to each location: pickups and dropoffs.
Create two color scales that maps pickup and dropoff counts to some color scheme.
Use the taxi_type input, identify what the color scale D3 should use when mapping the chloropleth map of our geodata.

[HINT]

Previously, we defined taxi_types as a dropdown, with two options: "PickUp" and "DropOff". To get the current value using D3.js, you can access taxi_types.property("values").

[HINT]

If you're struggling with conceptualizing how to make the map update based on taxi_type's current value, recall what we did in Week 7's lab (solution code for that lab here). We used a separate update function that would be called whenever a person clicked a button. The same logic applies here.

52:[{"id":"75cb7bac41d92045362fe0f2b330cfe9f580491b3135d7ecc045218c9fefd879989415498d1279885f0a761966ae4fe4a1003f18d98ba410c26eacc86021520d","href":"https://static.observableusercontent.com/files/75cb7bac41d92045362fe0f2b330cfe9f580491b3135d7ecc045218c9fefd879989415498d1279885f0a761966ae4fe4a1003f18d98ba410c26eacc86021520d","name":"delhi-climate.csv","type":"text/csv","lastModified":1761909080621.336,"size":78199},{"id":"a43e63dc436a37c84868d63415fdd135baf79308c801872b5904e4abf54231fb86a84fa5121383a079696d2c00b62020515bd91575c0ff3cdc3df9fe9039f464","href":"https://static.observableusercontent.com/files/a43e63dc436a37c84868d63415fdd135baf79308c801872b5904e4abf54231fb86a84fa5121383a079696d2c00b62020515bd91575c0ff3cdc3df9fe9039f464","name":"taxi_zone_lookup.csv","type":"text/csv","lastModified":1761917574639.568,"size":12331},{"id":"063c94850c24db387c42eb0fbd5134b662112f4e0f97353b7fab3d547bc7238d8ea36d7a4826f64acbd25ad5ecf2bfe68d452c4885890822b7a083757906c4ee","href":"https://static.observableusercontent.com/files/063c94850c24db387c42eb0fbd5134b662112f4e0f97353b7fab3d547bc7238d8ea36d7a4826f64acbd25ad5ecf2bfe68d452c4885890822b7a083757906c4ee","name":"taxi_zones_wgs84.json","type":"application/json","lastModified":1761919360728.063,"size":4450907},{"id":"7eb327eeacfae3653a05935f330ee182a5496ae30259c5a320dbe32abe8562adb723691244160ccb12145757acff986a779c07fc08451128e0c50265310a58ac","href":"https://static.observableusercontent.com/files/7eb327eeacfae3653a05935f330ee182a5496ae30259c5a320dbe32abe8562adb723691244160ccb12145757acff986a779c07fc08451128e0c50265310a58ac","name":"yellow_tripdata_2024-11_thanksgiving@1.csv","type":"text/csv","lastModified":1761918042045.923,"size":41907705}] 49:{"id":"d6da22378f2b1a4c","slug":"2026-infovis-cse_week-9-lab","title":"Week 9 Lab: Building interactive spatio-temporal visualizations","thumbnail":"c068b3e546ec58734409f1c8a3f8dd20c95083f132a8c23e2cd2158ef09b1bd2","access_level":"unlisted","create_time":"$D2026-10-15T21:12:50.118Z","update_time":"$D2026-10-15T23:14:55.718Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/f4dbf638309ae46a2fdbe9c7c40d1cf5bd31e0cd3ce09ac558ef7a4a8f2d7377","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":694,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddc2916ccfd28b14","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/a17ba87a2618a0219160d264d7e13fdef2d4fb8bd902ae457541c60e7498fc11","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546","avatar_url":"https://avatars-next.observableusercontent.com/f4dbf638309ae46a2fdbe9c7c40d1cf5bd31e0cd3ce09ac558ef7a4a8f2d7377","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Week 9 Lab: Building interactive spatio-temporal visualizations","cells":[{"id":0,"value":"# Week 9 Lab: Building interactive spatio-temporal visualizations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":491,"value":"---\n## Part 1: About Time Handling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"When handling datasets from real-world environments, you will likely come across timestamps with radically different formats. A crucial skill here is knowing how to handle all the different types of data formats. Let's take some time to really understand how to do this.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"### 1A. The ideal time format: \"ISO-8601\"\n\nConsider that everyone has a different way to encode timestamps. You may see date types from 2020-01-15 to \"January 15, 2020\" to even crazy ones like 2020-01-15T10:30:00.\n\nHow do you parse this consistently? One of the more common answers to this problem is the **\"ISO-8601\"** format. In ISO-8601, a date written out like \"September 27, 2022 at 6pm\" is represented as 2022-09-27T18:00:00.000.\n\nJavaScript (and by extension, D3) prefer to encode dates in the ISO-8601 format. However, the methodology to achieve this is different between plain JavaScript and D3.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"### 1B. JavaScript Date() v.s. D3's timeParse()\n\nIn plain JavaScript, you are encouraged to treat timestamps as Date() objects. This object class **expects your timestamp to already be in the ISO-8601 format**. Though this means you will likely have to do some data handling beforehand, the Date() object class gives you some nifty additional functions, such as using .getYear() or .getMonth() to extract the year and month of a timestamp. You can look up the properties and functions of the Date() class [here](https://www.w3schools.com/jsref/jsref_obj_Date.asp).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"// JavaScript's Date() Object\ndisplay(\n new Date(\"2020-01-15T10:30:00\")\n);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"Alternatively, D3 really wants you to handle timestamps using d3.timeParse(). Unlike JavaScript's Date() object class, which expects your timestamp to be in a specific format already, D3 lets you **define the expected format of your input string**. This makes D3's implementation a bit more flexible with wonky timestamps. In the end, **the output is the same:** it'll return a Date() object class in the ISO-8601 format.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"// D3's timeParse() function\nlet parser =d3.timeParse(\"%Y-%m-%dT%H:%M:%S\")\ndisplay(\n parser(\"2020-01-15T10:30:00\")\n);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"In these examples, both work because the provided timestamp is already in the ISO-8601 format. However, what if we had a wonky timestamp like \"15-01-2020\"?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"// Initialize parser for D3\nlet parser = d3.timeParse(\"%d-%m-%Y\")\nlet bad_example = \"15-01-2020\";\n\nlet js_date = new Date(bad_example); // JS's Date Object WON'T WORK: this is an invalid timestamp\nlet d3_date = parser(bad_example);\n\ndisplay(`JavaScript: ${js_date}`);\ndisplay(`D3.js: ${d3_date}`);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"When working with D3 and need to work with time-series data, you are **heavily encouraged** to use d3.timeParse() to force timestamps into a Date() object with the ISO-8601 format. You'll know if you've implemented it correctly if d3.timeParse() doesn't return null.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"

[TO-DO]

Let's practice with this formatting first. Below are code blocks with a designated _INPUT_TIMESTAMP. Complete each d3.timeParse() code so that the date comes out correctly (i.e. each code block returns an actual timestamp, rather than null).

[TO-DO]

For each of code block below, first convert the strings into Date() objects using d3.timeParse(), then output the day, month, year, etc. of that timestamp (pay attention to each code block's instructions). You must use functions provided by the Date() class to achieve this (i.e. don't cheat and use string parsing to extract the date from the input string).

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":270,"value":"// ===== EXAMPLE - Do not modify =====\nlet _INPUT_TIMESTAMP = \"2018-03-05\";\n\n// === TO-DO ===\n// Get the month (i.e. 0-11) of this timestamp. This should return 2.\nlet parser = d3.timeParse(\"%Y-%m-%d\");\nlet timestamp = parser(_INPUT_TIMESTAMP);\nlet month = timestamp.getMonth();\n\n// Do not modify\ndisplay(month);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"// Do not modify\nlet _INPUT_TIMESTAMP = \"07/22/2019\";\n\n// === TO-DO ===\n// Get the full year of this timestamp. This should return 2019.\nlet parser = d3.timeParse();\nlet timestamp = parser(_INPUT_TIMESTAMP);\nlet year = null;\n\n// Do not modify\ndisplay(year);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"// Do not modify\nlet _INPUT_TIMESTAMP = \"23-Aug-2020\";\n\n// === TO-DO ===\n// Get the day of the week (i.e. 0-6) of this timestamp. This should correspond to a Sunday and return 0.\nlet parser = d3.timeParse();\nlet timestamp = parser(_INPUT_TIMESTAMP);\nlet day = null;\n\n// Do not modify\ndisplay(day);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"// Do not modify\nlet _INPUT_TIMESTAMP = \"2021-11-10T14:37:05\";\n\n// === TO-DO ===\n// Get the hour of this timestamp. This should return 14.\nlet parser = d3.timeParse();\nlet timestamp = parser(_INPUT_TIMESTAMP);\nlet hour = null;\n\n// Do not modify\ndisplay(hour);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"// Do not modify\nlet _INPUT_TIMESTAMP = \"Fri, 12 Feb 2022 09:15:00\";\n\n// === TO-DO ===\n// Get the current day date (i.e. 1-31) of this timestamp. This should return 12.\nlet parser = d3.timeParse();\nlet timestamp = parser(_INPUT_TIMESTAMP);\nlet day = null;\n\n// Do not modify\ndisplay(day);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"---\n## Part 2: Implementing Time-Series Charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"Let's try to apply what we've learned in practical application: charting time-series data. The dataset we'll be using is the \"Daily Climate time series data\", which features climate data from Delhi from 2013 to 2017.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"const climate_data = FileAttachment(\"delhi-climate.csv\").csv({typed:true})\ndisplay(Inputs.table(climate_data))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"### Creating new columns from timestamps\n\nLet's say we want to plot this data in a scatter plot. Specifically, we want to plot meantemp across time within a year (i.e. the X-axis just represents Jan 1st to Dec. 31st). Further, let's color each point on the scatter plot by the year that point was recorded.\n\nTo make our lives easier, we need **two** new columns. Firstly, we need a year column that separates the year from the existing timestamps of each row. Secondly, we need a modified day_month column that is a copy of the existing date but with a constant year (e.g. all dates have the year 2020). Why we do this will become obvious later in the next part.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":306,"value":"

[TO-DO]

Using either Array.map or forEach(), create a new version of the climate data called climate_data_2 that features two new columns: a new year column extracted from the existing date column, and a new day_month column that keeps the day and month of the date but sets the year to some constant (e.g. 2020).

\n\n

[HINT]

To achieve the date_month column, you will need to create an entirely new Date() value. Pay attention to the Date() constructor and its examples to understand how to do this.

[TO-DO]

Produce a simple scatter plot where:

The chart is a 600px wide and 400px tall chart, with margins of 50px on all sides.
Each point represents a single row.
The X-axis represents date.
The Y-axis represents meantemp.
The color represents year.

\n\n

Bonus points if you can also create a legend to go alongside it, to visualize how color maps to the year. Bonus points too if you can figure out how to make the X-axis ticks labeled to show the month only.

[TO-DO]

Create two rollups of taxi_data: one that maps the total number of entries per PULocationID, and another that maps the total number of dropoffs per DOLocationID.

[TO-DO]

Using the Select input, create a 2-item dropdown named taxi_type that lets the user select between \"Pickup\" and \"DropOff\".