2d:null 2e:["$","title",null,{"children":"Bright Sky (Better Weather App) | Abe Yang | Observable"}] 33:T544,md ` --- #### About this Project There are only a few things I care about in a weather app, in order of importance: 1. What's the weather like **right now**, and in the **next few days**? (I live in Seattle.) 2. What's the temperature like in the next few days, **relative to one another**? 3. Will there be **frost on my windshield** in the morning? (I hate scraping.) 4. On the rare occasion, I'd like to know the **UV rating or how windy** it is (based on *gust*), and when will either improve. Moreover, it must be stated in layman terms (for example, I don't know the diff b/n 5mph winds and 15mph winds). That's what I'm trying to do with this weather app. Additional things to note: - Chance of rain is shown only when it's above 25%. - Black marks underneath temperature are the dew points; it's only shown when it's less than 32 degrees, and when temperature is less than 35. - The closer the dew point is to the temperature (the darker the lines will be) the more likely there will be **frost on the windshield** in the morning. - (This is overly simplified, but it's my first stab at predicting frost.) #### Credits - Powered by [Dark Sky](https://darksky.net) - [Weather Icons](https://github.com/erikflowers/weather-icons) for... well, you know - This is an ongoing [DuckDuckGo](https://duckduckgo.com) Hack Days Project `34:T5801,// index = daily index function drawWeather(index) { var height = padding.height; var temp = { // to be set later: max: '', min: '' }; const mask = { id: "mask" + index, expandid: "maskexpand" + index, cornerradius: 5, x: padding.l, y: padding.t, width: width - padding.l - padding.r, height: height - padding.t - padding.b } const weather_midpt = (height - padding.t - padding.b)/2 + padding.t; const weather_midpt_text = weather_midpt + 1; var xScale, xTempScale, xAxis, xTempAxis, yScale, yPrecipScale, yWindScale, frostScale; var rightnow = new Date(); // not dynamic // This day's data. Get it? const dayta = data.daily.data[index]; const starttime = dayta.time; const endtime = dayta.time + 86400; // 86400 = 24 hours in seconds const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .on("mousemove", revealMoreInfo) .on("mouseleave", hideMoreInfo); // Create clipping mask // // // // // // svg.append("defs") // default mask .append("clipPath").attr("id", mask.id) .append("rect") .attr("x", mask.x) .attr("y", mask.y) .attr("width", mask.width) .attr("height", mask.height) .attr("rx", mask.cornerradius) .attr("ry", mask.cornerradius) // expanded mask .append("clipPath").attr("id", mask.expandid) .append("rect") .attr("x", mask.x) .attr("y", 0) .attr("width", mask.width) .attr("height", padding.expandheight); // Create scale functions // -- Weather conditions xScale = d3.scaleTime() .domain([ new Date(starttime * 1000), new Date(endtime * 1000) ]) .range([padding.l, width - padding.r]); yScale = d3.scaleLinear() .domain([d3.min(data.hourly.data, d => d.temperature) - padding.buffer, d3.max(data.hourly.data, d => d.temperature) + padding.buffer]) .range([height-padding.b, padding.t]); // -- Temperature xTempScale = d3.scaleLinear() .domain([d3.min(data.hourly.data, d => d.temperature) - padding.buffer, d3.max(data.hourly.data, d => d.temperature) + padding.buffer]) .range([width - padding.r + padding.default, width]); yPrecipScale = d3.scaleLinear() .domain([0, 1]) .range([height-padding.b+10, padding.t]); // Define axes xAxis = d3.axisBottom() .scale(xScale) .ticks(12) .tickFormat(formatDate); xTempAxis = d3.axisBottom() .scale(xTempScale) .ticks(3); // Create axes svg.append("g") .attr("class", "axis") .attr("transform", "translate(0," + (height - padding.b) + ")") .call(xAxis); // Define line generators // curve explorer: http://bl.ocks.org/d3indepth/b6d4845973089bc1012dec1674d3aff8 var line = d3.line() .x(d => xScale(d.time * 1000)) .y(d => yScale(d.temperature)) .curve(d3.curveCardinal.tension(0)); var linePrecip = d3.line() .x(d => xScale(d.time * 1000)) .y(d => yPrecipScale(d.precipProbability)) .curve(d3.curveCardinal.tension(0.5)); // Grab relevant (hourly) data const hourly = data.hourly.data.filter(d => { if (d.time >= starttime && d.time <= endtime) return d; }); // Create shapes & add info // -- This day's date and weather const currentdate = new Date(starttime * 1000); const dateicon = svg.append("g") .attr("transform", "translate(0," + weather_midpt_text + ")"); dateicon.append("text") .text((!index) ? "Today" : currentdate.toLocaleString(undefined, {weekday: "short", timeZone: data.timezone})) .attr("class", "date weekday") .attr("alignment-baseline", "middle") .attr("x", 30); dateicon.append("text") .text(currentdate.toLocaleString(undefined, { "month": "numeric", "day": "numeric", timeZone: data.timezone })) .attr("class", "date monthdate") .attr("alignment-baseline", "middle") .attr("x", 30) .attr("opacity", 0) // ---- icon dateicon.append("foreignObject") .attr("class", "icon") .attr("width", 24) .attr("height", 24) .attr("y", -13) .append("xhtml:body") .html('') // -- Temperature svg.append("path") .datum(hourly) .attr("class", "temperature") .attr("stroke", color.lightorange) .attr("stroke-width", 1) .attr("fill", "none") .attr("d", d => line(d)); // -- Dew Point (only below 32 degrees and temp is under 35) frostScale = d3.scaleLinear() // maps opacity: difference between temp and dewpoint (smaller = brighter) .domain([1.5, 7]) .range([1, frost.opacityLow]); yPrecipScale = d3.scaleLinear() .domain([0, 1]) .range([height-padding.b+10, padding.t]); svg.selectAll("line.dew") .data(hourly) .enter() .append("line") .filter(d => d.dewPoint <= frost.dewHigh && d.temperature <= frost.tempHigh) .attr("class", "dew") .attr("x1", d => xScale(d.time*1000)) .attr("x2", d => xScale(d.time*1000)) .attr("y1", d => yScale(d.temperature)) .attr("y2", d => yScale(d.dewPoint)) .attr("opacity", d => frostScale(d.temperature - d.dewPoint)) // [circle] // .attr("cx", d => xScale(d.time*1000)) // .attr("cy", d => yScale(d.dewPoint)) // .attr("r", 2) .attr("stroke-width", 1) .attr("stroke", color.black) // .attr("clip-path", "url(#" + mask.id + ")"); // -- High & low temp // CANNOT use dayta.temperatureLow / dayta.temperatureHigh b/c it's not nec'ly matched to this day // (can be 6am on the following day, for example) temp.min = d3.min(hourly, d => d.temperature); temp.max = d3.max(hourly, d => d.temperature); var hilotemp = svg.append("g") .attr("class", "temperature") .attr("opacity", (mode == "Simple") ? 1 : 0); hilotemp.append("line") .attr("class", "temperature") .attr("x1", xTempScale(temp.min)) .attr("x2", xTempScale(temp.max)) .attr("y1", weather_midpt) .attr("y2", weather_midpt) .attr("stroke-width", padding.templinewidth) .attr("stroke-linecap", "round") .attr("stroke", color.black); hilotemp.append("text") .text(Math.round(temp.min)) .attr("class", "temperature") .attr("text-anchor", "end") .attr("alignment-baseline", "middle") .attr("x", xTempScale(temp.min) - padding.temptextoffset) .attr("y", weather_midpt_text) .attr("fill", color.black); hilotemp.append("text") .text(Math.round(temp.max)) .attr("class", "temperature") .attr("text-anchor", "beginning") .attr("alignment-baseline", "middle") .attr("x", xTempScale(temp.max) + padding.temptextoffset) .attr("y", weather_midpt_text) .attr("fill", color.black); // -- UV var uv = svg.append("g") .attr("class", "uv index" + index) .attr("opacity", (mode == "Simple") ? 0 : 1); uv.append("text") .text("UV") .attr("class", "title main") .attr("x", width - padding.r + padding.default) .attr("alignment-baseline", "hanging") .attr("fill", color.black); uv.append("text") .attr("class", "title uv spec") .attr("x", width) .attr("text-anchor", "end") .attr("alignment-baseline", "hanging") .attr("fill", color.black); var uvIndex = lcd(hourly[0].uvIndex, "uv"); // init var startBlockTime = hourly[0].time; // init for (let i=1; i < hourly.length; i++) { let newUv = lcd(hourly[i].uvIndex, "uv"); if (newUv != uvIndex) { drawUV(uvIndex, startBlockTime, hourly[i].time); uvIndex = newUv; startBlockTime = hourly[i].time; } } drawUV(uvIndex, startBlockTime, endtime); function drawUV(index, beginT, endT) { // let blockX = xScale(beginT * 1000); let blockY = padding.t; let blockWidth = xScale(endT * 1000) - xScale(startBlockTime * 1000); let blockHeight = height - padding.t - padding.b; if (!blockWidth) return; // uv.append("line") .attr("class", "uv" + index) .attr("x1", xScale(beginT * 1000)) .attr("x2", xScale(endT * 1000)) .attr("y1", 5) .attr("y2", 5) .attr("stroke-width", 2) .attr("stroke-linecap", "round") } // end drawUV() // -- Winds yWindScale = d3.scaleLinear() .domain([0,10]) // maps the *beaufort* number .range([height-padding.wind, height-5]); var wind = svg.append("g") .attr("class", "wind index" + index) .attr("opacity", (mode == "Simple") ? 0 : 1); wind.append("text") .text("Wind") .attr("class", "title main") .attr("x", width - padding.r + padding.default) .attr("y", height - padding.wind) .attr("alignment-baseline", "middle") .attr("fill", color.black); wind.append("text") .attr("class", "title wind spec") .attr("x", width) .attr("y", height - padding.wind) .attr("text-anchor", "end") .attr("alignment-baseline", "middle") .attr("fill", color.black); wind.append("g") // kinda hacky. need this "g" for text wrapping .attr("transform", "translate(" + (width - padding.r + padding.default) + "," + (height - padding.wind + 14) + ")") .append("text") .attr("class", "winddesc spec") .attr("dy", 0) .attr("alignment-baseline", "middle") .style("line-height", 0.9) // appending multiple items to a single parent: // https://stackoverflow.com/questions/21485981/appending-multiple-non-nested-elements-for-each-data-member-with-d3-js var windlines = wind.selectAll("line") .data(hourly).enter() .append("g") ; // backing line windlines.append("line") .attr("class", "wind backing") .attr("x1", d => xScale(d.time*1000)) .attr("x2", d => xScale(d.time*1000)) .attr("y1", yWindScale(0)) .attr("y2", yWindScale(10)) .attr("stroke-width", 3) .attr("stroke-linecap", "round") .attr("stroke", color.lightgray); // data line windlines.append("line") .attr("class", "wind") .attr("x1", d => xScale(d.time*1000)) .attr("x2", d => xScale(d.time*1000)) .attr("y1", yWindScale(0)) // complex: grab the lcd of wind speed, then find the beaufort number. whew! .attr("y2", d => yWindScale(Math.floor(levels.wind[lcd(d.windGust, "wind")].beaufort))) .attr("stroke-width", 3) .attr("stroke-linecap", "round") .attr("stroke", color.black); // -- Additional Expanded Info (temp / percip) var info = svg.append("g") .attr("class", "info") .attr("transform", "translate(0," + padding.info + ")") .attr("opacity", (mode == "Simple") ? 0 : 1); info.append("text") .text("Temperature") .attr("class", "title spec") .attr("x", width - padding.r + padding.default) .attr("alignment-baseline", "middle") .attr("fill", color.black); info.append("text") .attr("class", "title temp spec") .attr("x", width) .attr("text-anchor", "end") .attr("alignment-baseline", "middle") .attr("fill", color.black); info.append("text") .text("Rain") .attr("class", "title spec") .attr("x", width - padding.r + padding.default) .attr("y", padding.info) .attr("alignment-baseline", "middle") .attr("fill", color.black); info.append("text") .attr("class", "title precip spec") .attr("x", width) .attr("y", padding.info) .attr("text-anchor", "end") .attr("alignment-baseline", "middle") .attr("fill", color.black); // -- Blocks of weather var summary = hourly[0].summary; // init startBlockTime = hourly[0].time; // init for (let i=1; i < hourly.length; i++) { if (hourly[i].summary != summary) { // draw the block drawBlock(summary, startBlockTime, hourly[i].time); summary = hourly[i].summary; startBlockTime = hourly[i].time; } } drawBlock(summary, startBlockTime, endtime); // -- Precipitation var area = d3.area() .x(d => xScale(d.time * 1000)) .y0(yPrecipScale(0)) .y1(d => yPrecipScale(d.precipProbability)); svg.append("path") .datum(hourly) .attr("class", "precip area") .attr("fill", changes.precipColor[0]) .attr("d", area) .attr("opacity", changes.precipAreaOpacity[0]) .attr("clip-path", "url(#" + mask.id + ")"); // .style("clip-path", "url(#" + mask.id + ")"); svg.append("path") .datum(hourly) .attr("class", "precip line") .attr("stroke", changes.precipColor[0]) .attr("stroke-width", 1) .attr("fill", "none") .attr("d", d => linePrecip(d)) .attr("opacity", changes.precipLineOpacity[0]) .attr("clip-path", "url(#" + mask.id + ")"); // -- Sunrise / sunset // sunriseTime // svg.append("line") // .attr("class", "sunriseset") // .attr("x1", xScale(dayta.sunriseTime*1000)) // .attr("x2", xScale(dayta.sunriseTime*1000)) // .attr("y1", padding.t) // .attr("y2", height-padding.b) // .attr("stroke-dasharray", "5,5") // .attr("stroke", color.lightorange); // -- Indicator for time var currentIndicator = svg.append("g") .attr("class", "currenttime") .attr("transform", "translate(" + xScale(rightnow) + ", 0)") // .attr("clip-path", "url(#" + mask.id + ")"); svg.append("line") // for some reason, this line cannot be part of the group.. messes up mask .attr("class", "currenttime") .attr("x1", xScale(rightnow)) .attr("x2", xScale(rightnow)) .attr("y1", (mode == "Simple") ? padding.t : 0) .attr("y2", (mode == "Simple") ? height-padding.b : height-padding.wind) .attr("stroke", color.red) .attr("clip-path", (mode == "Simple") ? "url(#" + mask.id + ")" : "url(#" + mask.expandid + ")"); currentIndicator.append("rect") .attr("class", "currenttime") .attr("x", -30) .attr("y", height - padding.b + 8) .attr("width", 60) .attr("height", 12) .attr("fill", color.truewhite) .attr("opacity", (mode == "Simple") ? 1 : 0); currentIndicator.append("text") .text(formatDate(rightnow, false)) .attr("class", "currenttime") .attr("y", height - padding.b + 18) .attr("fill", color.red) .attr("text-anchor", "middle") .attr("alignment-baseline", "baseline") .attr("opacity", (mode == "Simple") ? 1 : 0); currentIndicator.append("text") .attr("class", "currentprecip") .attr("y", 0) .attr("fill", color.blue) .attr("text-anchor", "middle") .attr("alignment-baseline", "hanging") .attr("opacity", (mode == "Simple") ? 1 : 0); // -- Indicator for temperature (on right) hilotemp.append("circle") .attr("class", "currenttemp") // .attr("cx", d => xScale(d.time*1000)) .attr("cy", weather_midpt) .attr("r", padding.templinewidth/2) .attr("fill", color.lightorange); hilotemp.append("text") .attr("class", "currenttemp") .attr("y", weather_midpt + padding.templinewidth) .attr("fill", color.orange) .attr("text-anchor", "middle") .attr("alignment-baseline", "hanging"); showCurrentTempOrHide(); // Helper functions function drawBlock(summary, beginT, endT) { let blockX = xScale(beginT * 1000); let blockY = padding.t; let blockWidth = xScale(endT * 1000) - xScale(beginT * 1000); let blockHeight = height - padding.t - padding.b; if (!blockWidth) return; svg.append("rect") .attr("class", "weather") .attr("x", blockX) .attr("y", blockY) .attr("width", blockWidth) .attr("height", blockHeight) .attr("fill", weathercolor[summary] || weathercolor.default) .attr("clip-path", "url(#" + mask.id + ")"); // add text if ( (summary.length < 6 && blockWidth > 50) || (summary.length >= 6 && summary.length < 12 && blockWidth > 90) || (summary.length >=13 && blockWidth > 95) ) { // console.log(summary + " - " + blockWidth) svg.append("text") .text(summary) .attr("class", "weather") .attr("x", (blockX + blockWidth/2)) .attr("y", weather_midpt_text) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("fill", (summary == "Clear") ? color.black : color.white) } } // end drawBlock() // http://bl.ocks.org/hlucasfranca/f133da4493553963e710 function revealMoreInfo() { // get mouse coordinates var coords = d3.mouse(this); // only update if mouse is within boundaries of "weather blocks" if (coords[0] <= padding.l || coords[0] >= width - padding.r) return; // update time indicator & text svg.select("line.currenttime") .attr("x1", coords[0]) .attr("x2", coords[0]); var newX = xScale.invert(coords[0]); var date = new Date(newX); currentIndicator.attr("transform", "translate(" + coords[0] + ",0)"); svg.select("text.currenttime") .text(formatDate(date, false)); // get temperature stuff updateTemp(date); // fade out the weather blocks & text svg.selectAll("rect.weather") .attr("opacity", changes.weatherBlockOpacity[1]); svg.selectAll("text.weather") .attr("opacity", changes.weatherTextOpacity[1]); // update precipitation svg.select("path.line.precip") .attr("opacity", changes.precipLineOpacity[1]) .attr("stroke", changes.precipColor[1]); svg.select("path.area.precip") .attr("opacity", changes.precipAreaOpacity[1]) .attr("fill", changes.precipColor[1]); // swap date text svg.selectAll("text.weekday") .attr("opacity", 0); svg.selectAll("text.monthdate") .attr("opacity", 1); // add class to uv, wind svg.select("g.uv").attr("class", "uv reveal"); svg.select("g.wind").attr("class", "wind reveal"); // update axis svg.select("g.axis") .attr("opacity", changes.axisOpacity[1]); } // end revealMoreInfo() function hideMoreInfo() { // todo: reset temperature line showCurrentTempOrHide(); // reset time indicator & text svg.select("line.currenttime") .attr("x1", xScale(rightnow)) .attr("x2", xScale(rightnow)); currentIndicator.attr("transform", "translate(" + xScale(rightnow) + ",0)"); svg.select("text.currenttime") .text(formatDate(rightnow, false)); // hide other indicators // fade in the weather blocks & text svg.selectAll("rect.weather") .attr("opacity", changes.weatherBlockOpacity[0]); svg.selectAll("text.weather") .attr("opacity", changes.weatherTextOpacity[0]); // update precipitation // svg.selectAll("circle.precip") // .attr("fill", color.white); svg.select("path.line.precip") .attr("opacity", changes.precipLineOpacity[0]) .attr("stroke", changes.precipColor[0]); svg.select("path.area.precip") .attr("opacity", changes.precipAreaOpacity[0]) .attr("fill", changes.precipColor[0]); // swap date text svg.selectAll("text.weekday") .attr("opacity", 1); svg.selectAll("text.monthdate") .attr("opacity", 0); // remove "reveal" class from uv, wind (only for other days, not today) if (index) { svg.select("g.uv").attr("class", "uv"); svg.select("g.wind").attr("class", "wind"); } // update axis svg.select("g.axis") .attr("opacity", changes.axisOpacity[0]); } // end hideMoreInfo() // rounding to nearest hour: // https://stackoverflow.com/questions/7293306/how-to-round-to-nearest-hour-using-javascript-date-object function getNearestHourTimestamp(olddate) { var date = new Date(olddate); // just so olddate doesn't get modified date.setMinutes(date.getMinutes() + 30); date.setMinutes(0,0,0); // correct timestamp for dark sky (divide by 1000) return date.getTime()/1000; } // end getNearestHourTimestamp() function showCurrentTempOrHide() { // if it's any of the weather blocks *except* today's block: if (index) { svg.select("circle.currenttemp") .attr("opacity", 0); svg.select("text.currenttemp") .attr("opacity", 0); svg.selectAll("text.spec") .attr("opacity", 0); } // for today's block, show current temperature else { updateTemp(rightnow); } } // end showCurrentTempOrHide() function updateTemp(date) { var timestamp = getNearestHourTimestamp(date); var timeobj = hourly.find(d => d.time === timestamp); if (timeobj) { if (mode == "Simple") { // update hi/lo temp svg.select("circle.currenttemp") .attr("cx", xTempScale(timeobj.temperature)) .attr("opacity", 1); svg.select("text.currenttemp") .text(Math.round(timeobj.temperature)) .attr("x", xTempScale(timeobj.temperature)) .attr("opacity", 1); // update precipitation on timeline var precip = timeobj.precipProbability * 100; if (precip > 25) { precip = Math.round(precip); precip += "%"; } else precip = ""; svg.select("text.currentprecip") .text(precip); } // end "simple mode" else { svg.selectAll("text.spec").attr("opacity", 1); let lcdIndex = lcd(timeobj.uvIndex, "uv"); svg.select("text.uv.spec") .text(timeobj.uvIndex + "—" + levels.uv[lcdIndex]) .attr("class", "title uv spec uvfill" + lcdIndex); let lcdWind = lcd(timeobj.windGust, "wind"); svg.select("text.wind.spec") .text(Math.round(timeobj.windGust) + "mph [" + levels.wind[lcdWind].beaufort + "]"); svg.select("text.winddesc.spec") .text(levels.wind[lcdWind].desc) .call(wrap, 105, 14); svg.select("text.temp.spec") .text(Math.round(timeobj.temperature) + "°F"); svg.select("text.precip.spec") .text(Math.round(timeobj.precipProbability*100) + "%"); } // end "expand mode" } } // end updateTemp() return svg.node(); }35:T766,// takes the *minimum* value levels = ({ // https://molescope.com/blog/u-what-uv-index-explained uv: { 0: "low", 3: "ok", 6: "high", 8: "very high", 11: "extreme", 15: "impossible" }, // http://detroitlovedr.com/wind-speed-damage-chart.html/cute-wind-speed-damage-chart-for-your-submit-a-spotter-report wind: { 0: { title: "calm", beaufort: 0, desc: "Calm wind" }, 1: { title: "light air", beaufort: 1, desc: "Wind barely moves tree leaves or flag" }, 4: { title: "light breeze", beaufort: 2, desc: "Wind is felt; leaves rustle, twigs move" }, 8: { title: "gentle breeze", beaufort: 3, desc: "Leaves/twigs keep moving; flags extended" }, 13: { title: "moderate breeze", beaufort: 4, desc: "Small branches, loose paper move" }, 19: { title: "fresh breeze", beaufort: 5, desc: "Large branches in trees sway" }, 25: { title: "strong breeze", beaufort: 6, desc: "Whistling sounds; umbrellas hard to use" }, 32: { title: "near gale", beaufort: 7, desc: "Whole trees sway; harder to walk" }, 39: { title: "whole gale", beaufort: 8, desc: "Twigs breaking; impedes walking" }, 47: { title: "strong gale", beaufort: 9, desc: "Minor structural damage" }, 55: { title: "whole gale", beaufort: 10, desc: "decent structural damage; small trees fall" }, 64: { title: "storm force", beaufort: 11, desc: "widespread damage; large trees blown over" }, 75: { title: "hurricane force", beaufort: 12, desc: "severe and extensive damage" }, 300: { title: "impossible", beaufort: 20, desc: "off the charts" } } })36:T412,// https://learnui.design/tools/data-color-picker.html#single color =({ lightpurple: "#DF7EEF", purple: "#C82CE0", darkpurple: "#6C0075", // https://www.colorbox.io/#steps=4#hue_start=190#hue_end=212#hue_curve=easeInQuad#sat_start=7#sat_end=50#sat_curve=easeOutQuad#sat_rate=200#lum_start=100#lum_end=46#lum_curve=easeOutQuad#minor_steps_map=0 lightestblue: "#97E6F8", lightblue: "#57D0F1", blue: "#1288C5", darkblue: "#003775", // https://coolors.co/ffe066-ffd326-ff9f1b-ff9f1b-f77f00 yellow: "#FFE066", darkyellow: "#ffd326", lightorange: "#FF9F1B", orange: "#F77F00", // https://coolors.co/4d4d68-8d99ae-d2d6d8-e83f6f-ff1554 lightred: "#E83F6F", red: "#FF1554", lightgray: "#EDF2F4", gray: "#D2D6D8", midgray: "#8D99AE", darkgray: "#4D4D68", // https://coolors.co/2f2f5e-8d99ae-f7fcff-e83f6f-ff1554 white: "#F7FCFF", black: "#2F2F5E", green: "#44AF69", // https://coolors.co/0c7c59-44af69-69b578-8fd694-d3edce truewhite: "#fff", k: "ac365310cb6bb66a9881b98971ab88de" })37:T75a,html` `38:T734,md ` --- #### Todo - ✅ **use of [permalinks](https://observablehq.com/@jeffbaumes/permalink)!** - bugs - Safari rendering issues - Certan elements not being masked ([possible solution](https://stackoverflow.com/questions/16574099/what-could-make-safari-skip-clip-path-and-mask-with-svg)) - Time indicator being covered by white backing - FF: use [dominant-baseline](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline) instead of alignment-baseline - remove time indicator wrapping around to the next date's timeline (when it's late, for ex) - ✅onhover time indicator goes away at times (like going over weather text, or new weather block) - ✅masking error for percip line (in expanded view) - ❌time scale issues of when day 5 [ends](https://cl.ly/b0daaf1033bf) -> it's b/c of daylight savings - ✅other available cities - ✅**make sure timezone is correct** - **current info** - **next 60 minutes** - alerts - additional info - ✅UV - ✅wind (beaufort number) - ✅[frost point](https://www.courierpostonline.com/story/life/home-garden/2015/03/31/understand-frost-freeze-dew-point/70707594/) / [Q&A — see A4](https://www.weather.gov/source/zhu/ZHU_Training_Page/fog_stuff/Dew_Frost/Dew_Frost.htm#FROST) / [calculator](http://www.decatur.de/javascript/dew/index.html) / [better calc](http://www.michell.com/us/calculator/) / [**weather station's approx formula**](https://weather.station.software/blog/what-are-dew-and-frost-points/) - [AQI?](https://airnowapi.org) - [muggy weather](https://www.thoughtco.com/muggy-weather-overview-3444058) - ❌visibility / cloudy - mark sunrise / sunset (maybe w icons?) - ..using [historical data](https://sunrise-sunset.org/us/seattle-wa/2018/12)? - ✅better experience - ✅smooth transitions - ✅vibrant colors `39:[] 31:{"id":"bf5d25594e5ae130","slug":"bright-sky-weather","title":"Bright Sky (Better Weather App)","thumbnail":"81d17a9270794acd0a30caeb0699f667d93a5031069964d3c78a3f9dae4bd907","access_level":"public","create_time":"$D2019-02-20T18:15:08.509Z","update_time":"$D2020-02-11T19:37:45.604Z","view_time":null,"first_public_time":"$D2019-02-26T18:05:11.798Z","has_unpublished_edits":null,"fork":true,"stars":26,"starred":false,"owner":{"type":"team","id":"14074f730a8d4dd9","login":"abeyang","name":"Abe Yang","avatar_url":"https://avatars-next.observableusercontent.com/f32459cf05a621ea48d32d76ff263a30fe286ed4e8566e8beb3e0887c4deb348","tier":"starter_2024"},"version":1650,"publish_version":1650,"role":null,"authored":false,"authors":[{"type":"individual","id":"ffbcdeaa3ec6bb24","login":"abeyang","name":"Abe Yang","avatar_url":"https://avatars-next.observableusercontent.com/f32459cf05a621ea48d32d76ff263a30fe286ed4e8566e8beb3e0887c4deb348","tier":null}],"members":[{"type":"individual","id":"ffbcdeaa3ec6bb24","login":"abeyang","name":"Abe Yang","avatar_url":"https://avatars-next.observableusercontent.com/f32459cf05a621ea48d32d76ff263a30fe286ed4e8566e8beb3e0887c4deb348","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":19,"collection":{"id":"914e2880013747e9","slug":"data-visualization-for-developers","title":"Observable for Developers","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Bright Sky (Better Weather App)","cells":[{"id":0,"value":"md`# Bright Sky (Better Weather App)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md `\n\n**This works best on Chrome**. Haven't worked out all the kinks on other browsers.\n\nLast updated: ${new Date(data.currently.time*1000).toLocaleString(undefined, {timeZone: data.timezone})} (${data.timezone})\n\nSave link below (permalink) for quick access:\n\n${permalink({city, mode})}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"viewof city = select({\n title: \"Location\",\n // description: \"Please pick your favorite stooge.\",\n options: Object.keys(location),\n value: params.city\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1039,"value":"viewof mode = select({\n title: \"Mode\",\n description: \"'Expand' to see wind speeds and UV levels\",\n options: [\"Simple\", \"Expand\"],\n value: params.mode\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"drawWeather(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"drawWeather(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"drawWeather(2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"drawWeather(3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"drawWeather(4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"drawWeather(5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"drawWeather(6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1495,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"md `\n---\n#### Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"// for every value, give array:\n// [default, onhover]\nchanges = ({\n axisOpacity: [1, .5],\n weatherBlockOpacity: [1, .15],\n weatherTextOpacity: [1, 0],\n precipColor: [color.white, color.blue],\n precipLineOpacity: [.5, 1],\n precipAreaOpacity: [.2, .33]\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"// find the value inside \"attr\" that has the \"lowest common denominator\"\n// eg: a UV Index of 4 should return \"3\", b/c that's the lowest common number\nfunction lcd(value, attr) {\n let keys = Object.keys(levels[attr]);\n for (let i = 1; i < keys.length; i++) {\n if (value < keys[i]) return keys[i-1];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"function formatDate(date, showHourOnly = true) {\n let format = {\n hour: \"numeric\", \n timeZone: data.timezone\n };\n\n if (!showHourOnly) format.minute = \"numeric\";\n\n return date.toLocaleString(undefined, format);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1599,"value":"hash = window.location.hash","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1582,"value":"frost = ({\n tempHigh: 37,\n dewHigh: 32,\n opacityLow: 0.2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"weathercolor = ({\n // sunny\n \"Clear\": color.yellow,\n \"Breezy\": color.darkyellow,\n\n // cloudy \n \"Partly Cloudy\": color.gray,\n \"Windy and Mostly Cloudy\": color.midgray,\n \"Mostly Cloudy\": color.midgray,\n \"Overcast\": color.darkgray,\n \"default\": color.darkgray,\n\n // rain\n \"Drizzle\": color.lightestblue,\n \"Light Rain\": color.lightblue,\n \"Rain\": color.blue,\n \"Heavy Rain\": color.darkblue,\n \"Thunderstorm\": color.darkblue,\n\n // snow\n \"Possible Light Snow\": color.lightpurple,\n \"Light Snow\": color.lightpurple,\n \"Flurries\": color.lightpurple,\n \"Snow\": color.purple,\n \"Heavy Snow\": color.darkpurple\n\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"padding = ({\n height: (mode == \"Simple\") ? 70: 120, // default height\n expandheight: 120, // for expanded mask\n \n default: 20,\n info: 25,\n templinewidth: 8,\n temptextoffset: 7,\n buffer: 7,\n \n t: (mode == \"Simple\") ? 10: 15,\n b: (mode == \"Simple\") ? 20: 65,\n l: 80,\n r: 160,\n \n uv: 10,\n wind: 35\n}); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"md `\n---\n#### Data & Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"location = ({\n \"Seattle, WA\": [47.6849,-122.2991],\n \"Portland, OR\": [45.5202,-122.6742],\n \"Vancouver, BC\": [49.2609,-123.114],\n \n \"Alameda, CA\": [37.7368,-122.2406],\n \"Davis, CA\": [38.5568118,-121.7700488],\n \"Irvine, CA\": [33.6857,-117.826],\n \"Los Angeles, CA\": [34.0537,-118.2428],\n \"Riverside, CA\": [33.9459362,-117.5396128],\n \"San Diego, CA\": [32.7174,-117.1628],\n \"Santa Barbara, CA\": [34.3985072,-119.8899403],\n\n \"Chicago, IL\": [41.8756,-87.6244],\n \"Chapel Hill, NC\": [35.9132,-79.0558],\n \"Minneapolis, MN\": [44.9706756,-93.3315183],\n \"Piscataway, NJ\": [40.5463,-74.466],\n \"Austin, TX\": [30.2711,-97.7437],\n \"Fairfax, VA\": [38.8156,-77.2837]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"// https://www.freecodecamp.org/forum/t/solved-having-trouble-getting-response-from-dark-sky-api/100653\n// https://crossorigin.me\ndata = d3.json(\"https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/\" + color.k + \"/\" + location[city].join() + \"?extend=hourly\");\n// data = d3.json(\"https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/\" + color.k + \"/\" + location[city].join());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1473,"value":"roundDate(new Date(2019,2,8).getTime() / 1000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1463,"value":"// returns timestamp readable by Dark Sky\n// time = Dark Sky's time format\nfunction roundDate(time) {\n let thisdate = new Date(time*1000);\n let date = new Date(thisdate.getFullYear(), thisdate.getMonth(), thisdate.getDate());\n return date.getTime()/1000;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1375,"value":"viewof temperature = slider({\n min: 0, \n max: 32, \n step: 1, \n value: 32,\n title: \"Temperature (in F)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1414,"value":"viewof dewpoint = slider({\n min: 0, \n max: 32, \n step: 1, \n value: 10,\n title: \"Dew Point (in F)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1417,"value":"frostpoint = KtoF(frostpointK)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1386,"value":"temperatureK = FtoK(temperature)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1389,"value":"dewpointK = FtoK(dewpoint)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"frostpointK = dewpointK + (2671.02 / (2954.61/temperatureK + 2.193665 * Math.log(temperatureK) - 13.3448)) - temperatureK","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1383,"value":"function FtoK(f) {\n return (f - 32) * 5/9 + 273.15\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1408,"value":"function KtoF(k) {\n return (k - 273.15) * 9/5 + 32\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"import {select, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1620,"value":"import {params, permalink} from \"@jeffbaumes/permalink\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1315,"value":"import {wrap} from \"@abeyang/globals\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1594,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"