[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_99":-5,"_50":16,"_100":-5,"_101":102,"_103":104},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":-5,"_26":-5,"_27":-5,"_28":16,"_29":30,"_31":-5,"_32":33},"vizInfo",{"_40":60,"_77":78,"_79":80,"_81":-7,"_82":43,"_83":41,"_84":-5,"_85":86,"_87":16,"_88":89,"_90":89,"_91":-7,"_92":-7,"_57":93,"_59":94,"_95":-5,"_96":56,"_97":98},"vizContent",{"_40":60,"_61":62},"ownerAccount",{"_40":41,"_42":43,"_44":45,"_46":39,"_47":-5,"_48":-7,"_49":-7,"_50":16,"_51":-7,"_52":39,"_53":54,"_55":56,"_57":58,"_59":58},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz","runtimeVersion","license","descriptionIsAiGenerated","sourceProvenance",{"_34":35,"_36":37,"_27":-5,"_38":39},"project","socialImageUrl","https://next.vizhub.com/assets/unfurl.webp","sourceType","gist","originalUrl","https://gist.github.com/ThomasG77/c82aafb197157f2bd666","author","ThomasG77","id","gist-user-thomasg77","accountType","user","email","","displayName","avatar","oauthProvider","oauthId","isAdmin","stripeCustomerId","handle","handleNormalized","thomasg77","lifecycleEmailsEnabled",true,"createdAt",1791690388506,"updatedAt","gist-c82aafb197157f2bd666","files",{"_63":64,"_65":66,"_67":68},"f1",{"_69":75,"_71":76},"f2",{"_69":73,"_71":74},"f3",{"_69":70,"_71":72},"name","index.html","text","\n\n \n\t\t\n\n\n\t\t\n\n\t\t\n\t\t\n\n\t\t\n\t\t\n\t\t\n\n\t\t\n\n\n\t\t\n\n\t\t\n\n\n\n\t\n\t\n\t\t

\n\t","README.md"," Displays earthquake data for past 30 days. Hexes sized according to largest earthquake within. Opacity determined by most recent earthquake within.","OpenLayers.D3.js"," \tOpenLayers.Layer.D3 = OpenLayers.Class(OpenLayers.Layer.Vector, {\n\t\t\t\td3FeaturesNodeClass:'d3features',\n\t\t\t\td3Features:[],\n\t\t\t\tafterAdd:function(){\n\t\t\t\t\tvar self = this;\n\n\t\t\t\t\tif(this.renderer.CLASS_NAME.match(/SVG$/)){\n\n\t\t\t\t\t\tthis.d3InitSVG();\n\t \t\t\t\tthis.events.register('moveend',this,this.onMoveEnd);\n\n\n\t\t\t\t\t}else{\n\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t},\n\n\t\t\t\tonMoveEnd:function(e){\n\t\t\t\t\tthis.onPan();\n\t\t\t\t\tthis.d3RenderFeatures();\n\t\t\t\t},\n\n\t\t\t\tonPan:function(){\n \tif(this.d3FeaturesNode){\n\n \t\tthis.d3ClearRoot();\n\n\t\t\t\t var ext = this.map.getExtent();\n\t\t\t\t var res = this.map.getResolution();\n\n\t\t\t\t var l = -ext.left/res;\n\t\t\t\t var t = ext.top/res;\n\n\t\t\t\t var _l = this.renderer.left;\n\t\t\t\t var _t = this.renderer.top;\n\n\t\t\t\t var _xOffset = this.renderer.xOffset;\n\t\t\t\t var _x = l - _l + _xOffset;\n\t\t\t\t var _y = t - _t;\n\n\n\t\t\t\t this.d3FeaturesNode.attr(\"transform\", \"translate(\" + _x + \",\" + _y + \")\");\n\n\n\t\t\t }\n\t\t\t\t},\n\n\n\t\t\t\tgetFeaturesInView:function(){\n\t\t\t\t\tvar self = this;\n\t\t\t\t\tvar feats = [];\n\t\t\t\t\tvar boundsArr = this.getViewportBoundsArr();\n\t\t\t\t\tif(this.d3Features){\n\t\t\t\t\t\tthis.d3Features.forEach(function(f){\n\t\t\t\t\t\t\tif(self.inViewPort(new OpenLayers.LonLat(self.d3XAccessor(f),self.d3YAccessor(f)),boundsArr)){\n\t\t\t\t\t\t\t\tfeats.push(f)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t\treturn feats;\n\t\t\t\t},\n\n\t\t\t\t//accepts lonlat and array of bnds obj\n\t\t\t\t//for finding features within viewport\n\t\t\t\t//bndsArr accounts for dateline\n \tinViewPort: function(ll,bndsArr){\n \t\tvar inView = false;\n \t\tif(bndsArr && bndsArr.length > 0){\n \t\t//var _oll = {lon:ll[0],lat:ll[1]};\n \t\tinView = bndsArr[0].containsLonLat(ll);\n \t\t\tif(!inView && bndsArr.length > 1){\n \t\t\t\tinView = bndsArr[1].containsLonLat(ll);\n \t\t\t}\n \t\t}\n \t\treturn inView;\n\t },\n\n\n\t getViewportBoundsArr:function(){\n\t\t\t\t\tvar destProj = this.map.projection;\n \tvar llProj = new OpenLayers.Projection(\"EPSG:4326\");\n \tvar isMercator = destProj.projCode.match('3857') || destProj.projCode.match('900913') ? true : false;\n\n \tvar bnds = this.map.getExtent();\n \tvar bndsArr;\n\n\n \tif(!isMercator){\n \t\tbndsArr = [bnds];\n \t}else{\n\t\t var nBnds = bnds.clone().transform(destProj,llProj);\n\t\t var nBnds1 = nBnds.clone();\n\t\t //var nBnds1 = [[nBnds.left,n],[]]\n\t\t \n\t\t bndsArr = [nBnds1];\n\n\t\t if(\n\t\t ((nBnds.left > 0 && nBnds.right < 0) || \n\t\t (nBnds.left > 0 && nBnds.left > nBnds.right) ||\n\t\t (nBnds.left < 0 && nBnds.left > nBnds.right))\n\t\t ){\n\t\t //small hack!\n\t\t var smallNum = .0000000001;\n\t\t bndsArr = [\n\t\t \tnew OpenLayers.Bounds(nBnds.left,nBnds.bottom,180-smallNum,nBnds.top),\n\t\t \tnew OpenLayers.Bounds(-180 + smallNum,nBnds.bottom,nBnds.right,nBnds.top)\n\t\t ]\n\t\t }\n\n\t\t bndsArr.forEach(function(b){\n\t\t \tb.transform(llProj,destProj);\n\t\t });\n\t }\n\n\t return bndsArr;\n\t },\n\n\t\t\t\td3InitSVG:function(){\n\t\t\t\t\tthis.d3Div = d3.select(this.div);\n\t\t\t\t\tvar size = this.map.getSize();\n\n\t\t\t\t\tthis.olRoot = this.d3Div.selectAll(\"svg\");\n\t\t\t\t\tthis.olRoot.remove(); \n\n\t\t\t\t\tthis.d3Root = this.d3Div.append(\"svg\")\n\t\t\t\t\t\t.attr('width',size.w)\n\t\t\t\t\t\t.attr('height',size.h);\n\n\t\t\t\t\tthis.d3ClearRoot();\n\t\t\t\t},\n\n\n\n\t\t\t\td3LoadFeatures:function(features){\n\t\t\t\t\tthis.d3Features = features;\n\t\t\t\t\tthis.d3ClearRoot();\n\t\t\t\t\tthis.d3RenderFeatures();\n\t\t\t\t},\n\n\t\t\t\td3ClearRoot:function(){\n\t\t\t\t\tif(this.d3Root){\n\t\t\t\t\t\tthis.d3Root.select('.' + this.d3FeaturesNodeClass).remove();\n\t\t\t\t\t}\n\t\t\t\t\tthis.d3FeaturesNode = this.d3Root.append('g')\n\t\t\t\t\t\t.attr('class',this.d3FeaturesNodeClass);\n\t\t\t\t},\n\n\t\t\t\td3RenderFeatures:function(){\n\n\t\t\t\t},\n\n\n\t\t\t\td3FeatureXAccessor:function(f){\n\t\t\t\t\treturn f[0];\n\t\t\t\t},\n\t\t\t\td3FeatureYAccessor:function(f){\n\t\t\t\t\treturn f[1];\n\t\t\t\t},\n\n\t\t\t\td3Project:function(f){\n\t\t\t\t\tvar p = [this.d3XAccessor(f),this.d3YAccessor(f)];\n\t\t\t this.renderer.calculateFeatureDx({left:p[0],right:p[0]},this.map.getMaxExtent());\n\t\t\t var featureDx = this.renderer.featureDx;\n\t\t\t var geometry = {x:p[0],y:p[1]};\n\t\t\t var resolution = this.renderer.getResolution();\n\t\t\t var x = ((geometry.x - featureDx) / resolution + this.renderer.left);\n\t\t\t var y = (this.renderer.top - geometry.y / resolution);\n\t\t\t return [x,y];\n\t\t\t\t}\n\n\t\t\t});\n\n\t\t\tOpenLayers.Layer.D3Hex = OpenLayers.Class(OpenLayers.Layer.D3, {\n\t\t\t\t\n\t\t\t\t//used for calculating hexes\n\t\t\t\td3HexRadius:10,\n\n\t\t\t\t//used for drawing hexes\n\t\t\t\td3VisibleHexRadius:function(d){\n\t\t\t\t\treturn this.d3HexRadius - 1;\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\t//limit, above which, points are drawn rather than hexes\n\t\t\t\td3HexZoomLimit:6,\n\n\t\t\t\td3RenderFeatures:function(){\n\n\t\t\t\t\tif(this.d3HexZoomLimit && this.map.getZoom() > this.d3HexZoomLimit){\n\t\t\t\t\t\tthis.d3DrawPoints();\n\t\t\t\t\t}else{\n\t\t\t\t\t\tthis.d3UpdateHexData();\n\t\t\t\t\t\tthis.d3DrawHexes();\n\t\t\t\t\t}\n\n\t\t\t\t},\n\n\t\t\t\td3MakeHexBin:function(){\n\t\t\t\t\tvar size = this.map.getSize();\n \t\t\t\tthis.hexbin = d3.hexbin()\n \t\t\t\t\t.size([size.w,size.h])\n \t\t\t\t\t.radius(this.d3HexRadius);\n\n\t\t\t\t},\n\n\n\t\t\t\td3DrawPoints:function(){\n\t\t\t\t\t//console.log('Make points..')\n\t\t\t\t\tvar feats = this.getFeaturesInView();\n\n\t\t\t\t\tthis.d3FeaturesNode.selectAll(\"circle\")\n\t\t\t\t\t\t.data(feats)\n\t\t\t\t\t\t.enter().append(\"circle\")\n\t\t\t\t\t\t.attr(this.d3GetPointAttr())\n\t\t\t\t\t\t.style(this.d3GetPointStyle())\n\n\t\t\t\t},\n\n\t\t\t\td3DrawHexes:function(){\n\t\t\t\t\tvar self = this;\n\t\t\t\t\tthis.d3FeaturesNode.selectAll(\"path\")\n\t\t\t\t\t\t.data(this.hexData)\n\t\t\t\t\t\t.enter().append(\"path\")\n\t\t\t\t\t\t.attr(this.d3GetHexAttr())\n\t\t\t\t\t\t.style(this.d3GetHexStyle())\n\n\t\t\t\t},\n\n\t\t\t\td3UpdateHexData:function(){\n\t\t\t\t\tif(!this.hexbin){\n\t\t\t\t\t\tthis.d3MakeHexBin();\n\t\t\t\t\t}\n\t\t\t\t\tvar points = [];\n\t\t\t\t\tvar self = this;\n\t\t\t\t\tthis.d3Features.forEach(function(f){\n\t\t\t\t\t\tvar p = self.d3Project(f);\n\t\t\t\t\t\tp.push(f);\n\t\t\t\t\t\tpoints.push(p);\n\t\t\t\t\t});\n\t\t\t\t\tthis.hexData = this.hexbin(points);\n\t\t\t\t\tthis.d3AfterHexDataUpdate();\n\t\t\t\t},\n\n\t\t\t\t//this makes is a place to set up variables used for styling based on how the hexes were distributed out\n\t\t\t\td3AfterHexDataUpdate:function(){\n\t\t\t\t\tthis.d3MaxHexBinSize = d3.max(this.hexData,function(h){\n\t\t\t\t\t\treturn h.length\n\t\t\t\t\t})\n\n\t\t\t\t\tthis.d3MinHexBinSize = d3.min(this.hexData,function(h){\n\t\t\t\t\t\treturn h.length\n\t\t\t\t\t});\n\n\t\t\t\t},\n\n\t\t\t\td3HexFill:\"#FFF\",\n\t\t\t\td3PointFill:\"#FFF\",\n\n\t\t\t\td3GetHexStyle:function(){\n\t\t\t\t\tvar self = this;\n\t\t\t\t\treturn {\n\t\t\t\t\t\t'fill':function(d){\n\t\t\t\t\t\t\tif(typeof self.d3HexFill == 'function'){\n\t\t\t\t\t\t\t\tself.d3HexFill(d,this);\n\t\t\t\t\t\t\t}else{\n\t\t\t\t\t\t\t\treturn self.d3HexFill;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t\t'opacity':function(d){\n\t\t\t\t\t\t\tif(typeof self.d3HexOpacity == 'function'){\n\t\t\t\t\t\t\t\treturn self.d3HexOpacity(d,this);\n\t\t\t\t\t\t\t}else{\n\t\t\t\t\t\t\t\treturn self.d3HexOpacity;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t\t'stroke':function(d){\n\t\t\t\t\t\t\tif(typeof self.d3HexStroke == 'function'){\n\t\t\t\t\t\t\t\treturn self.d3HexStroke(d,this);\n\t\t\t\t\t\t\t}else{\n\t\t\t\t\t\t\t\treturn self.d3HexStroke;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\n\t\t\t\t\t}\n\t\t\t\t},\n\n\t\t\t\td3GetHexAttr:function(){\n\t\t\t\t\tvar self = this;\n\t\t\t\t\treturn {\n\t\t\t\t\t\t\"d\":function(d) { \n\t\t\t\t\t\t return self.hexbin.hexagon(self.d3VisibleHexRadius(d)); \n\t\t\t\t\t\t},\n\t\t\t\t\t\t\"transform\":function(d) { \n\t\t\t\t\t\t return \"translate(\" + d.x + \",\" + d.y + \")\"; \n\t\t\t\t\t\t}\n\n\t\t\t\t\t};\n\t\t\t\t},\n\n\t\t\t\td3PointRadius:function(d){\n\t\t\t\t\treturn 5;\n\t\t\t\t},\n\n\n\t\t\t\td3GetPointAttr:function(){\n\n\t\t\t\t\tvar self = this;\n\t\t\t\t\treturn {\n\t\t\t\t\t\t\"r\":function(d) { \n\t\t\t\t\t\t return self.d3PointRadius(d); \n\t\t\t\t\t\t},\n\t\t\t\t\t\t\"transform\":function(d) { \n\t\t\t\t\t\t\tvar p = self.d3Project(d);\n\t\t\t\t\t\t\treturn \"translate(\" + p[0] + \",\" + p[1] + \")\"; \n\t\t\t\t\t\t}\n\n\t\t\t\t\t}\n\n\t\t\t\t},\n\n\t\t\t\td3GetPointStyle:function(){\n\t\t\t\t\tvar self = this;\n\t\t\t\t\treturn {\n\t\t\t\t\t\t'fill':function(d){\n\t\t\t\t\t\t\tif(typeof self.d3PointFill == 'function'){\n\t\t\t\t\t\t\t\tself.d3PointFill(d,this);\n\t\t\t\t\t\t\t}else{\n\t\t\t\t\t\t\t\treturn self.d3PointFill;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t\t'opacity':function(d){\n\t\t\t\t\t\t\tif(typeof self.d3PointOpacity == 'function'){\n\t\t\t\t\t\t\t\treturn self.d3PointOpacity(d,this);\n\t\t\t\t\t\t\t}else{\n\t\t\t\t\t\t\t\treturn self.d3PointOpacity;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t\t'stroke':function(d){\n\t\t\t\t\t\t\tif(typeof self.d3PointStroke == 'function'){\n\t\t\t\t\t\t\t\treturn self.d3PointStroke(d,this);\n\t\t\t\t\t\t\t}else{\n\t\t\t\t\t\t\t\treturn self.d3PointStroke;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t});","slug","c82aafb197157f2bd666","title","Gist c82aafb197157f2bd666","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","yWQ3_pymmENYAOLDGRG1u","startCommitId","forkedFrom","forkedFromVisibility",1433459240000,1433459699000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]