2b:null 2c:["$","title",null,{"children":"GEM - Weather Forecast Visualization | 🪦 dv develop 2025 spring | Observable"}] 31:T690, //sun { const squareSize = 30; const padding = 3; const numCols = 8; const numRows = 8; const sun1 = "lightblue"; const sun2 = "yellow"; // Color matrix const colors = [ [sun1, sun2, sun1, sun1, sun2, sun1, sun1, sun1], [sun1, sun1, sun2, sun1, sun2, sun1, sun1, sun2], [sun1, sun1, sun2, sun2, sun2, sun2, sun2, sun1], [sun2, sun2, sun2, sun2, sun2, sun2, sun1, sun1], [sun1, sun1, sun2, sun2, sun2, sun2, sun2, sun2], [sun1, sun2, sun1, sun1, sun2, sun1, sun1, sun1], [sun1, sun2, sun1, sun1, sun2, sun1, sun1, sun1], [sun1, sun2, sun1, sun1, sun2, sun1, sun1, sun1], ]; const svg = d3.create("svg") .attr("width", numCols * squareSize) .attr("height", numRows * squareSize); // Create row groups const g = svg.selectAll("g") .data(colors) // Each row in colors .join("g") .attr("transform", (d, i) => `translate(0, ${i * squareSize})`); // Create rectangles inside each row g.selectAll("rect") .data(d => d) // Each color in the row .join("rect") .attr("width", squareSize - padding) .attr("height", squareSize - padding) .attr("x", (d, i) => i * squareSize) .attr("fill", d => d) // Set color from matrix .attr("stroke", "black"); // // Add text to each rectangle // g.selectAll("text") // .data(d => d) // .join("text") // .attr("x", (d, i) => i * squareSize + (squareSize - padding) / 2) // .attr("y", (squareSize - padding) / 2 + 5) // .attr("text-anchor", "middle") // .attr("dy", ".35em") // .attr("fill", d => (d === "black" ? "white" : "black")) // Make text readable // .text(d => d); return svg.node(); } 32:T6d0, //moon { const squareSize = 30; const padding = 3; const numCols = 8; const numRows = 8; const moon1 = "indigo"; const moon2 = "yellow"; // Color matrix const colors = [ [moon1, moon1, moon2, moon1, moon1, moon1, moon1, moon1], [moon1, moon1, moon1, moon2, moon2, moon1, moon1, moon1], [moon1, moon1, moon1, moon1, moon2, moon2, moon1, moon1], [moon1, moon1, moon1, moon1, moon2, moon2, moon2, moon1], [moon1, moon1, moon1, moon1, moon2, moon2, moon2, moon1], [moon1, moon1, moon1, moon1, moon2, moon2, moon1, moon1], [moon1, moon1, moon1, moon2, moon2, moon1, moon1, moon1], [moon1, moon1, moon2, moon1, moon1, moon1, moon1, moon1], ]; const svg = d3.create("svg") .attr("width", numCols * squareSize) .attr("height", numRows * squareSize); // Create row groups const g = svg.selectAll("g") .data(colors) // Each row in colors .join("g") .attr("transform", (d, i) => `translate(0, ${i * squareSize})`); // Create rectangles inside each row g.selectAll("rect") .data(d => d) // Each color in the row .join("rect") .attr("width", squareSize - padding) .attr("height", squareSize - padding) .attr("x", (d, i) => i * squareSize) .attr("fill", d => d) // Set color from matrix .attr("stroke", "black"); // // Add text to each rectangle // g.selectAll("text") // .data(d => d) // .join("text") // .attr("x", (d, i) => i * squareSize + (squareSize - padding) / 2) // .attr("y", (squareSize - padding) / 2 + 5) // .attr("text-anchor", "middle") // .attr("dy", ".35em") // .attr("fill", d => (d === "black" ? "white" : "black")) // Make text readable // .text(d => d); return svg.node(); } 33:T5a0,//clouds { const squareSize = 30; const padding = 3; const numCols = 8; const numRows = 8; const cloud1 = "grey"; const cloud3 = "darkgrey"; const cloud2 = "lightblue"; // Color matrix const colors = [ [cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2], [cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2], [cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2], [cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2], [cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2], [cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2], [cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2], [cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2], ]; const svg = d3.create("svg") .attr("width", numCols * squareSize) .attr("height", numRows * squareSize); // Create row groups const g = svg.selectAll("g") .data(colors) // Each row in colors .join("g") .attr("transform", (d, i) => `translate(0, ${i * squareSize})`); // Create rectangles inside each row g.selectAll("rect") .data(d => d) // Each color in the row .join("rect") .attr("width", squareSize - padding) .attr("height", squareSize - padding) .attr("x", (d, i) => i * squareSize) .attr("fill", d => d) // Set color from matrix .attr("stroke", "black"); return svg.node(); } 34:T543,//snow { const squareSize = 30; const padding = 3; const numCols = 8; const numRows = 8; const snow1 = "white"; const snow2 = "lightblue"; // Color matrix const colors = [ [snow2, snow2, snow2, snow2, snow2, snow2, snow2, snow2], [snow2, snow2, snow1, snow2, snow2, snow2, snow1, snow2], [snow2, snow2, snow2, snow1, snow2, snow1, snow2, snow2], [snow2, snow1, snow2, snow2, snow1, snow2, snow2, snow1], [snow2, snow2, snow1, snow1, snow1, snow1, snow1, snow2], [snow2, snow1, snow2, snow2, snow1, snow2, snow2, snow1], [snow2, snow2, snow2, snow1, snow1, snow1, snow2, snow2], [snow2, snow2, snow1, snow2, snow2, snow2, snow1, snow2], ]; const svg = d3.create("svg") .attr("width", numCols * squareSize) .attr("height", numRows * squareSize); // Create row groups const g = svg.selectAll("g") .data(colors) // Each row in colors .join("g") .attr("transform", (d, i) => `translate(0, ${i * squareSize})`); // Create rectangles inside each row g.selectAll("rect") .data(d => d) // Each color in the row .join("rect") .attr("width", squareSize - padding) .attr("height", squareSize - padding) .attr("x", (d, i) => i * squareSize) .attr("fill", d => d) // Set color from matrix .attr("stroke", "black"); return svg.node(); } 35:T559,//rain { const squareSize = 30; const padding = 3; const numCols = 8; const numRows = 8; const rain1 = "white"; const rain2 = "darkblue"; const rain3 = "blue"; // Color matrix const colors = [ [rain1, rain1, rain1, rain1, rain2, rain1, rain1, rain1], [rain1, rain1, rain1, rain2, rain3, rain2, rain1, rain1], [rain1, rain1, rain2, rain3, rain3, rain3, rain2, rain1], [rain1, rain1, rain2, rain3, rain3, rain3, rain2, rain1], [rain1, rain1, rain2, rain3, rain3, rain3, rain2, rain1], [rain1, rain1, rain1, rain2, rain2, rain2, rain1, rain1], [rain1, rain1, rain1, rain1, rain1, rain1, rain1, rain1], [rain1, rain1, rain1, rain1, rain1, rain1, rain1, rain1], ]; const svg = d3.create("svg") .attr("width", numCols * squareSize) .attr("height", numRows * squareSize); // Create row groups const g = svg.selectAll("g") .data(colors) // Each row in colors .join("g") .attr("transform", (d, i) => `translate(0, ${i * squareSize})`); // Create rectangles inside each row g.selectAll("rect") .data(d => d) // Each color in the row .join("rect") .attr("width", squareSize - padding) .attr("height", squareSize - padding) .attr("x", (d, i) => i * squareSize) .attr("fill", d => d) // Set color from matrix .attr("stroke", "black"); return svg.node(); } 36:T66a,//thunder/lightning { const squareSize = 30; const padding = 3; const numCols = 8; const numRows = 8; const lightning = "yellow"; const cloud = "darkgrey"; const background = "black"; // Color matrix const colors = [ [background, background, background, cloud, cloud, background, background, background], [background, background, cloud, cloud, cloud, cloud, background, background], [background, cloud, cloud, cloud, cloud, cloud, cloud, background], [background, background, lightning, lightning, lightning, background, background, background], [background, background, background, lightning, lightning, lightning, background, background], [background, background, lightning, lightning, background, background, background, background], [background, background, background, lightning, lightning, background, background, background], [background, background, background, background, lightning, background, background, background], ]; const svg = d3.create("svg") .attr("width", numCols * squareSize) .attr("height", numRows * squareSize); // Create row groups const g = svg.selectAll("g") .data(colors) // Each row in colors .join("g") .attr("transform", (d, i) => `translate(0, ${i * squareSize})`); // Create rectangles inside each row g.selectAll("rect") .data(d => d) // Each color in the row .join("rect") .attr("width", squareSize - padding) .attr("height", squareSize - padding) .attr("x", (d, i) => i * squareSize) .attr("fill", d => d) // Set color from matrix .attr("stroke", "black"); return svg.node(); } 37:T54e,// code from @nachocab/placing-elements-on-a-grid { const squareSize = 30; const numCols = 8; const numRows = 8; const padding = 3; const colors = time_condition_color(); // Array of 8 colors based on weather conditions return d3 .select( DOM.svg( numCols * (squareSize + padding), numRows * (squareSize + padding) ) ) .call((svg) => svg .selectAll("g") .data(d3.range(numRows)) .join("g") .attr("transform", (j) => `translate(2,${j * squareSize})`) .selectAll("rect") .data((j) => d3.range(numCols).map((i) => ({ i, j, numRowsToColor: getNumRowsToColor(i) // Add the number of rows to color for each column })) ) .join("rect") .attr("transform", (d) => `translate(${d.i * squareSize},2)`) .attr("width", squareSize - padding) .attr("height", squareSize - padding) .attr("style", "stroke:black; fill: #ddd") .attr("style", (d) => { // Color only the specific rows that should be colored for each column if (d.j >= (numRows - d.numRowsToColor)) { return `stroke: black; fill: ${colors[d.i]}`; } return "stroke: black; fill: #ddd"; // Default color for uncolored cells }) ) .node(); }38:T7eb,// poop cloud { const squareSize = 30; const padding = 3; const numCols = 8; const numRows = 8; const b = [0, 0, 0]; const gr = [140, 140, 140]; // Color matrix const colors = [ ["lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue"], ["lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue"], ["lightblue", "lightblue", "lightblue", "grey", "grey", "lightblue", "lightblue", "lightblue"], ["lightblue", "lightblue", "grey", "grey", "grey", "grey", "lightblue", "lightblue"], ["lightblue", "grey", "grey", "grey", "grey", "grey", "grey", "lightblue"], ["lightblue", "grey", "grey", "grey", "grey", "grey", "grey", "lightblue"], ["lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue"], ["lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue"], ]; const svg = d3.create("svg") .attr("width", numCols * squareSize) .attr("height", numRows * squareSize); // Create row groups const g = svg.selectAll("g") .data(colors) // Each row in colors .join("g") .attr("transform", (d, i) => `translate(0, ${i * squareSize})`); // Create rectangles inside each row g.selectAll("rect") .data(d => d) // Each color in the row .join("rect") .attr("width", squareSize - padding) .attr("height", squareSize - padding) .attr("x", (d, i) => i * squareSize) .attr("fill", d => d) // Set color from matrix .attr("stroke", "black"); /* // Add text to each rectangle g.selectAll("text") .data(d => d) .join("text") .attr("x", (d, i) => i * squareSize + (squareSize - padding) / 2) .attr("y", (squareSize - padding) / 2 + 5) .attr("text-anchor", "middle") .attr("dy", ".35em") .attr("fill", d => (d === "black" ? "white" : "black")) // Make text readable .text(d => d); */ return svg.node(); }39:T7e4,// layered clouds { const squareSize = 30; const padding = 3; const numCols = 8; const numRows = 8; const b = [0, 0, 0]; const gr = [140, 140, 140]; // Color matrix const colors = [ ["lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue"], ["lightblue", "lightblue", "grey", "grey", "grey", "grey", "grey", "lightblue"], ["lightblue", "lightblue", "lightblue", "grey", "grey", "grey", "lightblue", "lightblue"], ["lightblue", "grey", "grey", "grey", "grey", "lightblue", "lightblue", "lightblue"], ["lightblue", "lightblue", "grey", "grey", "grey", "grey", "grey", "lightblue"], ["lightblue", "grey", "grey", "grey", "lightblue", "lightblue", "lightblue", "lightblue"], ["lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue"], ["lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue", "lightblue"], ]; const svg = d3.create("svg") .attr("width", numCols * squareSize) .attr("height", numRows * squareSize); // Create row groups const g = svg.selectAll("g") .data(colors) // Each row in colors .join("g") .attr("transform", (d, i) => `translate(0, ${i * squareSize})`); // Create rectangles inside each row g.selectAll("rect") .data(d => d) // Each color in the row .join("rect") .attr("width", squareSize - padding) .attr("height", squareSize - padding) .attr("x", (d, i) => i * squareSize) .attr("fill", d => d) // Set color from matrix .attr("stroke", "black"); /* // Add text to each rectangle g.selectAll("text") .data(d => d) .join("text") .attr("x", (d, i) => i * squareSize + (squareSize - padding) / 2) .attr("y", (squareSize - padding) / 2 + 5) .attr("text-anchor", "middle") .attr("dy", ".35em") .attr("fill", d => (d === "black" ? "white" : "black")) // Make text readable .text(d => d); */ return svg.node(); }3a:T88e,// fog, with animation fog = { const squareSize = 30; const padding = 3; const numCols = 8; const numRows = 8; const fog = "white"; const fog_bg = "blue"; // Color matrix const colors_1 = [ [fog, fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg], [fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg, fog], [fog, fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg], [fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg, fog], [fog, fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg], [fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg, fog], [fog, fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg], [fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg, fog], ]; const colors_2 = [ [fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg, fog], [fog, fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg], [fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg, fog], [fog, fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg], [fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg, fog], [fog, fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg], [fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg, fog], [fog, fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg], ]; const svg = d3.create("svg") .attr("width", numCols * squareSize) .attr("height", numRows * squareSize); // Create row groups const g = svg.selectAll("g") .data(colors_1) // Initial color data from colors_1 .join("g") .attr("transform", (d, i) => `translate(0, ${i * squareSize})`); // Create rectangles inside each row const rects = g.selectAll("rect") .data(d => d) // Each color in the row .join("rect") .attr("width", squareSize - padding) .attr("height", squareSize - padding) .attr("x", (d, i) => i * squareSize) .attr("fill", d => d) // Set color from matrix .attr("stroke", "black"); let toggle = false; setInterval(() => { toggle = !toggle; // Update data binding for each rect and apply transition rects.data((d, i, j) => toggle ? colors_2[i][j] : colors_1[i][j]) // Update colors row by row .transition().duration(200) .attr("fill", d=>d); // Set fill using updated color matrix }, 1000); return svg.node(); } 3b:T1568,function loadWeatherIcons(weather_condition) { const red = [255, 0, 0]; const orange = [255, 165, 0]; const yellow = [255, 255, 0]; const green = [0, 255, 0]; const blue = [0, 0, 255]; const darkblue = [0, 0, 139]; const lightblue = [173, 216, 230]; const purple = [160, 32, 240]; const black = [0,0,0]; const indigo = [75,0,130]; const grey = [120, 120, 120]; const darkgrey = [169,169,169] const white = [255,255,255] const sun1 = black; const sun2 = yellow; // Color matrix const sun = [ [sun1, sun2, sun1, sun1, sun2, sun1, sun1, sun1], [sun1, sun1, sun2, sun1, sun2, sun1, sun1, sun2], [sun1, sun1, sun2, sun2, sun2, sun2, sun2, sun1], [sun2, sun2, sun2, sun2, sun2, sun2, sun1, sun1], [sun1, sun1, sun2, sun2, sun2, sun2, sun2, sun2], [sun1, sun2, sun1, sun1, sun2, sun1, sun1, sun1], [sun1, sun2, sun1, sun1, sun2, sun1, sun1, sun1], [sun1, sun2, sun1, sun1, sun2, sun1, sun1, sun1],]; const moon1 = indigo; const moon2 = yellow; const moon = [ [moon1, moon1, moon2, moon1, moon1, moon1, moon1, moon1], [moon1, moon1, moon1, moon2, moon2, moon1, moon1, moon1], [moon1, moon1, moon1, moon1, moon2, moon2, moon1, moon1], [moon1, moon1, moon1, moon1, moon2, moon2, moon2, moon1], [moon1, moon1, moon1, moon1, moon2, moon2, moon2, moon1], [moon1, moon1, moon1, moon1, moon2, moon2, moon1, moon1], [moon1, moon1, moon1, moon2, moon2, moon1, moon1, moon1], [moon1, moon1, moon2, moon1, moon1, moon1, moon1, moon1], ]; const snow1 = white; const snow2 = blue; const snow = [ [snow2, snow2, snow2, snow2, snow2, snow2, snow2, snow2], [snow2, snow2, snow1, snow2, snow2, snow2, snow1, snow2], [snow2, snow2, snow2, snow1, snow2, snow1, snow2, snow2], [snow2, snow1, snow2, snow2, snow1, snow2, snow2, snow1], [snow2, snow2, snow1, snow1, snow1, snow1, snow1, snow2], [snow2, snow1, snow2, snow2, snow1, snow2, snow2, snow1], [snow2, snow2, snow2, snow1, snow1, snow1, snow2, snow2], [snow2, snow2, snow1, snow2, snow2, snow2, snow1, snow2], ]; const rain1 = white; const rain2 = darkblue; const rain3 = blue; const rain = [ [rain1, rain1, rain1, rain1, rain2, rain1, rain1, rain1], [rain1, rain1, rain1, rain2, rain3, rain2, rain1, rain1], [rain1, rain1, rain2, rain3, rain3, rain3, rain2, rain1], [rain1, rain1, rain2, rain3, rain3, rain3, rain2, rain1], [rain1, rain1, rain2, rain3, rain3, rain3, rain2, rain1], [rain1, rain1, rain1, rain2, rain2, rain2, rain1, rain1], [rain1, rain1, rain1, rain1, rain1, rain1, rain1, rain1], [rain1, rain1, rain1, rain1, rain1, rain1, rain1, rain1], ]; const lightning = yellow; const cloud = darkgrey; const background = black; const thunder = [ [background, background, background, cloud, cloud, background, background, background], [background, background, cloud, cloud, cloud, cloud, background, background], [background, cloud, cloud, cloud, cloud, cloud, cloud, background], [background, background, lightning, lightning, lightning, background, background, background], [background, background, background, lightning, lightning, lightning, background, background], [background, background, lightning, lightning, background, background, background, background], [background, background, background, lightning, lightning, background, background, background], [background, background, background, background, lightning, background, background, background], ]; const cloud1 = grey; const cloud2 = lightblue; // Color matrix const colors = [ [cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2], [cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2], [cloud2, cloud2, cloud2, cloud1, cloud1, cloud2, cloud2, cloud2], [cloud2, cloud2, cloud1, cloud1, cloud1, cloud1, cloud2, cloud2], [cloud2, cloud1, cloud1, cloud1, cloud1, cloud1, cloud1, cloud2], [cloud2, cloud1, cloud1, cloud1, cloud1, cloud1, cloud1, cloud2], [cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2], [cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2, cloud2], ]; const fog = white; const fog_bg = blue; const foggy = [ [fog, fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg], [fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg, fog], [fog, fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg], [fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg, fog], [fog, fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg], [fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg, fog], [fog, fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg], [fog_bg, fog, fog_bg, fog, fog_bg, fog, fog_bg, fog], ] if (weather_condition === "sun") return sun; else if (weather_condition === "moon") return moon; else if (weather_condition === "snow") return snow; // const icons = {sun, moon, snow, rain, thunder, colors, foggy }; // Add more if needed // const data = fs.readFileSync("symbols(symbols_hex).csv", "utf8"); // const lines = data.split("\n"); // const weatherSymbols = {}; // for (const line of lines) { // const [condition, r, g, b, symbol, night] = line.split(","); // weatherSymbols[condition] = symbol; // } // return weatherSymbols; }3c:[{"id":"10b74f7ae81e0dfc7e46bf6cda6eaa4bd01908deec16a24b0f5d751262098e9ce756d2bfc7a13ee5c35df228a934344ff5dfcf3bf4d479a5336e6c2ed8d94e3c","href":"https://static.observableusercontent.com/files/10b74f7ae81e0dfc7e46bf6cda6eaa4bd01908deec16a24b0f5d751262098e9ce756d2bfc7a13ee5c35df228a934344ff5dfcf3bf4d479a5336e6c2ed8d94e3c","name":"symbols@1.csv","type":"text/csv","lastModified":1742470840137.392,"size":2795}] 2f:{"id":"f817b00e5ae85dd5","slug":"gem-weather-forecast","title":"GEM - Weather Forecast Visualization","thumbnail":"1e706265caabcf3f2b001382c8c0bdfb221375d829c9d5ffba6e3627b3f860a2","access_level":"public","create_time":"$D2025-02-25T13:26:56.767Z","update_time":"$D2025-10-01T08:49:35.280Z","view_time":null,"first_public_time":"$D2025-10-01T08:47:57.088Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"caa1f4ddba1048c5","login":"dv-develop-2025s","name":"🪦 dv develop 2025 spring","avatar_url":"https://avatars-next.observableusercontent.com/4e75b7ea2e28b63057c20457d28474e4c0622d1b506ebef5d878e38c0c606a40","tier":"pro_2024"},"version":893,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ec64fb3abdc1053a","login":"grace-chen","name":"Grace Chen","avatar_url":"https://avatars-next.observableusercontent.com/b6f469b045c91ba4f01137bd3b1bef884e09eb592f6ebe13febb8a319c830798","tier":null}],"members":[{"type":"team","id":"caa1f4ddba1048c5","login":"dv-develop-2025s","name":"🪦 dv develop 2025 spring","avatar_url":"https://avatars-next.observableusercontent.com/4e75b7ea2e28b63057c20457d28474e4c0622d1b506ebef5d878e38c0c606a40","tier":"pro_2024","role":"editor"},{"type":"individual","id":"ec64fb3abdc1053a","login":"grace-chen","name":"Grace Chen","avatar_url":"https://avatars-next.observableusercontent.com/b6f469b045c91ba4f01137bd3b1bef884e09eb592f6ebe13febb8a319c830798","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"8a46e7f27efc3ea9","slug":"group-projects","title":"GROUP PROJECTS","owner":{"id":"caa1f4ddba1048c5","login":"dv-develop-2025s","name":"🪦 dv develop 2025 spring"}},"type":"notebook","body":{"title":"GEM - Weather Forecast Visualization","cells":[{"id":0,"value":"# GEM - Weather Forecast Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":" schema = \"https://api.met.no/weatherapi/locationforecast/2.0/swagger\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"// Locationforecast API to Stockholm, Sweden - https://api.met.no/weatherapi/locationforecast/2.0/documentation -> can switch between comlete and compact \njsonURL = \"https://api.met.no/weatherapi/locationforecast/2.0/complete?lat=59.33&lon=18.07&altitude=28\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"// schema load\ninfo = fetch(schema)\n .then(response => {\n if (!response.ok) throw new Error(response.status);\n return response.json();\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"// data load\ndata = fetch(jsonURL)\n .then(response => {\n if (!response.ok) throw new Error(response.status);\n return response.json();\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"data1 = data.properties.timeseries","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"data1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":587,"value":"symbols = FileAttachment(\"symbols@1.csv\").csv({ typed: true })\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"symbols","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":622,"value":"symbolarray = {\n let color = [];\n let condition = [];\n let array = [];\n for (let i = 0; i < symbols.length; i++) {\n condition[i] = symbols[i].condition;\n color[i] = symbols[i].color;\n }\n array[0] = condition;\n array[1] = color;\n return array;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"nice_data = {\n let nice_data = [];\n for (let i = 0; i < 51; i++) {\n const time_of_day = {\n date: data1[i].time.slice(0, 10),\n time: data1[i].time.slice(11, 19),\n air_pressure: data1[i].data.instant.details.air_pressure_at_sea_level,\n air_temp: data1[i].data.instant.details.air_temperature,\n wind_speed: data1[i].data.instant.details.wind_speed,\n cloud_area_fraction: data1[i].data.instant.details.cloud_area_fraction,\n humidity: data1[i].data.instant.details.relative_humidity,\n precipitation: data1[i].data.next_1_hours.details.precipitation_amount,\n realfeel: realfeel(\n data1[i].data.instant.details.air_temperature,\n data1[i].data.instant.details.relative_humidity,\n data1[i].data.instant.details.wind_speed\n ),\n weather_condition: data1[i].data.next_1_hours.summary.symbol_code\n };\n nice_data[i] = time_of_day;\n }\n return nice_data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"data3 = nice_data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"data3","database":"$undefined"},{"id":185,"value":"Plot.plot({\n title: \"Visualization of Feels-Like Temperatures\",\n color: { legend: true },\n grid: true,\n marks: [\n Plot.dot(data3, {\n x: \"air_temp\",\n y: \"wind_speed\",\n stroke: \"realfeel\",\n tip: true\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"Plot.plot({\n title: \"Real Temperature vs. Feels-Like Temperature Plot\",\n marginBottom: 60,\n color: {\n domain: [\"Real Temperature\", \"Feels Like\"], // Labels for the legend\n range: [\"black\", \"red\"], // Corresponding colors\n legend: true // Show the legend\n },\n grid: true,\n marks: [\n Plot.ruleY([0]),\n Plot.dot(nice_data, {\n x: (d) => new Date(d.date + \"T\" + d.time),\n y: \"air_temp\",\n color: \"Real Temperature\"\n }),\n Plot.dot(nice_data, {\n x: (d) => new Date(d.date + \"T\" + d.time),\n y: \"realfeel\",\n color: \"Feels Like\",\n stroke: \"red\"\n })\n ],\n x: { label: \"Time\", tickRotate: -90 }, // X-axis label\n y: { label: \"Temperature (°C)\" }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"Plot.plot({\n title: \"Cloud Coverage and Weather Condition\",\n marginBottom: 60,\n color: {\n domain: symbolarray[0], // List all possible weather conditions\n range: symbolarray[1], // Assign corresponding colors\n legend: false // Show legend\n },\n grid: true,\n marks: [\n //Plot.axisX([\"2025-02-26T12:00Z\", \"2025-02-27T12:00Z\", \"2025-02-28T12:00Z\" ]),\n Plot.ruleY([0]),\n Plot.dot(nice_data, {\n x: (d) => new Date(d.date + \"T\" + d.time),\n y: \"cloud_area_fraction\",\n stroke: \"weather_condition\", // Color-code based on weather condition\n fill: \"weather_condition\",\n r: 5\n })\n ],\n x: { label: \"Time\", tickRotate: -90 }, // X-axis label\n y: { label: \"Cloud area fraction\" }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"//Determines which realfeel to use and calculates it\nfunction realfeel(temperatureCelsius, humidity, wind) {\n let realfeel = 0;\n realfeel = windchill(temperatureCelsius, wind);\n return realfeel;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"//calculates temp in Celsius with windchill\nfunction windchill(T, W) {\n return 13.12 + 0.6215*T - 11.37*W**(0.16)+ 0.3965*T*W**(0.16);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"//calculates temp in celsius with heat index\nfunction heatindex(temperatureCelsius, humidity) {\n // Constants for the Heat Index formula in Celsius\n const c1 = -8.78469475556;\n const c2 = 1.61139411;\n const c3 = 2.33854883889;\n const c4 = -0.14611605;\n const c5 = -0.012308094;\n const c6 = -0.0164248277778;\n const c7 = 0.002211732;\n const c8 = 0.00072546;\n const c9 = -0.000003582;\n \n // Applying the formula\n const realfeel = c1 + (c2 * temperatureCelsius) + (c3 * humidity) \n + (c4 * temperatureCelsius * humidity) \n + (c5 * Math.pow(temperatureCelsius, 2)) \n + (c6 * Math.pow(humidity, 2)) \n + (c7 * Math.pow(temperatureCelsius, 2) * humidity) \n + (c8 * temperatureCelsius * Math.pow(humidity, 2)) \n + (c9 * Math.pow(temperatureCelsius, 2) * Math.pow(humidity, 2));\n return realfeel;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"Plot.plot({\n title: \"Feels-Like Temperature for the Next 8 Hours\",\n marginBottom: 60,\n color: {\n domain: \n symbolarray[0], // List all possible weather conditions\n range: symbolarray[1], // Assign corresponding colors\n legend: false // Show legend\n },\n marks: [\n Plot.rectY(nice_data.slice(2, 10), {\n x: (d) => new Date(d.date + \"T\" + d.time),\n y: \"realfeel\",\n interval: d3.utcHour,\n color: \"weather_condition\",\n fill: \"weather_condition\"\n }),\n Plot.ruleY([0])\n ],\n x: { label: \"Time\", tickRotate: -90 }, // X-axis label\n y: { label: \"Temperature (Celcius)\" }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"Plot.plot({\n title: \"Feels-Like Temperature for the Next 8 Hours\",\n marginBottom: 40,\n color: {\n domain: symbolarray[0], // List all possible weather conditions\n range: symbolarray[1], // Assign corresponding colors\n legend: false // Show legend\n },\n x: {\n label: \"Time\"\n },\n y: {\n label: \"Temperature (Celsius)\",\n grid: true\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(nice_data.slice(0, 8), {\n x: (d) => new Date(d.date + \"T\" + d.time),\n y: \"realfeel\"\n }),\n Plot.dot(nice_data.slice(0, 8), {\n x: (d) => new Date(d.date + \"T\" + d.time),\n y: \"realfeel\",\n color: \"weather_condition\",\n fill: \"weather_condition\",\n r: 5\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"// code from @nachocab/placing-elements-on-a-grid\n{\n const squareSize = 30;\n const numCols = 8;\n const numRows = 8;\n const padding = 3;\n const colors = time_condition_color(); // Array of 8 colors based on weather conditions\n\n return d3\n .select(DOM.svg(numCols * (squareSize + padding), numRows * (squareSize + padding)))\n .call((svg) =>\n svg\n .selectAll(\"g\")\n .data(d3.range(numRows))\n .join(\"g\")\n .attr(\"transform\", (j) => `translate(2,${j * squareSize})`)\n .selectAll(\"rect\")\n .data((j) => d3.range(numCols).map((i) => ({ i, j }))) \n .join(\"rect\")\n .attr(\"transform\", (d) => `translate(${d.i * squareSize},2)`)\n .attr(\"width\", squareSize - padding)\n .attr(\"height\", squareSize - padding)\n .attr(\"style\", \"stroke:black; fill: #ddd\")\n .attr(\"style\", (d) => `stroke: black; fill: ${colors[d.i]}`)\n )\n .node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"time_condition_color()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"function getNumRowsToColor(i) {\n if (2 <= nice_data[i].realfeel && nice_data[i].realfeel < 4) {\n return 1;\n } else if (4 <= nice_data[i].realfeel && nice_data[i].realfeel < 6) {\n return 2;\n } else if (6 <= nice_data[i].realfeel && nice_data[i].realfeel <= 8) {\n return 3;\n } else if (8 <= nice_data[i].realfeel && nice_data[i].realfeel <= 10) {\n return 4;\n } else if (10 <= nice_data[i].realfeel && nice_data[i].realfeel <= 12) {\n return 5;\n } else if (12 <= nice_data[i].realfeel && nice_data[i].realfeel <= 14) {\n return 6;\n } else if (14 <= nice_data[i].realfeel && nice_data[i].realfeel <= 16) {\n return 7;\n } else if (16 <= nice_data[i].realfeel && nice_data[i].realfeel <= 18) {\n return 8;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"function condition_color(weather_condition) {\n const colorMap = {\n \"cloudy\": \"dimgrey\",\n \"fog\": \"gainsboro\",\n \"partlycloudy_day\": \"lightsteelblue\",\n \"clearsky_day\": \"yellow\",\n \"clearsky_night\": \"darkblue\",\n \"lightsnow\": \"lightblue\",\n \"snow\": \"white\",\n \"partlycloudy_night\": \"indigo\"\n };\n\n return colorMap[weather_condition] || \"black\"; // Default to black if condition is unknown or condition is not assigned a color\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"function time_condition_color() {\n return nice_data.slice(0, 8).map(row => condition_color(row.weather_condition));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"function callWeatherIcon(weather_condition){\n \n const squareSize = 30;\n const padding = 3;\n\n const numCols = 8;\n const numRows = 8;\n const iconData= loadWeatherIcons(weather_condition);\n\n const svg = d3.create(\"svg\")\n .attr(\"width\", numCols * squareSize)\n .attr(\"height\", numRows * squareSize);\n\n // Create row groups\n const g = svg.selectAll(\"g\")\n .data(iconData) // Each row in colors\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0, ${i * squareSize})`);\n\n // Create rectangles inside each row\n g.selectAll(\"rect\")\n .data(d => d) // Each color in the row\n .join(\"rect\")\n .attr(\"width\", squareSize - padding)\n .attr(\"height\", squareSize - padding)\n .attr(\"x\", (d, i) => i * squareSize)\n .attr(\"fill\", d => `rgb(${d[0]}, ${d[1]}, ${d[2]})`)//color from the matrix\n //.attr(\"stroke\", \"black\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"loadWeatherIcons(\"sun\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"callWeatherIcon(\"sun\");\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":847,"value":"function weather_condition_to_icon(condition) {\n const weatherSymbols = loadWeatherSymbols();\n const symbol = weatherSymbols[condition];\n /*\n if (symbol && icons[symbol]) {\n sense.setPixels(icons[symbol]);\n } else {\n console.error(\"Unknown weather condition: \" + condition);\n }\n */\n \n}\n\n//sense.setPixels(symbol);\n\nmodule.exports = {loadWeatherSymbols,weather_condition_to_icon};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 30:"$2f:body"