// 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(); }