2d:null 2e:["$","title",null,{"children":"USGS Water Gage Data 2025 | E. Kerney | Observable"}] 33:T4a3,getStationData = async (stationList) => { const urlStart = 'https://waterservices.usgs.gov/nwis/iv/?format=json&sites=', urlEnd = '¶meterCd=00060,00065&siteStatus=all'; let gageList = []; for(let d of stationList) { const data = await d3.json((urlStart + d + urlEnd), d3.autoType); const {sourceInfo, values, variable} = data.value.timeSeries[0]; const {value, dateTime} = data.value.timeSeries[0].values[0].value[0]; const {latitude, longitude, srs} = data.value.timeSeries[0].sourceInfo.geoLocation.geogLocation; const {sourceInfo: sourceInfo2, variable: variable2} = data.value.timeSeries[1]; const gageHeight = data.value.timeSeries[1].values[0].value[0].value; gageList.push({ siteName: sourceInfo.siteName, siteCode: sourceInfo.siteCode[0].value, siteFlow: Number(value), flowUnits: variable.unit.unitCode, gageHeight: Number(gageHeight), heightUnits: variable2.unit.unitCode, dateTime: dateTime, huc: sourceInfo.siteProperty[1].value, lat: Number(latitude), lon: Number(longitude), crs: srs }); } return gageList; }34:Tc37,getStationStatus = async (stations) => { let stationData = []; for (let z in stations) { const urlStart = 'https://waterservices.usgs.gov/nwis/stat/?format=rdb&sites=', urlEnd = '&statReportType=daily&statTypeCd=all¶meterCd=00060'; const rawData = await fetch(urlStart + stations[z].siteCode + urlEnd); const dataLines = (await rawData.text()).split("\n"); let dailyStats = {"mean":0}; //Need to find todays date to compare current discharge level against const today = new Date(), monthNum = (today.getMonth() + 1), dayNum = today.getDate(), yearNum = today.getFullYear(); const usgsLabels = {"p05":'LOW', "p10":'MUCH BELOW NORMAL', "p20":'BELOW NORMAL', "p25":'BELOW NORMAL', "p50":'NORMAL', "p75": 'NORMAL', "p80":'ABOVE NORMAL', "p90":'ABOVE NORMAL', "p95":'MUCH ABOVE NORMAL'}; //start at the January 1st to match date to today's date, line 50 in the tab separated text file for (let x=49;dailyStats.mean==0;x++) { const dataTabs = dataLines[x].split("\t"); dailyStats.mean = (dataTabs[5] == monthNum && dataTabs[6] == dayNum) ? (dataTabs[14]) : 0; dailyStats = dailyStats.mean != 0 ? { "mon":dataTabs[5], "day":dataTabs[6], "maxYear": dataTabs[10], "maxFlow": dataTabs[11], "minYear": dataTabs[12], "minFlow": dataTabs[13], "mean": dataTabs[14], "p05": dataTabs[15], "p10": dataTabs[16], "p20": dataTabs[17], "p25": dataTabs[18], "p50":dataTabs[19], "p75":dataTabs[20], "p80":dataTabs[21], "p90":dataTabs[22], "p95":dataTabs[23]} : dailyStats; } //find percentile current flow console.log(stations[z].gagePercent) for (let x=7, curFlow=stations[z].siteFlow; x < Object.entries(dailyStats).length; x++) { console.log('current -', curFlow, 'stat - ', Object.entries(dailyStats)[x][1]) if (curFlow < Object.entries(dailyStats)[x][1] && x==7) { console.log('Less than low value') stations[z].gagePercent = Object.entries(dailyStats)[x][0]; stations[z].gageStatus = usgsLabels[stations[z].gagePercent]; break; } else if (Object.entries(dailyStats)[x][1].length == 0){ console.log('empty') const inc = x === Object.entries(dailyStats).length - 1 ? 0 : 1; console.log(Object.entries(dailyStats).length, Object.entries(dailyStats)[x][1], inc) if (curFlow <= Object.entries(dailyStats)[x+inc][1] && !('gagePercent' in stations[z])){ console.log('found value') stations[z].gagePercent = Object.entries(dailyStats)[x][0]; stations[z].gageStatus = usgsLabels[stations[z].gagePercent]; } } else if (curFlow >= Object.entries(dailyStats)[x][1]){ console.log('Larger than') stations[z].gagePercent = Object.entries(dailyStats)[x][0]; stations[z].gageStatus = usgsLabels[stations[z].gagePercent]; } console.log('percent', stations[z].gagePercent); } stationData.push({"ID": stations[z].siteCode, "stationInfo": stations[z], "dailyStats": dailyStats}); }; return stationData; }35:T6a9,function getGage (gage) { const props = gage.properties; const statCol = {"p05":'red', "p10":'orangered', "p20":'orange', "p25":'orange', "p50":'green', "p75": 'green', "p80":'blue', "p90":'darkblue', "p95":'#00034d'}; const statBor = {"p05":'10px solid red', "p10":'10px solid orangered', "p20":'10px solid orange', "p25":'10px solid orange', "p50":'10px solid green', "p75": '10px solid green', "p80":'10px solid blue', "p90":'10px solid darkblue', "p95":'10px solid #00034d'}; const divStyle = [{'textAlign':'center'}, {'fontFamily':'Arial, Helvetica, sans-serif'},{'background-color':'#1c1c1c'},{'margin':'0px'},{'padding':'10px'}, {'borderRadius': '20px'}]; const txtStyles = [[{'color':'#0069cc'},{'margin':'0px'},{'lineHeight':'30px'}], [{'color':'#045c72'},{},{'margin':'0px'}, {'lineHeight':'15px'}], [{'color':statCol[props.stationInfo.gagePercent]},{},{'margin':'4px'}, {'lineHeight':'32px'}], [{'color':'#8fbeff'},{'fontSize':'20px'},{'margin':'0px'},{'lineHeight':'25px'}], [{'color':'#8fbeff'},{'fontSize':'18px'},{'margin':'2px'},{'lineHeight':'25px'}]]; const txtSizes = ['h3','p','h2','p','p']; const txt = [props.info, (`Current Status for USGS Gage: ${props.ID}`),props.stationInfo.gageStatus, (`FLOW: ${props.stationInfo.siteFlow} cfs - HEIGHT: ${props.stationInfo.gageHeight} ft`), (`Daily Mean: ${props.dailyStats.mean} cfs - Min: ${props.dailyStats.minFlow} cfs - Max: ${props.dailyStats.maxFlow} cfs`) ]; const widget1 = new Widget(props.ID, divStyle); widget1.addBorder(statBor[props.stationInfo.gagePercent]); txtStyles.forEach( (d,i) => widget1.addText(txtSizes[i],txt[i],d) ); return widget1.div; }36:[] 31:{"id":"e62973dd584b25ce","slug":"usgs-water-gage-data-2025","title":"USGS Water Gage Data 2025","thumbnail":"027dfd79c298652d110b7a120a1347d3a90bdd95c4b938e9c1695766e141b66a","access_level":"public","create_time":"$D2024-10-16T02:41:14.192Z","update_time":"$D2025-03-24T22:11:45.939Z","view_time":null,"first_public_time":"$D2024-10-17T19:20:36.097Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6773b9d940faa10e","login":"location-artistry","name":"E. Kerney","avatar_url":"https://avatars-next.observableusercontent.com/6a41b9491e318e4761cdb6210d6adb0880ed593495f2090cabed95169e3165f2","tier":"starter_2024"},"version":1378,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06ed914427a4c051","login":"location-artistry","name":"E. Kerney","avatar_url":"https://avatars-next.observableusercontent.com/6a41b9491e318e4761cdb6210d6adb0880ed593495f2090cabed95169e3165f2","tier":null}],"members":[{"type":"individual","id":"06ed914427a4c051","login":"location-artistry","name":"E. Kerney","avatar_url":"https://avatars-next.observableusercontent.com/6a41b9491e318e4761cdb6210d6adb0880ed593495f2090cabed95169e3165f2","tier":null,"role":"editor"},{"type":"team","id":"6773b9d940faa10e","login":"location-artistry","name":"E. Kerney","avatar_url":"https://avatars-next.observableusercontent.com/6a41b9491e318e4761cdb6210d6adb0880ed593495f2090cabed95169e3165f2","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"USGS Water Gage Data 2025","cells":[{"id":0,"value":"# USGS Water Gage Data 2025","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"Several Years ago I created a Notebook to explore USGS Water Gage Data\nThis is an update for 2025","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"- USGS Water Data Gage project \n\t- ObservableHQ notebook \n\t- Review USGS Water Data APIs \n\t- Refactor processed GeoJSON endpoint \n\t- Create new widgets \n\t- Show data on DeckGL map\n\t- experiment with different visualizations DeckGL \n\t- D3 dataviz hexagraph ???","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"We will be examining all of the USGS stream gages in the St. Joseph River Watershed, which spans Michigan/Indiana. The St. Joseph River is the X largest drainage to Lake Michigan, and while primarily agricultural, contains the urban areas of South Bend and St. Joseph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":287,"value":"### List of Station IDs\nSingle Station ID for quick testing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"stationIDs = [\"04096405\",\"04096515\",\"04097500\",\"040975299\",\"04097540\",\"04099000\",\"04100500\",\"04101000\",\"04101500\",\"04101535\",\"04101800\",\"04102500\",\"04099750\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"singleStationID = [\"04101535\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"Iterate through station IDs and create record for each station","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":198,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"Iterate through additional station records and query USGS daily stats for each station. Utilize stats to determine current gage status and percentile","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"Intermediate cell with Station record data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"getStationResponse = getStationData(stationSelect == \"Single Station\" ? singleStationID : stationIDs)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"POC showing station record and status data from both endpoints","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"stationsStatusResult = getStationStatus(getStationResponse)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"## Let's Get Spatial","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":323,"value":"getStationsFeatureCollection = (data) => {\n const geo = new FeatureCollection('USGS Gaging Station Features');\n data.forEach(d => {\n console.log(d);\n const gp = new GeoPoint(d.ID,[d.stationInfo.lon,d.stationInfo.lat],d);\n [gp.properties.source, gp.properties.info, gp.properties.status] = \n ['USGS', d.stationInfo.siteName, d.stationInfo.gageStatus]\n console.log(gp);\n geo.fPush(gp);\n });\n return geo;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"These are some JS Classes that I created several years ago. Not necessarily the best method for creating a GeoJSON FeatureCollection but using them here since they quickly format the data into GeoJSON without needing additional work :)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":340,"value":"stationFeatureCollection = getStationsFeatureCollection(stationsStatusResult)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"function* drawWidgets (data) {\n let cont = DOM.element('div', { style: `width:600px;` });\n yield cont;\n data.features.forEach(d => cont.appendChild(getGage(d)));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"viewof stationSelect = Inputs.radio([\"Single Station\", \"All Stations\"], {label: \"Select one\", value: \"All Stations\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1367,"value":"fullscreenGage = htl.html``\n// THANKS MIKE BOSTOCK!\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"drawWidgets(stationFeatureCollection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"This is the first version of DeckGL I was working with in ObservableHQ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":384,"value":"// deck = require('deck.gl@6.2.3/deckgl.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"deck = require.alias({\n h3: {},\n s2Geometry: {}\n})('deck.gl@8.4.1/dist.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"mapboxgl = require('mapbox-gl@~0.50.0/dist/mapbox-gl.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"deckglInit = {\n// const container = html`

`;\n// yield container;\n// new deck.DeckGL({\n// container,\n// map: mapboxgl,\n// mapboxApiAccessToken: 'pk.eyJ1IjoiZXJpY2tlcm5leSIsImEiOiJja2FjbTNiMXcwMXp1MzVueDFjdDNtcW92In0.LW0qdB-2FmA3UK51M67fAQ',\n// mapStyle: 'mapbox://styles/mapbox/dark-v9',\n// longitude: -85.4,\n// latitude: 41.9,\n// zoom: 8,\n// // zoom: 11,\n// pitch: 30,\n// bearing: -30,\n// layers: [ polyLayer(selectedBasin, [161, 242, 255, 40], [255, 255, 255, 100], 10), \n// polyLayer(stJoeRiverPoly, [0, 4, 222, 160], [0, 4, 222, 160], 100), \n// pointLayer(stationFeatureCollection, 1000)]\n// });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"This version of the map wouldn't render with the updated DeckGL library ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1305,"value":"fullscreen = htl.html``\n// THANKS MIKE BOSTOCK!","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"deckgl = {\n const height = Math.ceil(width * screen.height / screen.width);\n const container = html`

`;\n yield container;\n new deck.DeckGL({\n container,\n map: mapboxgl,\n mapboxApiAccessToken: mapBoxToken,\n mapStyle: 'mapbox://styles/mapbox/dark-v9',\n controller: true,\n initialViewState: { longitude: -85.4, latitude: 41.9, zoom: 8, pitch: 30, bearing: -30 },\n layers: [ polyLayer(selectedBasin, 'basin', [161, 242, 255, 40], [255, 255, 255, 60], 10), \n polyLayer(stJoeRiverPoly, 'river', [0, 4, 222, 180], [0, 4, 222, 180], 500), \n pointLayer(stationFeatureCollection, 'stations', 3000)]\n });\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"pointLayer = (geoJSONdataSource, id, radius) => new deck.GeoJsonLayer({\n id: id,\n data: geoJSONdataSource,\n stroked: true,\n filled: true,\n pickable: true,\n getRadius: radius,\n getPosition: d => d.geometry.coordinates,\n getFillColor: d => { \n const s = d.properties.status;\n return s == 'LOW' ? [252, 3, 3, 180] \n : s == 'MUCH BELOW NORMAL' ? [255, 85, 0, 180] \n : s == 'BELOW NORMAL' ? [255, 162, 0, 210]\n : s == 'NORMAL' ? [94, 255, 0, 180]\n : s == 'ABOVE NORMAL' ? [0, 42, 255, 180]\n : s == 'MUCH ABOVE NORMAL' ? [14, 0, 122, 180]\n : [150, 150, 150, 180]\n }\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"stJoeBasin = d3.json((\"https://gisagocss.state.mi.us/arcgis/rest/services/OpenData/hydro/MapServer/21/query?where=HUC8%20%3D%20'04050001'&outFields=AreaAcres,AreaSqKm,HUC8,Name&outSR=4326&f=geojson\"), d3.autoType);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"riverBasin = (huc8) => d3.json((`https://gisagocss.state.mi.us/arcgis/rest/services/OpenData/hydro/MapServer/21/query?where=HUC8%20%3D%20'${huc8}'&outFields=AreaAcres,AreaSqKm,HUC8,Name&outSR=4326&f=geojson`), d3.autoType);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"selectedBasin = riverBasin('04050001')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"polyLayer = (geoJSONdata, id, fillColor, lineColor, lineWidth, onHover) => new deck.GeoJsonLayer({\n id: id,\n data: geoJSONdata,\n stroked: true,\n filled: true,\n pickable: true,\n getFillColor: fillColor,\n getLineColor: lineColor,\n getLineWidth: lineWidth,\n lineWidthMinPixels: 1,\n onHover: onHover\n});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"riverPoly = (param) => d3.json((`https://gisagocss.state.mi.us/arcgis/rest/services/OpenData/hydro/MapServer/17/query?where=name%20%3d%20'${param}'&outFields=NAME,OBJECTID&outSR=4326&f=geojson`), d3.autoType);","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"Added OBJECTID field to determine if OBJECTID number follows downstream position. Did not need to use outFields=* to get ID","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":583,"value":"stJoeRiverPoly = riverPoly('Saint Joseph River')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"d3.extent(stJoeRiverPoly.features.map(d => d.properties.OBJECTID))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"colorScale = {\n // Convert from height to RGB values\nconst extent = d3.extent(stJoeRiverPoly.features.map(d => d.properties.OBJECTID))\n const linearScale = d3.scaleLinear().domain(extent).range([1, 0]);\n return (height) => {\n const color = d3.color(d3.interpolatePuRd(linearScale(height)));\n return [color.r, color.g, color.b];\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"stJoeRiverPoly.features.map(d => colorScale(d.properties.OBJECTID))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"multiple containers was causing render problems, so switched to getMap function example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":713,"value":"deckgl2 = {\n const container = html`

`;\n yield container;\n new deck.DeckGL({\n container: container,\n map: mapboxgl,\n mapboxApiAccessToken: mapBoxToken,\n mapStyle: 'mapbox://styles/mapbox/dark-v9',\n controller: true,\n initialViewState: { longitude: -85.4, latitude: 41.9, zoom: 8, pitch: 30, bearing: -30 },\n layers: [ \n polyLayer(\n stJoeRiverPoly, \n 'stJoeRiver', \n (d => colorScale(d.properties.OBJECTID)), \n (d => colorScale(d.properties.OBJECTID)),\n 1000,\n (() => null)\n )]\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"## hover tooltip\nTesting out some tooltip examples here. I think that a hover interaction is smooth and a nicer user experience, also gets the information more quickly than needing a click. This helps us out as we explore the data. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":742,"value":"function getTooltipTest({object}) {\n console.log(object, object.message)\n return object && object.message;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"#### We need a container div now for the hover tooltip","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":770,"value":"deckContainer3 = html `

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"deckgl3 = {\n return new deck.DeckGL({\n container: deckContainer3,\n map: mapboxgl,\n mapboxApiAccessToken: mapBoxToken,\n mapStyle: 'mapbox://styles/mapbox/dark-v9',\n controller: true,\n initialViewState: { longitude: -85.4, latitude: 41.9, zoom: 8, pitch: 30, bearing: -30 },\n layers: [ \n polyLayer(\n stJoeRiverPoly, \n 'stJoeRiver', \n (d => colorScale(d.properties.OBJECTID)), \n (d => colorScale(d.properties.OBJECTID)),\n 1000,\n getOnHover(toolTip3)\n )]\n });\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"tooltip must have a named div/container to have access to the querySelector method. This attaches the tooltip and the following onHover function to this extra div that appears on top of the map container.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":784,"value":"getOnHover = (tooltipDiv) => {\n return function(info) {\n const {x, y, object} = info;\n // console.log(object);\n if (object) {\n tooltipDiv.style.top = `${y}px`;\n tooltipDiv.style.left = `${x}px`;\n tooltipDiv.innerHTML = `\n

${object.properties.OBJECTID}

\n `;\n } else { \n tooltipDiv.innerHTML = '';\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1213,"value":"### Tooltip funtimes\nWorking to create a completely generic tooltip succeeded!\nConvert tooltip to a function that returns a queryselector with a container as argument \nPass named tooltip to onHover function and use as attached div for hover info!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1190,"value":"getTooltip = (cont) => cont.querySelector('#tooltip')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"toolTip3 = getTooltip(deckContainer3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"## KEY INSIGHT \n- Using multiple separate map containers was causing issues\n- This was not resolved using a function to create the map\n- Conducted some exploration of the observable core library and its utilization of DOM elements\n- The only issue was with naming the \"container\" property for the deckGL map instance\n- Once the key was added the issue was resolved!\n- Lesson that always naming deck properties will resolve some potentially tricky bugs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1164,"value":"### getDeckGLMap()\nThis is the final version of the getDeckGL() function. \nThe layers, view and container are all passed in dynamically. \ngetOnHover() allows us to specify the same container for the tooltip and the mapContainer so that the entire process is parameterized. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1015,"value":"getDeckGLMap = (layers, initialViewState, cont) => {\n return new deck.DeckGL({\n container: cont,\n map: mapboxgl,\n mapboxApiAccessToken: mapBoxToken,\n mapStyle: 'mapbox://styles/mapbox/dark-v10',\n layers: layers,\n initialViewState: initialViewState,\n controller: true\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"deckContainer4 = html `

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1235,"value":"toolTip4 = getTooltip(deckContainer4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1181,"value":"getDeckGLMap([ \n polyLayer(\n stJoeRiverPoly, \n 'stJoeRiver', \n (d => colorScale(d.properties.OBJECTID)), \n (d => colorScale(d.properties.OBJECTID)),\n 1000,\n getOnHover(toolTip4)\n )]\n , { longitude: -84.4, latitude: 41.9, zoom: 8, pitch: 30, bearing: -30 }, deckContainer4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1238,"value":"### Final getDecl","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":805,"value":"### Stylesheets needed to show hover div tooltip \nCourtesy of [@mkandalf](https://observablehq.com/@mkandalf)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":792,"value":"html `\n\n(tooltip stylesheets)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":812,"value":"## Spatial Operations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":816,"value":"In order to provide additional status visualization for the river segments, we will need to combine the gaging stations with each segment. In the last step we determined that the objectIDs do NOT follow sequential order from up to downstream, so we will not be able to classify all of the sections until the next station. A station will be spatially joined with the river segment it intersects to provide the status value. This will leave additional holes in the river mainstem, since we are looking for an entirely automated process of stations and segment visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":820,"value":"### Geoprocessing Library?\nOur first goto option would be turfJS, an excellent and well-utilized spatial processing library for Javascript. \nLet's try something different here though, H3geo. H3 is a hexagonal representation of the earth's surface. It should allow us to do some quick index based joins, and give nice data viz with the DeckGL map. \nImport H3 first","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":826,"value":"h3 = require(\"h3-js@4.0.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"Test h3.latLngToCell with one station Point Feature","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":835,"value":"h3.latLngToCell(\n stationFeatureCollection.features[0].geometry.coordinates[1], \n stationFeatureCollection.features[0].geometry.coordinates[0], \n 9\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"h3Poly = h3.polygonToCells(stJoeRiverPoly.features[1].geometry.coordinates, 9)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"h3PolyTest = {\n let polyJSON = {};\n h3Poly.forEach(d => polyJSON[d] = 0)\n return polyJSON\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"h3Layer = (id, data, getFillColor, pickable) => new deck.H3HexagonLayer({\n id: 'H3HexagonLayer',\n data: data,\n extruded: true,\n // getHexagon: d => d.hex,\n getFillColor: d => [255, (1 - d.count / 500) * 255, 0],\n elevationScale: 20,\n pickable: pickable\n // getElevation: d => d.count,\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"### Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":327,"value":"class FeatureCollection {\n constructor(meta) {\n this.type = 'FeatureCollection';\n this.metadata = meta;\n this.features = [];\n }\n geoType() { try {return this.features[0].geometry.type}\n catch {return \"It doesn't appear their are any features yet...\"} }\n fCount() {return this.features.length};\n fProps() {try {return this.features[0].properties}\n catch {return \"It doesn't appear their are any features yet...\"} }\n fPush(feature) {\n try { this.features.push(feature);\n return `Added Feature Number ${this.fCount()}`; }\n catch { return \"Cannot add ${feature} to Feature Collection\"} }\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"class Feature {\n constructor(id) {\n this.type = 'Feature';\n this.properties = {'ID':id,'label':'','info':'','status':'','val':-1,'units':''};\n }\n id() {return this.properties.ID}\n info() {return this.properties}\n addProp(name,value) {\n try {\n this.properties[name] = value;\n return (`${name}: ${value} added to Feature ID: ${this.id()}`); }\n catch { (`Could NOT add ${name}: ${value}!`) }\n }\n addProps(arr) {\n try { arr.forEach(d => this.properties[d[0]] = d[1])}\n catch { return (`Could NOT add ${arr} to ${this.id()}`) }\n }\n};\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"class GeoPoint extends Feature {\n constructor(id,[lon,lat],props = {}) {\n super(id);\n this.properties.EPSG = 4326, this.properties.source = '', this.properties.crs = 'WGS 84';\n this.geometry = {'type':'Point','coordinates':[lon,lat]};\n Object.entries(props).forEach(([d,i]) => (this.properties[d] = i));\n } \n geo() {return this.geometry.coordinates}\n crs() {return [(`EPSG:${this.properties.EPSG}`),this.properties.crs]}\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"Additional functions from previous notebook","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"class Widget {\n constructor(id, styles, clsName) {\n this.div = document.createElement(\"DIV\");\n this.type = 'Widget';\n this.div.id = id;\n this.div.className = clsName;\n styles != null ? styles.forEach(d => this.div.style[Object.keys(d)]=Object.values(d)) : '';\n }\n type() {return this.type};\n //id() {return this.div.id};\n \n addText(size, txt, styles) {\n this.text = document.createElement(size);\n this.text.innerText = txt; \n styles != null ? styles.forEach(d => this.text.style[Object.keys(d)]=Object.values(d)) : '';\n this.div.appendChild(this.text);\n }\n addBorder(styles) {\n this.div.style.border = styles;\n }\n addList(type, txt, styles) {\n //styles != null ? this.div.style = styles : '';\n txt.forEach(d => {\n const node = document.createElement(type);\n node.appendChild(document.createTextNode(d));\n styles != null ? styles.forEach(d => node.style[Object.keys(d)]=Object.values(d)) : '';\n this.div.appendChild(node);\n });\n }\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"mapBoxToken = 'pk.eyJ1IjoiZXJpY2tlcm5leSIsImEiOiJja2FjbTNiMXcwMXp1MzVueDFjdDNtcW92In0.LW0qdB-2FmA3UK51M67fAQ'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"