31:T532,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, 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 `32:T5874,// index = daily index function drawWeather(index) { var height = padding.height; // height = 400; 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 weather-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(''); console.log(hourly); // -- 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, 0.2]); yPrecipScale = d3 .scaleLinear() .domain([0, 1]) .range([height - padding.b + 10, padding.t]); // svg // .selectAll("line") // .data(hourly) // .enter() // .append("line") // .filter(d => d.dewPoint <= 32 && d.temperature <= 37) // .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([1, 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(1)) .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(1)) // complex: grab the lcd of wind speed, then find the beaufort number. whew! .attr("y2", d => { return yWindScale( Math.floor(levels.wind[lcd(d.windSpeed, "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 + ")"); 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.windSpeed, "wind"); svg .select("text.wind.spec") .text( Math.round(timeobj.windSpeed) + "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(); }33:T6f4,// 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", }, // 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" }, } })34: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" })35:T75c,html` `36:T5c0,md ` --- #### Todo - bugs - Safari rendering issues - 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) - ❌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 `37:[] 2f:{"title":"A FORK of ;) : Bright Sky (Better Weather App)","cells":[{"id":0,"value":"md`# A FORK of ;) : Bright Sky (Better Weather App)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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`","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"viewof city = select({\n title: \"Location\",\n // description: \"Please pick your favorite stooge.\",\n options: Object.keys(location)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1659,"value":"city","pinned":true,"hidden":false,"mode":"ojs"},{"id":1629,"value":"width","pinned":true,"hidden":false,"mode":"ojs"},{"id":1631,"value":"height","pinned":true,"hidden":false,"mode":"ojs"},{"id":1039,"value":"viewof mode = select({\n title: \"Mode\",\n description: \"'Expand' to see wind speeds and UV levels\",\n options: [\"Simple\", \"Expand\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"drawWeather(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"drawWeather(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"drawWeather(2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"drawWeather(3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"drawWeather(4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"drawWeather(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"drawWeather(6)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1495,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1051,"value":"md `\n---\n#### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":930,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":647,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1633,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":1009,"value":"padding = ({\n // height: (mode == \"Simple\") ? 70: 120, // default height\n height: height,\n expandheight: 120, // for expanded mask\n\n default: 20,\n info: 25,\n templinewidth: 8,\n temptextoffset: 7,\n buffer: 60,\n\n t: mode == \"Simple\" ? 10 : 15,\n b: mode == \"Simple\" ? 60 : 65,\n l: 80,\n r: 160,\n\n uv: 10,\n wind: 35\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":883,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"md `\n---\n#### Data & Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"location = ({\n Quadra: [50.1517, -125.2664],\n Victoria: [48.4284, -123.3656],\n Calvert: [51.5529, -128.0056],\n \"Portland, OR\": [45.5202, -122.6742],\n \"Vancouver, BC\": [49.2609, -123.114],\n\n \"Davis, CA\": [38.5568118, -121.7700488],\n \"Irvine, CA\": [33.6857, -117.826],\n \"Los Angeles, CA\": [34.0537, -118.2428],\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 \"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"},{"id":1590,"value":"color","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"// https://www.freecodecamp.org/forum/t/solved-having-trouble-getting-response-from-dark-sky-api/100653\ndata = d3.json(\n \"https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/\" +\n \"a0048967c2888cb67730e162750586b8\" +\n \"/\" +\n location[city].join() +\n \"?units=si&extend=hourly\" \n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1473,"value":"// roundDate(new Date().getTime() / 1000)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":1417,"value":"frostpoint = KtoF(frostpointK)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1386,"value":"temperatureK = FtoK(temperature)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1389,"value":"dewpointK = FtoK(dewpoint)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"frostpointK = dewpointK + (2671.02 / (2954.61/temperatureK + 2.193665 * Math.log(temperatureK) - 13.3448)) - temperatureK","pinned":false,"hidden":false,"mode":"ojs"},{"id":1383,"value":"function FtoK(f) {\n return (f - 32) * 5/9 + 273.15\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1408,"value":"function KtoF(k) {\n return (k - 273.15) * 9/5 + 32\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"import {select, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1315,"value":"import {wrap} from \"@abeyang/globals\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}