2d:null 2e:["$","title",null,{"children":"JavaScript Classes in Observable | E. Kerney | Observable"}] 33:[] 31:{"id":"4670a81a0bee7e3a","slug":"javascript-classes-in-observable","title":"JavaScript Classes in Observable","thumbnail":"fe3487fb9fb39ec98d8a5e684b5764696d0f8abadcec8ea8c957c8cd6e8013c6","access_level":"public","create_time":"$D2021-01-31T17:30:05.247Z","update_time":"$D2021-04-22T02:09:11.108Z","view_time":null,"first_public_time":"$D2021-02-13T01:03:54.545Z","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":813,"publish_version":813,"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"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"JavaScript Classes in Observable","cells":[{"id":0,"value":"md`# JavaScript Classes in Observable\nPleased to see that this is possible in Observable! \nClass is defined as its own cell and then can be referenced in another cell`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"md`Example data fetched from custom Purple Air endpoint`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"data = {\n const dataUrl = (`https://purpleairwidget.firebaseapp.com/purpleAirData/44439`);\n const dataFetch = d3.json(dataUrl, d3.autoType);\n return dataFetch;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"md`## Class Feature\nBase class for individual data records. \nFollows structure of GeoJSON without geometry property.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"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}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"// Feature is passed ID as argument\nf = new Feature('PNC-ST-50')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"f.type","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"f.id()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"f.info()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"f.addProp('stat','10 mg/L')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`## Class GeoPoint extends Feature\nGeoPoint inherited from Feature Class. \nAdds geometry property to match GeoJSON formatting. \nAlso adds EPSG, source, and crs fields to this.properties.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"class GeoPoint extends Feature {\n constructor(id,[lon,lat]) {\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 } \n geo() {return this.geometry.coordinates}\n crs() {return [(`EPSG:${this.properties.EPSG}`),this.properties.crs]}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"// GeoPoint aka gp, is passed id and [lon,lat] coordinates as an array\ngp = new GeoPoint(44436,[-85,42])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"gp.crs()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"gp.geo()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"// addProp method adds a key:value pair to this.properties\ngp.addProp('turbFNU',5.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"// addProps add multiples properties in an arrays of [key,value] arrays\n{\n const arr = [['DOmgl',7.5],['tempF',72]]\n gp.addProps(arr);\n return gp\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md`## Class FeatureCollection\nFeatureCollection is a Class modelled after a GeoJSON Feature Collection.\nIt is constructed as an array of Features, which could be GeoPoint, GeoLine, or GeoPoly.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"geo = new FeatureCollection('This is a test of the Feature Collection Service!')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"geo.fCount()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"geo.fPush(gp)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"// could add a method to FeatureCollection that allows direct consumption of a GeoJSON","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"md`### Programatically create FeatureCollection via JSON data endpoint \nDevelop a separate Class -> **Data** \nData will injest a JSON endpoint, search for properties such as: 'results' or activities\nEnd result is a FeatureCollection object from the array of records located in data! \nAlso look for: 'lat,Lat,latitude,Latitude etc...' to create each feature geometry` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"data2 = {\n const url = (`https://www.purpleair.com/json?show=2045`);\n const type = 'json'\n const data = d3[type](url, d3.autoType);\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"data3 = new Data(`https://www.purpleair.com/json?show=2045`,'json')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"data3.properties()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"{\n let arr = []\n for(let x in await data3.data) {\n arr.push(x)\n }\n return arr;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"{\n return await Object.entries(data3.data)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"data3.data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"data3.test()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"class Data {\n constructor(url, format) {\n this.data = d3[format](url, d3.autoType)\n }\n async test() {\n const check = ['results','activities'];\n let keys = Object.keys(await this.data)\n //keys.forEach();\n keys.forEach(d => \n // arr.forEach(d => this.properties[d[0]] = d[1])\n const found = keys.some(r => check.includes(r))\n return found;\n \n }\n async properties() {\n return new Promise((resolve, reject) => {resolve(Object.entries(this.data))});\n }\n // don't touch this it this.works!!!\n myPromise() {\n const self = this;\n const myPromises = new Promise(function(resolve, reject) {resolve(self.data)});\n return myPromises;\n }\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"map = {\n let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });\n yield container;\n // Now we create a map object and add a layer to it.\n let map = L.map(container).setView([42, -85], 10);\n let usgsLayer = L.tileLayer('https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}', { maxZoom: 20, attribution: 'Tiles courtesy of the U.S. Geological Survey' }).addTo(map);\nL.geoJSON(geo, {\n onEachFeature: function(feature,layer) {layer.bindPopup (`

${feature.properties.ID} - ${feature.properties.label}

Status: ${feature.properties.status}
Sensor Value: ${feature.properties.val}
Units: ${feature.properties.units}
Info: ${feature.properties.info}

`); } \n }).addTo(map); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"md`## Appendicies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"d3=require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"