40:null 41:["$","title",null,{"children":"Local Temperature History - Draggable Ridgeline | peoplesfeelings | Observable"}] 47:Td19,chart = { // blank until input exists if ( !svg || shearYScaled === null || (selectedStationData && selectedStationData.length === 0) ) yield DOM.text(" "); // loading animation while fetching data if (validPostalCode && data == null) { yield html`

`; } // once data arrives if (dataToShow) { // delete previous visible content svg.selectAll("#visible-g").remove(); // create g for new visible content const visible = svg.append("g").attr("id", "visible-g"); // use d3 object to append a g, per item in data array (1 year, each) const group = visible .append("g") .selectAll("g") .data(selectedStationData) .join("g") .attr( "transform", (d) => `translate(${depthAngleXScale(d.year)},${ depthAngleYScale(d.year) + 1 })` ); // path of 1 year line chart's area under the line group .append("path") .attr("fill", "rgba(255,255,255," + opacity + ")") .attr("d", (d) => area(d.values)); // path of 1 year line chart's top line group .append("path") .attr("fill", "none") .attr("stroke", "url(#thegradient)") .attr("stroke-width", "2") .attr("d", (d) => area.lineY1()(d.values)); // path of 1 year line chart's bottom line group .append("path") .attr("fill", "none") .attr("stroke", config.ridgeline.nonPrimaryLineColor) .attr("d", (d) => lineBottom(d.values)); // path of 1 year line chart's vertical edges group .append("path") .attr("fill", "none") .attr("stroke", config.ridgeline.nonPrimaryLineColor) .attr("d", (d) => verticalLines(d.values)); // 1 year line chart y axis group .append("g") .attr( "transform", (d) => "translate(" + lineChartXScale(d.values.findLastIndex(() => true)) + ",0)" ) .call(yAxis); // depth axis text group .append("g") .attr( "transform", (d) => "translate(" + (lineChartXScale(0) - 30) + ",3)" ) .append("text") .text((d) => d.year) .attr("font-size", 10) .attr("font-family", "sans-serif"); // depth axis tick marks group .append("g") .attr("transform", (d) => "translate(" + lineChartXScale(0) + ",0)") .call(depthAxis); // x axis visible.append("g").call(xAxis); // put overlay on top of new elements (for drag control) svg.select("#pan-overlay").raise(); /* svg is its own cell, because chart reruns every time panning occurs. using d3.zoom panning for 3d shearing works if the zoom code is in a separate cell that is not rerunning while the panning is occurring. */ yield svg.node(); } }48:T438,xAxis = { /* returns a function that takes a g gives it a transform calls d3.axisBottom(x) x being a d3 time scale */ let dateRangeYearAgnostic; switch (theDataSet.dataPointsPerYearImprecise) { case 12: if (config.ridgeline.duplicateFirstMonthForMonthly) { dateRangeYearAgnostic = [new Date(2000, 0, 1), new Date(2001, 0, 1)]; } else { dateRangeYearAgnostic = [new Date(2000, 0, 1), new Date(2000, 11, 1)]; } break; } return (g) => g .attr("transform", `translate(${shearXScaled},${verticalCenter + shearYScaled})`) .call( d3 .axisBottom( d3 .scaleTime() .domain(dateRangeYearAgnostic) .range([ config.ridgeline.margin.left, width - config.ridgeline.margin.right ]) ) .tickFormat(d3.timeFormat("%b %e")) ) .selectAll("text") .attr( "style", "transform: translateX(15px) translateY(15px) rotate(60deg);" ); }49:T650,verticalLines = { return (lineChartData) => { let pathDefinition = ""; function exists(val) { return val !== null; } function getPathDefinition(xIndex) { const twoPoints = [ [lineChartXScale(xIndex), 0], [lineChartXScale(xIndex), lineChartYScale(lineChartData[xIndex])] ]; const line = d3.line().curve(d3.curveLinear); return line(twoPoints); } // concatenates multiple line definitions for the SVG path element's d attribute value function addLine(xIndex) { pathDefinition += getPathDefinition(xIndex) + " "; } let lastOneWasPresent = false; /* iterates through a line chart's data points, checking for null in relation to whether preceding or following elements are null. appends vertical line definitions to mark start or end points of data. */ for (let i = 0; i < lineChartData.length; i++) { if (lastOneWasPresent) { if (exists(lineChartData[i])) { // if the last iterand if (i === lineChartData.length - 1) { // draw a right-side line addLine(i); } else { if (!exists(lineChartData[i + 1])) { // draw a right-side line addLine(i); } } } else { lastOneWasPresent = false; } } else { if (exists(lineChartData[i])) { // draw a left-side line addLine(i); lastOneWasPresent = true; } } } // return "concatenated" path definition string return pathDefinition; }; }4a:Ta57,theGradient = () => { /* Linear gradient coloring for the line chart is preferable to no coloring because it significantly improves clarity of line chart Y values. A quantized color scheme is preferable to a continuous color gradient because a continuous color gradient is less clear, for a ridgeline. This cell provides an easy way to drop in a new quantized color scheme and have it applied to the chart with the needed linearGradient stops. */ let scheme = ["crimson", "darkorange", "darkturquoise", "blue"]; /*scheme = [ "#ff4040", "#bfbf00", "#40ff40", "#00bfbf", "#4040ff", "#bf00bf", "#ff4040" ];*/ /* This notebook can be helpful for getting such arrays for a color scheme: https://observablehq.com/@d3/color-schemes The scheme size control, there, sets the quantize length. Click the swatch band to copy the array. Assign such an array to the scheme variable here to apply the new color scheme. */ const sel = d3.select( document.createElementNS("http://www.w3.org/2000/svg", "linearGradient") ); function getStartOffset(colorIndex, schemeLength) { let startOffset = Math.floor((colorIndex / schemeLength) * 100); return startOffset + "%"; } function getEndOffset(colorIndex, schemeLength) { let endOffset = Math.floor(((colorIndex + 1) / schemeLength) * 100); return endOffset + "%"; } sel .attr("id", "thegradient") .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("y1", config.ridgeline.lineChartHeight * -1) .attr("x2", 0) .attr("y2", 0); /* Loop produces a set of SVG linearGradient stops that would look like this: sel.append("stop").attr("offset", "0%").attr("stop-color", "crimson"); sel.append("stop").attr("offset", "25%").attr("stop-color", "crimson"); sel.append("stop").attr("offset", "25%").attr("stop-color", "darkorange"); sel.append("stop").attr("offset", "50%").attr("stop-color", "darkorange"); sel.append("stop").attr("offset", "50%").attr("stop-color", "darkturquoise"); sel.append("stop").attr("offset", "75%").attr("stop-color", "darkturquoise"); sel.append("stop").attr("offset", "75%").attr("stop-color", "blue"); sel.append("stop").attr("offset", "100%").attr("stop-color", "blue"); */ for (let i = 0; i < scheme.length; i++) { sel .append("stop") .attr("offset", getStartOffset(i, scheme.length)) .attr("stop-color", scheme[i]); sel .append("stop") .attr("offset", getEndOffset(i, scheme.length)) .attr("stop-color", scheme[i]); } return sel.node(); }4b:T104d,svg = { if (!height) return null; const svg = d3.select(DOM.svg(width, height)); svg.style("cursor", "grab"); // linear gradient to be referenced by lines. svg.append(theGradient); /* d3 zoom is not used here for traditional zoom & pan. we use the pan feature for a grab & drag control for shearing the 3d shape of the ridgeline chart. this appears to the user similar to grab & drag rotation of a 3d object in a 3d viewer, so it is intuitive. in this case it is not 3d rotation, the ridgeline is not rotated. it looks similar to rotation, but it's really shearing. the line charts remain directly facing the viewer. the intuitive expectation of the user, with this kind of control, is to be able to grab, drag, release, and repeat, starting where they left off. also to have boundaries set on the translate extent. d3.zoom's pan feature gives exactly those features, so d3.zoom is used to produce the grab & drag 3d shearing control. zoom's scale extent is locked, to prevent actual zooming. the optimal behavior for this kind of control can be defined by the following: - as a user drags, the foremost line chart should seem to stay connected to the cursor, so that the user feels like they are dragging a physical object. - there should be boundaries that the line charts cannot be moved beyond, and those boundaries should be based on the dimensions of the SVG. that optimal behavior was achieved by carefully setting up the combination of the following: - the zoom extent - the zoom translateExtent - the starting translateTo - the setting of the shear angle in the zoom handler think of a pan control as 2 rectangles: the viewport (the element) and the "world" that gets moved. the world is always bigger than the viewport and always contains the viewport. zoom extent wraps a coordinate system on the viewport, from corner to corner, to reference. the zoom extent default is what we want so we use that: from [0,0] to the dimensions of the viewport, in this case the overlay, the dimensions for which are [width, height] (same as the SVG). zoom translateExtent sets the dimensions of the "world." the translateExtent values correspond to how much wiggle room there should be, for the movable elements. the starting translateTo and setting the shear angle convert between the shear angle and the pan transform. the shear angle is stored in state as an array of 2 numbers, an x and a y value, each between 0 and 1. these coordinates mark the position of a point within a square, to represent the state of the shear control. */ const xPivotSpace = config.ridgeline.shearXExtent; const yPivotSpace = height - config.ridgeline.lineChartHeight - config.ridgeline.margin.bottom - (config.ridgeline.margin.top - config.ridgeline.lineChartHeight); const theTranslateExtentX = width + xPivotSpace; const theTranslateExtentY = height + yPivotSpace; const zoom = d3 .zoom() .on("zoom", zoomed) .scaleExtent([1, 1]) // disable zoom .translateExtent([ [0,0], [theTranslateExtentX, theTranslateExtentY] ]) .on("start", () => { svg.style("cursor", "grabbing"); }) .on("end", () => { svg.style("cursor", "grab"); }); // put the zoom on an overlay because chart elements are destroyed while dragging and browser support for event handling in that scenario varies const panOverlay = svg .append("rect") .attr("width", width) .attr("height", height) .attr("id", "pan-overlay") .attr("fill", "transparent") .call(zoom); const translateToX = width + (xPivotSpace - mutable shear[0] * xPivotSpace); const translateToY = height + (yPivotSpace - mutable shear[1] * yPivotSpace); // set starting transform based on shear angle zoom.translateTo( panOverlay, translateToX, translateToY, [width,height] ); function zoomed(e) { // set shear angle based on transform mutable shear = [(e.transform.x / xPivotSpace) + 1, (e.transform.y / yPivotSpace) + 1]; } return svg; }4c:Tb20,organizeByYear = (records, datasetPointsPerYear) => { /* this is where we create the arrays that get fed to the line charts. input format: [{}] array of climate records output format: [{year:1999, values: [] }] array of objects representing years, each with year property and array of values */ function dayOfYear(date) { // credit: https://stackoverflow.com/questions/8619879/javascript-calculate-the-day-of-the-year-1-366 var start = new Date(date.getFullYear(), 0, 0); var diff = date - start + (start.getTimezoneOffset() - date.getTimezoneOffset()) * 60 * 1000; var oneDay = 1000 * 60 * 60 * 24; return Math.floor(diff / oneDay); } function getIndex(rec, dataPointsPerYear) { switch (dataPointsPerYear) { case 12: return new Date(rec.date).getMonth(); } } function makeYearObj(year) { // make array of nulls const nullArr = []; for (let i = 0; i < len; i++) { nullArr.push(null); } let yearObject = { year: parseInt(year), values: nullArr }; return yearObject; } let arrayOfYears = []; let len = datasetPointsPerYear; if ( datasetPointsPerYear === 12 && config.ridgeline.duplicateFirstMonthForMonthly ) { len++; } // group records into years records.forEach((record) => { let yearObject = arrayOfYears.find( (year) => year.year === parseInt(record.date.substring(0, 4)) ); // if we don't have an object for the year already, make one if (!yearObject) { yearObject = makeYearObj(record.date.substring(0, 4)); arrayOfYears.push(yearObject); } // place the data value yearObject.values[getIndex(record, datasetPointsPerYear)] = record.value; }); if (allowGaps) { // add blank year object for any missing years let extent = d3.extent( arrayOfYears.map((obj) => { return obj.year; }) ); for (let i = extent[0]; i < extent[1]; i++) { if (arrayOfYears.findIndex((yearObj) => yearObj.year === i) < 0) { arrayOfYears.push(makeYearObj(i)); } } arrayOfYears.sort((a, b) => { if (a.year < b.year) { return -1; } if (a.year > b.year) { return 1; } return 0; }); } /* for monthly data and when the setting is set, duplicate the first month of the year, adding it to the end of the previous year, so that the line chart spans all months */ if ( datasetPointsPerYear === 12 && config.ridgeline.duplicateFirstMonthForMonthly ) { for (let i = 0; i < arrayOfYears.length; i++) { if (arrayOfYears[i + 1] && arrayOfYears[i + 1].values[0]) { arrayOfYears[i].values[len - 1] = arrayOfYears[i + 1].values[0]; } } } return arrayOfYears; }4d:T537,trimToConsecutive = (recArr) => { /* purges array, leaving the longest sequence of consecutive records. takes an array of records that may have gaps, returns an array of records with no gaps. */ const threshold = theDataSet.nonconsecutiveThreshold; let longestConsecutiveLength = 0; let startIndOfLongest = 0; let countSinceGap = 0; let lastDate = null; let currentStartInd = 0; // find longest consecutive segment of records for (let i = 0; i < recArr.length; i++) { const date = new Date(recArr[i].date); if (!lastDate) { countSinceGap++; } else { const diff = date - lastDate; if (diff > threshold) { // gap found if (countSinceGap > longestConsecutiveLength) { // mark as the longest segment so far longestConsecutiveLength = countSinceGap; startIndOfLongest = currentStartInd; } countSinceGap = 0; currentStartInd = i; lastDate = null; } else { countSinceGap++; } } lastDate = date; } if (countSinceGap > longestConsecutiveLength) { // mark as the longest segment longestConsecutiveLength = countSinceGap; startIndOfLongest = currentStartInd; } return recArr.slice( startIndOfLongest, startIndOfLongest + longestConsecutiveLength ); }4e:T540,transformDataResponses = responses => { /* input format: [[{metadata:{}, results:[{}]}]] array of date ranges, each an array of CDO v2 data responses output format: [{stationId:'',records:[{}]}] array of station objects, each with an array of records */ function organizeByStation(dateRanges) { /* input format: [[{metadata:{}, results:[]}]] array of date ranges, each an array of CDO v2 data responses output format: [{stationId:'', records:[]}] array of objects for each weather station, with climate data from the station */ const dataByStation = []; dateRanges.forEach(dateRange => { dateRange.forEach(response => { response.results.forEach(record => { let dataFromStation = dataByStation.find(dataFromStation => dataFromStation.stationId === record.station); // check to see if we already started gathering data for the station if (dataFromStation) { dataFromStation.records.push(record); } else { dataByStation.push({ stationId: record.station, records: [record] }); } }); }); }); return dataByStation; } const organizedData = organizeByStation(responses); return organizedData; }4f:T71b,getAllData = async (ranges, datasetId, dataTypeId, stationParams) => { /* "ranges" param is an array of date ranges (each an array of two date objects). returns all responses for all date ranges. */ const allResponses = []; await Promise.all( ranges.map(async (range) => { const responsesForRange = []; const startStr = cdoDateFormat(range[0]); const endStr = cdoDateFormat(range[1]); let done = false; let nextOffset; while (!done) { try { let resp; let respJson; let needToTryAgain = false; do { resp = await getCdoData( startStr, endStr, nextOffset > 0 ? nextOffset : null, datasetId, dataTypeId, stationParams ); respJson = await resp.json(); if (respJson.status === "429") { console.log("429 in getAllData. sleeping"); await new Promise((r) => setTimeout(r, config.rateSleep)); needToTryAgain = true; } else { needToTryAgain = false; } } while (needToTryAgain); if (respJson.results) { responsesForRange.push(respJson); nextOffset = getNextCdoOffset(respJson); if (!nextOffset) { done = true; } } else { console.log('respJson doesnt have results', respJson); done = true; } } catch (e) { console.log("er", e); break; } } if (responsesForRange.length > 0) { allResponses.push(responsesForRange); } }) ); if (allResponses.length > 0) { return allResponses; } else { return null; } }50:T443,getDateRanges = (start, end, lengthYears) => { /* CDO v2 API endpoints have date range limits. you can't query for more than 10 years of monthly data or 1 year of daily data. but we want to query for longer date ranges so we break up a master date range into a set of smaller date ranges. */ function comesBefore(date1, date2) { if (date2 - date1 > 0) { return true } else { return false } } const yearHigh = end.getFullYear(); const yearLow = start.getFullYear(); const difference = yearHigh - yearLow; if (difference <= lengthYears) return [[start, end]] const rangeArray = []; // copy date let pageEnd = new Date(start.getTime()); let done = false; while (!done) { pageEnd = new Date(pageEnd.getTime()); let pageStart = new Date(pageEnd.getTime()); pageEnd.setFullYear(pageEnd.getFullYear() + lengthYears); // if page end comes after master end if (!comesBefore(pageEnd, end)) { pageEnd = end; done = true; } rangeArray.push([pageStart, pageEnd]) } return rangeArray; }51:T53c,getCdoStations = async (datasetId, bBox, startDateStr, dataTypeId) => { /* Get weather stations within bounding box coordinates that have with data in date range matching dataset and data type */ if (!bBox || !dataTypeId || !datasetId || !startDateStr) { return null; } const url = config.cdoProxy + "/stations" + "?datasetid=" + datasetId + "&extent=" + bBox + "&startdate=" + startDateStr + "&datatypeid=" + dataTypeId; const responses = []; let nextOffset; let done = false; while (!done) { const reqUrl = nextOffset ? url + "&offset=" + nextOffset : url; try { let resp; let respJson; let needToTryAgain = false; do { resp = await fetch(reqUrl); respJson = await resp.json(); if (respJson.status === "429") { console.log("429 in getCdoStations. sleeping"); await new Promise((r) => setTimeout(r, config.rateSleep)); needToTryAgain = true; } else { needToTryAgain = false; } } while (needToTryAgain); responses.push(respJson); nextOffset = getNextCdoOffset(respJson); if (!nextOffset) { done = true; } } catch (e) { console.log("exception in getCdoStations", e); return null; } } return responses; }52:T5e8,getBoundingBoxSwNe = (coords, distance) => { function getOffsetCoordinate(lat, lon, d, bearing) { // based on https://stackoverflow.com/questions/7222382/get-lat-long-given-current-point-distance-and-bearing // takes lat float, long float, distance in km, and bearing in rads const r = 6378.1; // radius of earth in km lat = toRadians(lat); lon = toRadians(lon); let lat2 = Math.asin( Math.sin(lat) * Math.cos(d / r) + Math.cos(lat) * Math.sin(d / r) * Math.cos(bearing) ); let lon2 = lon + Math.atan2( Math.sin(bearing) * Math.sin(d / r) * Math.cos(lat), Math.cos(d / r) - Math.sin(lat) * Math.sin(lat2) ); lat2 = toDegrees(lat2); lon2 = toDegrees(lon2); return [lat2, lon2]; } function toDegrees(angle) { return angle * (180 / Math.PI); } function toRadians(angle) { return angle * (Math.PI / 180); } if (!coords) return null; // cdo v2 uses this google map format // southwest and northeast try { const bottomLeft = getOffsetCoordinate( coords[0], coords[1], distance, 3.92699 ); const topRight = getOffsetCoordinate( coords[0], coords[1], distance, 0.785398 ); const string = bottomLeft[0] + "," + bottomLeft[1] + "," + topRight[0] + "," + topRight[1]; return string; } catch (e) { console.log("error in getBoundingBox"); console.log(e); return null; } }53:T1247,geocodeByPostalMapquest = async (zip, ctryCode) => { const mapquestQualityCodeDecoder = (qualityCode) => { /* method is for debugging purposes, to provide a human readable description of the "geocoding quality code" that mapquest includes in responses. */ var chars = qualityCode.split(""); var granCode = qualityCode.substring(0, 2); var granularity, fullStreetConfidence, adminAreaConfidence, postalCodeConfidence; function getConfidenceLabel(confidenceCode) { switch (confidenceCode) { case "A": return "exact"; case "B": return "good"; case "C": return "approx"; case "X": return "n/a"; } } switch (granCode) { case "P1": granularity = "POINT"; break; case "L1": granularity = "ADDRESS"; break; case "I1": granularity = "INTERSECTION"; break; case "B1": granularity = "STREET"; break; case "B2": granularity = "STREET"; break; case "B3": granularity = "STREET"; break; case "A1": granularity = "COUNTRY"; break; case "A3": granularity = "STATE"; break; case "A4": granularity = "COUNTY"; break; case "A5": granularity = "CITY"; break; case "A6": granularity = "NEIGHBORHOOD"; break; case "Z1": granularity = "ZIP"; break; case "Z2": granularity = "ZIP_EXTENDED"; break; case "Z3": granularity = "ZIP_EXTENDED"; break; case "Z4": granularity = "ZIP"; break; } return ( "granularity: " + granularity + ". full street confidence: " + getConfidenceLabel(chars[2]) + ". admin area confidence: " + getConfidenceLabel(chars[3]) + ". postal code confidence: " + getConfidenceLabel(chars[4]) ); }; const baseUrl = "https://www.mapquestapi.com/geocoding/v1/address"; /* "5box" to improve quality of results info on 5box: https://developer.mapquest.com/documentation/geocoding-api/#single info on intlMode: https://developer.mapquest.com/documentation/geocoding-api/address/get/ */ try { const url = baseUrl + "?key=" + config.tokens.mapquest + "&intlMode=5BOX"; const postData = { location: { postalCode: zip, adminArea1: ctryCode } }; console.log("mapquest query", url, postData); const responseObj = await fetch(url, { method: "POST", body: JSON.stringify(postData) }); const jsonObj = await responseObj.json(); console.log("locations length", jsonObj.results[0].locations.length); for (let i = 0; i < jsonObj.results[0].locations.length; i++) { const qualCode = jsonObj.results[0].locations[i].geocodeQualityCode; // getting the geocoder to give you the correct coordinates is the hardest part console.log(i, jsonObj.results[0].locations[i]); console.log( "quality code:", qualCode + ". " + mapquestQualityCodeDecoder(qualCode) ); /* mapquest "quality code" used in response validation. info on quality code: https://developer.mapquest.com/documentation/geocoding-api/quality-codes/ */ if (qualCode.substring(0, 2) === "A1") { /* "A1" granularity in quality code indicates mapquest failure to find anything more specific than a country. info: https://developer-qa.mapquest.com/forum/how-detect-no-results-found */ console.log("location fails validation because low granularity"); } else if (qualCode.split("")[3] !== "A") { console.log( // The "admin area confidence" not being "exact" means mapquest isn't sure it got the country right. "location fails validation because admin area confidence not exact" ); } else if (qualCode.split("")[4] !== "A") { console.log( "location fails validation because postal code confidence not exact" ); } else if (jsonObj.results[0].locations[i].adminArea1 !== ctryCode) { console.log( // mapquest geocoder does this sometimes "location fails validation because country code in response doesn't match that in request" ); } else { return [ jsonObj.results[0].locations[i].latLng.lat, jsonObj.results[0].locations[i].latLng.lng ]; } } return null; } catch (e) { console.log(e); return null; } }54:Tbc0,countries = [ { "ctryCode": "US", "ctryName": "United States", "postalRegex": "\\d{5}(-\\d{4})?" }, { "ctryCode": "CA", "ctryName": "Canada", "postalRegex": "^(?=[^DdFfIiOoQqUu\\d\\s])[A-Za-z]\\d(?=[^DdFfIiOoQqUu\\d\\s])[A-Za-z]\\s{0,1}\\d(?=[^DdFfIiOoQqUu\\d\\s])[A-Za-z]\\d$" }, { "ctryCode": "GB", "ctryName": "United Kingdom", // "Regex": "([A-Za-z]\\d[A-Za-z]\\d[A-Za-z]{2})|([A-Za-z]{2}\\d{2}[A-Za-z]{2})" "postalRegex": "^[a-zA-Z]{1,2}[0-9][a-zA-Z0-9]? ?[0-9][a-zA-Z]{2}$" }, { "ctryCode": "DE", "ctryName": "Germany", "postalRegex": "\\d{5}" }, { "ctryCode": "FR", "ctryName": "France", "postalRegex": "\\d{5}" }, { "ctryCode": "AU", "ctryName": "Australia", "postalRegex": "\\d{4}" }, { "ctryCode": "JP", "ctryName": "Japan", "postalRegex": "\\d{3}-\\d{4}" }, { "ctryCode": "IN", "ctryName": "India", "postalRegex": "\\d{6}" }, { "ctryCode": "BR", "ctryName": "Brazil", // "Regex": "\\d{5}-\\d{3}" "postalRegex": "^\\d{5}-\\d{3}$" }, { "ctryCode": "MX", "ctryName": "Mexico", "postalRegex": "\\d{5}" }, { "ctryCode": "IT", "ctryName": "Italy", "postalRegex": "\\d{5}" }, { "ctryCode": "ES", "ctryName": "Spain", "postalRegex": "\\d{5}" }, { "ctryCode": "CN", "ctryName": "China", "postalRegex": "\\d{6}" }, { "ctryCode": "RU", "ctryName": "Russia", "postalRegex": "\\d{6}" }, { "ctryCode": "NL", "ctryName": "Netherlands", "postalRegex": "\\d{4} [A-Z]{2}" }, { "ctryCode": "SE", "ctryName": "Sweden", "postalRegex": "\\d{3} \\d{2}" }, { "ctryCode": "NO", "ctryName": "Norway", "postalRegex": "\\d{4}" }, { "ctryCode": "DK", "ctryName": "Denmark", "postalRegex": "\\d{4}" }, { "ctryCode": "FI", "ctryName": "Finland", "postalRegex": "\\d{5}" }, { "ctryCode": "SG", "ctryName": "Singapore", "postalRegex": "\\d{6}" }, { "ctryCode": "AR", "ctryName": "Argentina", "postalRegex": "^([A-HJ-NP-Z])?\\d{4}([A-Z]{3})?$" }, { "ctryCode": "ZA", "ctryName": "South Africa", "postalRegex": "^\\d{4}$" }, { "ctryCode": "KR", "ctryName": "South Korea", "postalRegex": "^\\d{5}$" }, { "ctryCode": "CH", "ctryName": "Switzerland", "postalRegex": "^(?:CH-)?\\d{4}$" }, { "ctryCode": "AT", "ctryName": "Austria", "postalRegex": "^\\d{4}$" }, { "ctryCode": "BE", "ctryName": "Belgium", "postalRegex": "^[1-9]{1}\\d{3}$" }, { "ctryCode": "PL", "ctryName": "Poland", "postalRegex": "^\\d{2}-\\d{3}$" }, { "ctryCode": "PT", "ctryName": "Portugal", "postalRegex": "^\\d{4}-\\d{3}$" }, { "ctryCode": "TR", "ctryName": "Turkey", "postalRegex": "^\\d{5}$" }, { "ctryCode": "GR", "ctryName": "Greece", "postalRegex": "^\\d{3} \\d{2}$" } ]55:[] 45:{"id":"1637b7edbfdd298d","slug":"local-temperature-history-ridgeline","title":"Local Temperature History - Draggable Ridgeline","thumbnail":"33ebd1ba7e396a65501bf3f078f96d4bf30271fe399e7070cf00bdbc4d077295","access_level":"public","create_time":"$D2022-09-24T15:11:12.785Z","update_time":"$D2026-02-19T18:53:30.933Z","view_time":null,"first_public_time":"$D2022-10-11T01:57:11.931Z","has_unpublished_edits":null,"fork":true,"stars":5,"starred":false,"owner":{"type":"team","id":"d795f993adb50e78","login":"peoplesfeelings","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7de82e3f834a86967e15bbc34aef8140ab026a3b8961da5e526242dae9bfe32a","tier":"starter_2024","bio":"","following":false},"version":1873,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ecf4f0ed7700f8d2","login":"peoplesfeelings","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7de82e3f834a86967e15bbc34aef8140ab026a3b8961da5e526242dae9bfe32a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"ecf4f0ed7700f8d2","login":"peoplesfeelings","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7de82e3f834a86967e15bbc34aef8140ab026a3b8961da5e526242dae9bfe32a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Local Temperature History - Draggable Ridgeline","cells":[{"id":0,"value":"# Local Temperature History - Draggable Ridgeline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1541,"value":"Enter a postal code to get the ridgeline chart, which shows temperature history, year-over-year. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"viewof formData = Inputs.form({\n ctry: Inputs.select(countries.sort((a,b) => (a.ctryName < b.ctryName) ? -1 : (a.ctryName > b.ctryName) ? 1 : 0), {\n label: \"Country\",\n valueof: (ctry) => {\n return ctry.ctryCode;\n },\n format: (ctry) => {\n return ctry.ctryName;\n },\n value: countries.find(ctry => ctry.ctryCode == 'US').ctryCode // starting value\n }),\n zip: Inputs.text({label: \"Postal code\"}),\n /* \n not technically a radius but that's the easiest label for end-users, \n and it's close enough because it is the radius of the circle containing the bounding box. \n */\n distance: Inputs.range([45, 105], {step: 10, label: \"Radius to look for weather stations (km)\", value: 45}), \n duration: Inputs.range([20, 100], {step: 10, label: \"Number of years\", value: 50}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1540,"value":"chartTitle = {\n if (selectedStationData) {\n return html`

${theDataType.title}

`;\n } else {\n return md` `;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1538,"value":"dragInstruction = {\n if (selectedStationData) {\n return html`\n

Grab and drag on the chart to shear the 3D shape.

\n `;\n } else {\n return md` `;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1383,"value":"viewof selectedStationId = {\n function getCount(stationId) {\n if (!dataToShow) return \"\";\n for (let i = 0; i < dataToShow.length; i++) {\n if (dataToShow[i].stationId === stationId) {\n return dataToShow[i].records.length;\n }\n }\n return \"\";\n }\n\n function stationWithMostRecords() {\n if (!dataToShow) return null;\n\n let longestCount = 0;\n let longestKey = \"\";\n dataToShow.forEach((station) => {\n if (station.records.length > longestCount) {\n longestCount = station.records.length;\n longestKey = station.stationId;\n }\n });\n return longestKey;\n }\n\n return Inputs.select(stations ? stations : [], {\n label: \"Weather station\",\n valueof: (station) => {\n return station.id;\n },\n format: (station) => {\n return \"(\" + getCount(station.id) + \" records) \" + station.name;\n },\n value: stationWithMostRecords()\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1691,"value":"viewof opacity = Inputs.range([0, 1], {step: .01, label: \"Opacity\", value: 0.67})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1845,"value":"viewof unit = Inputs.radio(new Map([[\"° Celsius\", \"C\"], [\"° Fahrenheit\", \"F\"]]), {\n value: \"F\",\n label: \"Unit of measurement\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1777,"value":"viewof allowGaps = {\n // thanks to https://observablehq.com/@nitaku/checkbox for letting me rip off this code\n // basically just a boolean-returning checkbox input with label\n let value = false;\n let label = 'Allow gaps. May show more data, but with gaps.';\n let wrapper = html``\n let check = html``\n wrapper.append(check)\n wrapper.append(label || '')\n \n check.checked = value\n \n check.addEventListener('change', (e) => {\n wrapper.value = check.checked\n wrapper.dispatchEvent(new CustomEvent('input'))\n })\n \n // we need to have a starting value\n wrapper.value = check.checked\n \n return wrapper\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1844,"value":"## About\n \n First, the notebook geolocates coordinates for the postal code. Then, it queries the Climate Data Online v2 API with the coordinates, to find weather stations near the coordinates with the kind of data we want. Finally, it queries that API for the data from those stations. \n \n Data from only one station is visualized in the chart, at a time. The station with the most data is selected, by default. You can change the selected weather station. \n \n Expanding the radius can increase the amount of data returned. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1536,"value":"## Data state","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1863,"value":"validPostalCode = {\n /*\n takes string of characters expected to match postal code regex for the selected country.\n */\n\n const regexForSelectedCtry = new RegExp(countries.find(ctry => ctry.ctryCode == formData.ctry).postalRegex);\n \n // validate\n if (typeof formData.zip != \"string\" || !regexForSelectedCtry.test(formData.zip)) {\n return null;\n } else {\n return formData.zip;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"startDate = {\n const date = new Date(endDate.getTime());\n date.setFullYear(date.getFullYear() - formData.duration);\n return date;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"dateRanges = getDateRanges(startDate, endDate, theDataSet.maxYearsPerCall)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"coords = {\n yield null;\n if (validPostalCode)\n yield await getGeocodingByPostal(formData.zip, formData.ctry);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"boundingBox = {\n if (!Array.isArray(coords)) return null;\n return getBoundingBoxSwNe(coords, formData.distance);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"stationsResponses = {\n yield null;\n yield getCdoStations(\n config.cdoDataset,\n boundingBox,\n cdoDateFormat(startDate),\n config.cdoDataType\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"stations = {\n if (!stationsResponses) return null;\n\n const combinedResults = [];\n stationsResponses.forEach((response) => {\n if (response.results) {\n combinedResults.push(...response.results);\n }\n });\n return combinedResults;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"dataResponses = {\n if (!stations || stations.length === 0) return null;\n\n yield null;\n\n yield await getAllData(dateRanges, config.cdoDataset, config.cdoDataType, getStationParams(stations));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"data = {\n if (!dataResponses) return null;\n \n return transformDataResponses(dataResponses);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1533,"value":"sortedData = {\n // cdo v2 api seems to return data sorted, generally, but i think i recall seeing unsorted data returned sometimes. \n // we make sure it's sorted here\n\n if (!data) return null;\n\n const newArr = [];\n data.forEach((stationObj) => {\n const stationObjCopy = JSON.parse(JSON.stringify(stationObj));\n stationObjCopy.records = ensureSorted(stationObjCopy.records);\n newArr.push(stationObjCopy);\n });\n return newArr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"dataToShow = {\n // apply any filters, such as trimming to the longest consecutive sequence\n\n if (!sortedData) return null;\n\n const newArr = [];\n sortedData.forEach((stationObj) => {\n const stationObjCopy = JSON.parse(JSON.stringify(stationObj));\n // if don't allow gaps\n if (!allowGaps) {\n stationObjCopy.records = trimToConsecutive(stationObjCopy.records);\n }\n newArr.push(stationObjCopy);\n });\n return newArr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"organizedData = {\n if (!dataToShow) return null;\n\n const newArr = [];\n dataToShow.forEach((stationObj) => {\n const stationObjCopy = JSON.parse(JSON.stringify(stationObj));\n stationObjCopy.records = organizeByYear(\n stationObjCopy.records,\n theDataSet.dataPointsPerYearImprecise\n );\n newArr.push(stationObjCopy);\n });\n return newArr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"selectedStationData = {\n if (!organizedData) return null;\n\n const found = organizedData.find(station => station.stationId === selectedStationId);\n\n if (!found) return null;\n \n return found.records; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1509,"value":"## Links","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1767,"value":"This notebook uses the NCEI (US National Center for Environmental Information) CDO (Climate Data Online) v2 API. Docs: https://www.ncdc.noaa.gov/cdo-web/webservices/v2\n \nThe starting point for the ridgeline code came from here: https://observablehq.com/@d3/ridgeline-plot \n \nWalk-through of draggable ridgeline code: https://observablehq.com/@peoplesfeelings/making-a-draggable-ridgeline\n\nSome country/postal code regex data came from here, but most from ChatGPT: https://gist.github.com/jamesbar2/1c677c22df8f21e869cca7e439fc3f5b\n\nTo add support for a country, we just need a a postal code regex for it. Email about country support or anything else at [peoplesfeelingscode@gmail.com](mailto:peoplesfeelingscode@gmail.com)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1042,"value":"## Ridgeline chart cells\n \nUsed for the visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1528,"value":"theDomain = {\n if (!selectedStationData) return null; \n\n /*\n an array of 2 values: the lowest Y value found (from any of the targeted years) and the highest.\n \"domain\" here refers to the argument passed to the domain parameter of the d3 scale builder when creating the Y scale.\n */\n \n const allValues = [];\n selectedStationData.forEach((yr) => {\n yr.values.forEach((r) => {\n if (r) allValues.push(r);\n });\n });\n return [d3.min(allValues), d3.max(allValues)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1527,"value":"domainLabel = {\n if (!theDomain) return null;\n\n function convertToF(val) {\n return (val * 9) / 5 + 32;\n }\n\n /*\n values returned by the API are in celsius.\n the user has a control to select celsius or fahrenheit.\n rather than applying operations to convert the actual data values, it seems better to just convert the axis tick labels.\n this cell gets used by the the D3 scale for the y axis.\n */\n\n return [\n unit === \"F\" ? convertToF(theDomain[0]) : theDomain[0],\n unit === \"F\" ? convertToF(theDomain[1]) : theDomain[1]\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1127,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1526,"value":"yAxis = (selection) => {\n const span = domainLabel[1] - domainLabel[0];\n const ticks = d3\n .range(domainLabel[0], domainLabel[1], span / 4)\n .concat(domainLabel[1]);\n const theAxis = d3\n .axisRight(lineChartYScaleLabel)\n .tickValues(ticks)\n .tickFormat((val) => {\n return Math.round(val) + \"°\" + unit;\n });\n\n // filter for only the first and last year\n const newSelec = selection.filter((d) => {\n return d.year == years[years.length - 1] || d.year == years[0];\n });\n return theAxis(newSelec);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1668,"value":"depthAxis = d3\n .axisLeft(d3.scaleLinear().range([0]))\n .ticks(1)\n .tickFormat(\"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"area = {\n return d3\n .area()\n .defined(d => d != null) \n .curve(d3.curveLinear)\n .x((d, i) => lineChartXScale(i))\n .y0(0)\n .y1(d => lineChartYScale(d));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"lineRight = {\n return (lineChartData) => {\n // get data index where values end (non-null data values for the nearest line chart may end before 12th month)\n const LastDefinedInd = lineChartData.findLastIndex((d) => !!d);\n const twoPoints = [\n [lineChartXScale(LastDefinedInd), 0],\n [\n lineChartXScale(LastDefinedInd),\n lineChartYScale(lineChartData[LastDefinedInd])\n ]\n ];\n const line = d3.line().curve(d3.curveLinear);\n return line(twoPoints);\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"lineBottom = () => {\n let twoPoints;\n\n let lastIndex = theDataSet.dataPointsPerYearImprecise - 1;\n\n // any stuff specific to the dataset's data points per year\n switch (theDataSet.dataPointsPerYearImprecise) {\n case 12:\n if (config.ridgeline.duplicateFirstMonthForMonthly) {\n // jan 1 duplicated for end of year\n lastIndex++;\n }\n break;\n }\n\n twoPoints = [\n [lineChartXScale(0), 0],\n [lineChartXScale(lastIndex), 0]\n ];\n const line = d3.line().curve(d3.curveLinear);\n return line(twoPoints);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"lineChartYScale = {\n /* \n the y of the line graphs\n */\n if (!selectedStationData) return null;\n \n return d3\n .scaleLinear()\n .domain(theDomain)\n .range([0, -config.ridgeline.lineChartHeight]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1523,"value":"lineChartYScaleLabel = {\n /* \n the y of the line graphs\n */\n if (!selectedStationData) return null;\n \n return d3\n .scaleLinear()\n .domain(domainLabel)\n .range([0, -config.ridgeline.lineChartHeight]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1060,"value":"lineChartXScale = {\n if (!years) return null;\n\n let lastIndex = theDataSet.dataPointsPerYearImprecise - 1;\n\n if (\n theDataSet.dataPointsPerYearImprecise === 12 &&\n config.ridgeline.duplicateFirstMonthForMonthly\n ) {\n lastIndex++;\n }\n\n return d3\n .scaleLinear()\n .domain([0, lastIndex])\n .range([\n config.ridgeline.margin.left,\n width - config.ridgeline.margin.right\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"years = {\n /*\n number of years to be represented in chart\n */\n if (!selectedStationData) return null;\n\n return selectedStationData.map(year => year.year);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"shearXScaled = {\n // shear x as a positive or negative value centered around 0, within specified range in either direction.\n const pos = config.ridgeline.shearXExtent * shear[0];\n const posZeroCentered = pos - config.ridgeline.shearXExtent / 2;\n return posZeroCentered;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1012,"value":"shearYScaled = {\n // shear y as a positive or negative value centered around a 0, with a specified range in either direction\n const pos = shear[1] * yearsHeight;\n const posZeroCentered = pos - yearsHeight / 2;\n \n return posZeroCentered;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"mutable shear = config.ridgeline.startingShear;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"depthAngleXScale = {\n /*\n adjustment for 3d shear control.\n this x offset is determined by the year and the 3d shear control\n \n depth angle is the shear angle\n */\n if (!years) return null;\n return d3\n .scalePoint()\n .domain(years)\n .range([shearXScaled * -1, shearXScaled]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"depthAngleYScale = {\n /* \n years\n ascending order, top to bottom \n \n depth angle is the shear angle\n */\n if (!years) return null;\n \n return d3\n .scalePoint()\n .domain(years)\n .range([\n verticalCenter - shearYScaled,\n verticalCenter + shearYScaled\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"verticalCenter = {\n /* \n vertical pivot point for shearing\n */\n return config.ridgeline.margin.top + yearsHeight / 2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"yearsHeight = {\n if (!selectedStationData) return null;\n /* \n height of space for arraying years\n */\n return selectedStationData.length * config.ridgeline.yearHeight;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"height = {\n if (!yearsHeight) return null;\n /* \n full svg height\n */\n return (\n yearsHeight + config.ridgeline.margin.top + config.ridgeline.margin.bottom\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1735,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"## Back end functions\nFor data retrieval and processing.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":905,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1516,"value":"ensureSorted = (recArr) => {\n // sort data records by date\n return recArr.sort((rec1, rec2) => {\n const date1 = new Date(rec1.date);\n const date2 = new Date(rec2.date);\n if (date1 > date2) {\n return 1;\n } else if (date1 < date2) {\n return -1;\n } else {\n return 0;\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"getCdoData = async (startDateStr, endDateStr, offset, datasetId, dataTypeId, stationParamsStr) => {\n /*\n queries the CDO v2 API data endpoint\n */\n const baseUrl = config.cdoProxy + \"/data\";\n const url = baseUrl+\"?datasetid=\"+datasetId+\"&limit=1000\"+\"&startdate=\"+startDateStr+\"&enddate=\"+endDateStr+stationParamsStr+\"&datatypeid=\"+dataTypeId + (offset ? \"&offset=\"+offset : \"\");\n try {\n return fetch(url);\n } catch(e) {\n console.log('e', e);\n return null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"getNextCdoOffset = (response) => {\n /*\n checks metadata of a CDO v2 API response. returns offset for next query or 0 if no further queries needed.\n */\n if (response.metadata && response.metadata.resultset.offset -1 + response.metadata.resultset.limit < response.metadata.resultset.count) {\n return response.metadata.resultset.offset + response.metadata.resultset.limit;\n } else {\n return 0;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"getStationParams = (stationResults) => {\n /*\n takes an array of CDO v2 API weather station objects.\n returns a string of url param keys and values for the list of stations, usable in a CDO v2 API request.\n */\n let listStr = \"\";\n \n for (let i = 0; i < stationResults.length; i++) {\n listStr += \"&stationid=\" + stationResults[i].id;\n }\n return listStr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"cdoDateFormat = (date) => {\n /*\n takes a JS Date object.\n returns a string formatted to be a CDO v2 API parameter value\n */\n try {\n const year = date.getFullYear();\n const month2Char = (\"0\" + (date.getMonth() + 1)).slice(-2);\n const day2Char = (\"0\" + date.getDate()).slice(-2);\n return year + \"-\" + month2Char + \"-\" + day2Char;\n } catch (e) {\n console.log(\"exception in formatDate. date: \", date);\n console.log('typeof date', typeof date);\n console.log('e: ', e);\n return null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1708,"value":"getGeocodingByPostal = async (zip, ctry) => {\n /*\n takes string of characters expected to match postal code.\n returns array of 2 numbers: latitude and longitude\n */\n\n // const mapquestResult = await geocodeByPostalMapquest(zip, ctry);\n const result = await geocodeByPostalOSM(zip, ctry);\n\n if (result) {\n return result;\n } else {\n return 'coordinates for postal code not found';\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1852,"value":"geocodeByPostalOSM = async (zip, ctryCode) => {\n try {\n const url = `https://nominatim.openstreetmap.org/search?format=json&postalcode=${encodeURIComponent(zip)}&countrycodes=${encodeURIComponent(ctryCode)}&addressdetails=1`;\n const resp = await fetch(url, {\n headers: { \"User-Agent\": \"observable-geocoder\" }\n });\n const results = await resp.json();\n if (!results.length) return null;\n\n // find first match that exactly matches country code\n const match = results.find(r => r.address && r.address.country_code?.toUpperCase() === ctryCode.toUpperCase());\n if (!match) return null;\n\n return [parseFloat(match.lat), parseFloat(match.lon)];\n } catch (e) {\n console.log(e);\n return null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1514,"value":"## Static stuff","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":572,"value":"endDate = new Date() ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1512,"value":"theDataType = theDataSet.dataTypes.find(d=>d.id===config.cdoDataType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1634,"value":"theDataSet = cdoDatasets.find(d=>d.id===config.cdoDataset)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1511,"value":"/*\n This notebook is meant to facilitate easily forking it to produce different kinds of CDO v2 API ridgelines or other charts.\n This cell is kind of like a data model that represents CDO v2 API data structures, for the purposes of such charts. \n The idea is that additional datasets and/or data types can be added here, and a future version of this chart could \n even allow users to select between different datasets and data types.\n*/\ncdoDatasets = [\n {\n id: \"GSOM\",\n maxYearsPerCall: 10,\n nonconsecutiveThreshold: 1000 * 60 * 60 * 24 * 34, // 34 days in milliseconds\n dataPointsPerYearImprecise: 12,\n dataTypes: [\n {\n id: \"TAVG\",\n note: \"Values provided in degrees, Celsius.\",\n title: \"Monthly tempurature averages\"\n }\n ]\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"config = ({\n cdoDataset: \"GSOM\",\n cdoDataType: \"TAVG\",\n rateSleep: 500, // ms to wait until trying API call again, if hitting rate limit\n ridgeline: {\n duplicateFirstMonthForMonthly: true,\n shearXExtent: 100, // CSS pixels, horizontal space for the 3d shape to move within\n lineChartHeight: 140,\n margin: {\n top: 150,\n right: 80,\n bottom: 40,\n left: 85\n },\n nonPrimaryLineColor: 'lightgrey',\n startingShear: [1,1],\n yearHeight: 10\n },\n cdoProxy: \"https://yogrkql6wsoxg47x7vlhmg4qta0ogysd.lambda-url.us-east-1.on.aws/\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1785,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W55","stdlib":"1"}} 46:"$45:body"