44:["$","title",null,{"children":"In Class Example | Zach Pino | Observable"}] 4c:T8a4,{ const size = 22; const left = 40; // room for month labels const top = 30; // room for the title const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const monthLengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // biggest count, for the color scale let max = 0; for (let i = 0; i < cleanData.length; i++) { if (cleanData[i].count > max) { max = cleanData[i].count; } } const color = d3.scaleSequential(d3.interpolateBlues).domain([0, max]); const svg = d3.create("svg") .attr("width", left + 7 * size) .attr("height", top + 53 * size) .style("font-family", "sans-serif"); // title svg.append("text") .attr("x", 0) .attr("y", 16) .attr("font-weight", "bold") .text("UFO sightings by date"); // month labels: one beside the row where each month starts let start = 0; for (let m = 0; m < 12; m++) { svg.append("text") .attr("x", left - 6) .attr("y", top + Math.floor(start / 7) * size + size / 2) .attr("text-anchor", "end") .attr("dominant-baseline", "middle") .attr("font-size", 11) .text(monthNames[m]); start = start + monthLengths[m]; } // cells, each with its date written inside for (let i = 0; i < cleanData.length; i++) { const x = left + (cleanData[i].dayOfYear % 7) * size; const y = top + Math.floor(cleanData[i].dayOfYear / 7) * size; svg.append("rect") .attr("x", x) .attr("y", y) .attr("width", size - 1) .attr("height", size - 1) .attr("fill", color(cleanData[i].count)) .append("title") .text(monthNames[cleanData[i].month - 1] + " " + cleanData[i].date + ": " + cleanData[i].count + " sightings"); svg.append("text") .attr("x", x + (size - 1) / 2) .attr("y", y + (size - 1) / 2) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("font-size", 9) .attr("font-weight", cleanData[i].date == 1 ? "bold" : "normal") .attr("fill", cleanData[i].count > max / 2 ? "white" : "#333") .attr("pointer-events", "none") .text(cleanData[i].date); } display(svg.node()); }4d:T7e0,{ const size = 22; const left = 40; const top = 30; const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const monthStarts = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334]; // dayOfYear of each month's 1st const max = d3.max(cleanData, d => d.count); const color = d3.scaleSequential(d3.interpolateBlues).domain([0, max]); const svg = d3.create("svg") .attr("width", left + 7 * size) .attr("height", top + 53 * size) .style("font-family", "sans-serif"); // title svg.append("text") .attr("y", 16) .attr("font-weight", "bold") .text("UFO sightings by date"); // month labels: one per month name svg.selectAll(".month") .data(monthNames) .enter() .append("text") .attr("class", "month") .attr("x", left - 6) .attr("y", (d, i) => top + Math.floor(monthStarts[i] / 7) * size + size / 2) .attr("text-anchor", "end") .attr("dominant-baseline", "middle") .attr("font-size", 11) .text(d => d); // one group per date, moved into its cell const cells = svg.selectAll(".day") .data(cleanData) .enter() .append("g") .attr("class", "day") .attr("transform", d => `translate(${left + (d.dayOfYear % 7) * size}, ${top + Math.floor(d.dayOfYear / 7) * size})`); // the colored square cells.append("rect") .attr("width", size - 1) .attr("height", size - 1) .attr("fill", d => color(d.count)); // the hover tooltip cells.append("title") .text(d => monthNames[d.month - 1] + " " + d.date + ": " + d.count + " sightings"); // the date number cells.append("text") .attr("x", (size - 1) / 2) .attr("y", (size - 1) / 2) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("font-size", 9) .attr("font-weight", d => d.date == 1 ? "bold" : "normal") .attr("fill", d => d.count > max / 2 ? "white" : "#333") .text(d => d.date); display(svg.node()); }4e:[{"id":"9c938f13b6aa2d6b9dd3a81380d1c0417c53eb382d29f91007ce32e565378fb965b98ec0a1960d28c4671cc1fdd389d61e9203f444b2720b6310d0edd4ca190d","href":"https://static.observableusercontent.com/files/9c938f13b6aa2d6b9dd3a81380d1c0417c53eb382d29f91007ce32e565378fb965b98ec0a1960d28c4671cc1fdd389d61e9203f444b2720b6310d0edd4ca190d","name":"ufo_sightings.csv","type":"text/csv","lastModified":1792789179000,"size":11591564}] 48:{"id":"022e1437593d9969","slug":"in-class-ufo-example","title":"In Class Example","thumbnail":"21e2dfd3f3107641d1317670c8bd12b946c6f253e8b25678549b3f1a6aabe7f0","access_level":"public","create_time":"$D2026-10-23T20:58:26.970Z","update_time":"$D2026-10-30T16:43:00.944Z","view_time":null,"first_public_time":"$D2026-10-30T16:35:44.272Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":385,"publish_version":385,"role":null,"authored":false,"authors":[{"type":"individual","id":"90c59c5f3ef39e0a","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"In Class Example","cells":[{"id":1,"value":"# In Class Example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"---\n ## Import Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"const rawData = await FileAttachment(\"ufo_sightings.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"display(rawData)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"Inputs.table(rawData)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"---\n## Examples of Possible Data Formats","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"#### Excel Version - Array of Objects","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"[\n {month:1, day:1, count:0}, //January 1\n {month:1, day:2, count:0} //January 2\n //...\n]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"#### Positional Version - Array of Arrays","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"As months...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"[\n [10,123,44,12,5,12,1,24], //Pretend there are 31 values representing January as an array, each value is a day\n [10,123,44,12,5,12,1,1,5] //Pretend there are 29 values February as an array, each value is a day\n//10 more months\n]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"Or as weeks...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"[\n [7,4,4,6,2,6,7], //January 1-7\n [7,123,44,12,5] //January 8-14\n //50 more weeks\n]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"Or multidimensional...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"[\n [//January\n [7,4,4,6,2,6,7], //Week 1 of Jan\n [7,123,44,12,5] //Week 2 of Jan\n //~2 more weeks\n ],\n [//February\n [7,4,4,6,2,6,7], //Week 1 of Feb\n [7,123,44,12,5] //Week 2 of Feb\n //2 more weeks\n ]\n]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"#### Array of Keyed Objects","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"[{date:\"01-01\", count:0},{date:\"01-02\", count:0}]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"#### Single Object with Date Keys (Zach's \"Short Cut\")","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"{\"date-01-01\":12, \"date-01-02\":30}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"---\n## Processing the Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"#### Using `for` loops","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":" let counts = [];\n\n for (let i = 0; i < rawData.length; i++) {\n let month = rawData[i][\"Dates.Sighted.Month\"];\n let date = rawData[i][\"Date.Sighted.Day\"];\n\n let found = false;\n for (let j = 0; j < counts.length; j++) {\n if (counts[j].month == month && counts[j].date == date) {\n counts[j].count = counts[j].count + 1;\n found = true;\n }\n }\n\n if (found == false) {\n counts.push({ month: month, date: date, count: 1 });\n }\n }\n\ndisplay(counts)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"#### Using an Object Aggregator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"const dates = {};\nfor (let i = 0; i < rawData.length; i++) {\n const date = rawData[i][\"Dates.Sighted.Month\"] + \"/\" + rawData[i][\"Date.Sighted.Day\"];\n if (dates[date]) {\n dates[date] = dates[date] + 1;\n } else {\n dates[date] = 1;\n }\n}\n\nconst explodedDates = Object.entries(dates);\n\nconst cleanDates = [];\nfor (let i = 0; i < explodedDates.length; i++) {\n const parts = explodedDates[i][0].split(\"/\");\n cleanDates.push({\n month: parseInt(parts[0]),\n date: parseInt(parts[1]),\n count: explodedDates[i][1]\n });\n}\ndisplay(cleanDates); // [ {month: 5, date: 24, count: 12}, ... ]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"---\n## Cleanup\nWe need to sort our arrays, and throw-out a weird day...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"const monthLengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n\nconst cleanData = [];\nfor (let i = 0; i < counts.length; i++) {\n let month = counts[i].month;\n let date = counts[i].date;\n\n if (month == 2 && date == 29) continue; // throw out Feb 29\n\n let dayOfYear = date - 1; // days so far in this month\n for (let m = 0; m < month - 1; m++) { // plus all earlier months\n dayOfYear = dayOfYear + monthLengths[m];\n }\n\n cleanData.push({ month: month, date: date, count: counts[i].count, dayOfYear: dayOfYear });\n}\n\ncleanData.sort((a, b) => a.dayOfYear - b.dayOfYear);\n\ndisplay(cleanData)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"---\n## Heatmap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"{\nconst size = 14;\nconst color = d3.scaleSequential(d3.interpolateBlues).domain([0, d3.max(counts, d => d.count)]);\n\nconst svgLoop = d3.create(\"svg\").attr(\"width\", 7 * size).attr(\"height\", 53 * size);\n\nfor (let i = 0; i < cleanData.length; i++) {\n svgLoop.append(\"rect\")\n .attr(\"x\", (cleanData[i].dayOfYear % 7) * size)\n .attr(\"y\", Math.floor(cleanData[i].dayOfYear / 7) * size)\n .attr(\"width\", size - 1)\n .attr(\"height\", size - 1)\n .attr(\"fill\", color(cleanData[i].count));\n}\n\ndisplay(svgLoop.node());\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"{\n const size = 14;\n const color = d3.scaleSequential(d3.interpolateBlues).domain([0, d3.max(counts, d => d.count)]);\n\n const svgD3 = d3.create(\"svg\").attr(\"width\", 7 * size).attr(\"height\", 53 * size);\n\n svgD3.selectAll(\"rect\")\n .data(cleanData)\n .join(\"rect\")\n .attr(\"x\", d => (d.dayOfYear % 7) * size)\n .attr(\"y\", d => Math.floor(d.dayOfYear / 7) * size)\n .attr(\"width\", size - 1)\n .attr(\"height\", size - 1)\n .attr(\"fill\", d => color(d.count));\n\n display(svgD3.node());\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"---\n## Nicer Version","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$4c","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$4d","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"2"}} 24:null