28:null 29:["$","title",null,{"children":"PPP synoptic plots | Michele Vallisneri | Observable"}] 2e:T452,filtertable = function(pppfilters) { const p = d3.select(document.createElement("table")); p.html('GPSGLO3CON4CONSlowFast'); var pinned = new Set(); p.selectAll("td span").remove(); pppfilters.map(function(filt) { let cl = filterutil.isFast(filt) ? "TF" : "TS"; cl += (filterutil.is4con(filt) ? "4" : (filterutil.is3con(filt) ? "3": (filterutil.isGlo(filt) ? "2" : "1"))); p.select("td." + cl) .append("span") .datum(filt) .attr("class", d => "dot " + d) .html(filt + "
") .on("mouseover", select.filter) .on("mouseout", select.unfilter) .on("click", d => { if(pinned.has(d)) { pinned.delete(d); select.unpin(d); } else { pinned.add(d); select.pin(d); }}); }); return p.node(); }2f:Tbc7,makepppplot = function(pppdata, opts) { let options = Object.assign({}, defaults, opts); let margin = options.margin; let width = options.plotwidth - margin.left - margin.right; const svg = d3.select(DOM.svg(width + margin.left + margin.right, options.plotheight)); let height = options.plotheight/3 - margin.top - margin.bottom; let tmin = d3.min(pppdata.map(p => p[0]),d => d.t); let tmax = d3.max(pppdata.map(p => p[p.length-1]),d => d.t); // see https://medium.com/@mbostock/introducing-d3-scale-61980c51545f re scales let x = d3.scaleTime().domain([tmin,tmax]).range([0,width]); let y = d3.scaleLinear().domain(options.yrange).range([height,0]); // note this mapping does not match the synoptic plot let c = d3.scaleOrdinal().domain(pppfilters).range(colors); let xAxis = d3.axisBottom(x).ticks(5).tickSize(3,6); let yAxis = d3.axisLeft(y).ticks(options.yticks).tickSize(4,4); let line = function(obs,x,y) { let yrange = y.domain(); return d3.line() .defined(d => (d[obs] != null)) .x(d => x(d.t)) .y(d => { let p = d[obs]; // clipping! return y(p < yrange[0] ? yrange[0] : (p > yrange[1] ? yrange[1] : p)); }); } // x zoom can be done in a similar fashion, // but then we need to save the modified scales var zoomedy = function() { var yt = d3.event.transform.rescaleY(y); // get transformed scale d3.selectAll("g.y.axis.ppp").call(yAxis.scale(yt)); // set scale on axis and draw it ['pose','posn','posv'].forEach(function(obs) { d3.selectAll("path.ppp.line." + obs).attr("d", d => line(obs,x,yt)(d)); }); } var zoomy = d3.zoom().scaleExtent([0.1, 10]).on("zoom", zoomedy); ['pose','posn','posv'].forEach(function(obs,o) { let g = svg.append("g").attr("transform","translate(" + margin.left + "," + (o*options.plotheight/3 + margin.top) + ")"); g.selectAll("path.line.ppp") .data(pppdata) .enter() .append("path") .attr("class", (d,i) => "line ppp " + pppfilters[i] + " " + obs) .attr("d", d => line(obs,x,y)(d)) .style("stroke", (d,i) => c(pppfilters[i])) .style("fill", "none"); g.append("g") .attr("class", "x axis ppp") .attr("transform", "translate(0," + height + ")") .call(xAxis); g.append("g") .attr("class", "y axis ppp") .attr("transform", "translate(" + -10 + ",0)") .call(yAxis); // this is the rectangular element that receives the zoom event g.append("rect").attr("class", "zoom y box") // the size is the same as the y axis .attr("width", margin.left).attr("height", height - margin.top - margin.bottom) // x axis starts to the left of the root g element .attr("transform", "translate(" + -margin.left + "," + 0 + ")") .style("visibility", "hidden").attr("pointer-events", "all") .call(zoomy); }); return svg.node(); }30:T8e5,makeplot = function(dots, lines, opts) { let options = Object.assign({}, defaults, opts); let margin = options.margin; let width = options.plotwidth - margin.left - margin.right; let height = options.plotheight - margin.top - margin.bottom; const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)); let g = svg.append("g").attr("transform","translate(" + margin.left + "," + margin.top + ")"); let x = d3.scalePoint().domain(frequent).range([0,width]); let y = d3.scaleLinear().domain(options.yrange).range([height,0]); let c = d3.scaleOrdinal().domain(filters).range(colors); // add jittered abscissa (used by lines and dots) to each datapoint let jitter = i => 0.5 * (Math.random() - 0.5) * width / frequent.length; lines.forEach(line => line.forEach((d,i) => { d.x = x(d.sta) + jitter(i); })); let xAxis = d3.axisBottom(x).ticks(5).tickSize(3,6); let yAxis = d3.axisLeft(y).ticks(options.yticks).tickSize(4,4); let line = d3.line() // .x(function(d) { return x(d.sta); }) [unjittered] .x(function(d) { return d.x; }) .y(function(d) { return y(d.rmsposv); }); g.selectAll("path.line.pppsyn") .data(lines) .enter() .append("path") .attr("class", d => "line pppsyn " + d[0].filt) .attr("d", d => line(d)) .style("stroke", d => c(d[0].filt)) .style("fill", "none"); g.selectAll("circle.dot.pppsyn") .data(dots) .enter() .append("circle") .attr("class", d => "dot pppsyn " + d.filt) .attr("r", 3) .attr("cx", d => d.x) // .attr("cx", (d,i) => x(d.sta) + jitter(i)) [unjittered] .attr("cy", d => y(d.rmsposv)) .style("fill", d => c(d.filt)) .on("mouseover", d => select.filter(d.filt)) .on("mouseout", d => select.unfilter(d.filt)); g.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-65)"); g.append("g") .attr("class", "y axis") .attr("transform", "translate(-10,0)") .call(yAxis); return svg.node(); }31:[] 2c:{"id":"8eee744ecdf541ec","slug":"ppp-synoptic-plots","title":"PPP synoptic plots","thumbnail":"620600ba8734c43daf33738ba7d2604f34cfc3e9fd528fbdbc5018c06baa1268","access_level":"public","create_time":"$D2018-02-26T19:20:10.042Z","update_time":"$D2018-12-11T01:21:32.905Z","view_time":null,"first_public_time":"$D2018-02-27T00:54:16.054Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c8b1da6cd6acdc9b","login":"vallis","name":"Michele Vallisneri","avatar_url":"https://avatars-next.observableusercontent.com/660211322212c19297c70227a29cf0c3a0e96996682719b1fc151fe33431ff5c","tier":"starter_2024"},"version":825,"publish_version":825,"role":null,"authored":false,"authors":[{"type":"individual","id":"12aa872846783c92","login":"vallis","name":"Michele Vallisneri","avatar_url":"https://avatars-next.observableusercontent.com/660211322212c19297c70227a29cf0c3a0e96996682719b1fc151fe33431ff5c","tier":null}],"members":[{"type":"individual","id":"12aa872846783c92","login":"vallis","name":"Michele Vallisneri","avatar_url":"https://avatars-next.observableusercontent.com/660211322212c19297c70227a29cf0c3a0e96996682719b1fc151fe33431ff5c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"PPP synoptic plots","cells":[{"id":4,"value":"md`# PPP synoptic plots`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"pppurl = 'https://dl.dropboxusercontent.com/s/n608xuhv3qzz800/gold.json?dl=1'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"pppurl2 = \"https://dl.dropboxusercontent.com/s/n6ekjn0hdc47yw1/godn.json?dl=0\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"url = 'https://dl.dropboxusercontent.com/s/zk9af4c1osi0j4t/ppps.json?dl=1'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"md`A small library of utility functions to recognize the type of a filter.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"filterutil = {\n let isFast = s => (s.indexOf('Fast') != -1) || (s.indexOf('fast') != -1) || (s[s.length-1] == 'f');\n let isGlo = s => (s.indexOf('Glo') != -1);\n let isBds = s => (s.indexOf('Bds') != -1);\n let isGal = s => (s.indexOf('Gal') != -1);\n let cnt = s => d3.sum([true,isGlo(s),isBds(s),isGal(s)]);\n \n return {\n\t'isFast': isFast,\n 'isGlo': isGlo,\n \t'isBds': isBds,\n 'isGal': isGal,\n 'is3con': s => (s.indexOf('3con') != -1) || (s.indexOf('3Con') != -1) || (cnt(s) == 3),\n 'is4con': s => (s.indexOf('4con') != -1) || (s.indexOf('4Con') != -1) || (cnt(s) == 4)\n\t};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"md`Make a reactive table of filters by type.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"filtertable(pppfilters2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"makepppplot(pppdata2, {plotwidth: 800, plotheight: 500,\n \t\t margin: {top: 20, right: 10, bottom: 35, left: 40},\n \t\t yrange: [-0.05,0.05]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"d3.min(pppdata.map(p => p[p.length-1]),d => d.t)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"md`Make PPP pos[e|n|v] plots.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"filtertable(pppfilters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"makeplot(dots, lines, {plotwidth: 800, yrange: [0,3]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"defaults = ({ plotwidth: 600, plotheight: 220,\n margin: {top: 27, right: 10, bottom: 35, left: 40},\n yticks: 5 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"md`CSS mouseover de/selection functions.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"select = {\n return {\n filter: function(d) {\n \td3.selectAll(\".dot\").classed(\"selected\",false).attr(\"r\", 3.5);\n \t\td3.selectAll(\".dot.\" + d).classed(\"selected\",true).attr(\"r\", 6); \n\n d3.selectAll(\".line\").classed(\"selected\",false);\n \t\td3.selectAll(\".line.\" + d).classed(\"selected\",true);\n },\n \n unfilter: function(d) {\n \td3.selectAll(\".dot.\" + d).classed(\"selected\",false).attr(\"r\", 3);\n\t d3.selectAll(\".line.\" + d).classed(\"selected\",false);\n },\n \n pin: function(d) {\n \td3.selectAll(\".dot.\" + d).classed(\"pinned\",true); \t\n \td3.selectAll(\".line.\" + d).classed(\"pinned\",true);\n },\n \n unpin: function(d) {\n \td3.selectAll(\".dot.\" + d).classed(\"pinned\",false); \t\n \td3.selectAll(\".line.\" + d).classed(\"pinned\",false);\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"md`Where the magic happens.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`Data, frequent stations only, grouped by frequent station.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"dots = {\n let records = [];\n \n for(var i=0;i Object.keys(data[sta]).length > 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"md`Sort by GOC first, then host and filter.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"sorting = {\n // need -1, 0, 1 for a <=> b\n let stringcmp = function(a, b) { return (ab?1:0)); }\n \n // compare by using GOC first\n return function(a,b) {\n let ai = a.indexOf(\"_\"), bi = b.indexOf(\"_\");\n let goc = stringcmp(a.slice(ai-2,ai),b.slice(bi-2,bi));\n \n return (goc != 0) ? goc : stringcmp(a,b);\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"filters = {\n let set = new Set();\n \n Object.keys(data).forEach(function(sta) {\n Object.keys(data[sta]).forEach(function(thefilter) { \n\t set.add(thefilter);\n })\n });\n \n return Array.from(set).sort(sorting);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"data = (await fetch(url)).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"pppfilters = Object.keys(ppprawdata.pose).sort(sorting)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"md`Data for single PPP:\n\t\n\t{filter1: {'obs': ['t','pose','posn','posv','pppsig'],\n\t\t\t 'tmin': ...,\n\t\t\t 'tmax': ...,\n\t\t\t 'data': [[0, , , , ],\n [60, ..., ..., ..., ...],\n\t\t\t\t\t\t...]},\n filter2: ...,\n\t ...}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"ppprawdata = (await fetch(pppurl)).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"ppprawdata2 = (await fetch(pppurl2)).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"pppfilters2 = {\n let filters = Object.keys(ppprawdata2).sort(sorting);\n\n // find the most recent datapoint, and select only filters that end within 2 hours\n let tmax = d3.max(filters, f => ppprawdata2[f].tmax);\n return filters.filter(f => ppprawdata2[f].tmax > tmax - 7200);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"pppdata2 = {\n let ret = new Array(pppfilters2.length);\n \n for(let i = 0; i < pppfilters2.length; i++) {\n\tlet data = ppprawdata2[pppfilters2[i]];\n\n let t0 = data.tmin;\n let datapoints = data.data;\n\tlet np = datapoints.length;\n \n // we're going to rely on data.obs being ['t','pose','posn','posv','pppsig']\n \n let vec = new Array(np);\n for(let j = 0; j < np; j++) {\n \t vec[j] = {\n \t'pose': datapoints[j][1],\n \t'posn': datapoints[j][2],\n \t'posv': datapoints[j][3],\n 'pppsig': datapoints[j][4],\n 't': new Date((datapoints[j][0] + t0 + 946728000) * 1000)\n };\n }\n\t\t\n ret[i] = vec;\n }\n \n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"pppdata = {\n let ret = new Array(pppfilters.length);\n \n for(let i = 0; i < pppfilters.length; i++) {\n let pose = ppprawdata['pose'][pppfilters[i]];\n let posn = ppprawdata['posn'][pppfilters[i]];\n let posv = ppprawdata['posv'][pppfilters[i]];\n let pppsig = ppprawdata['pppsig'][pppfilters[i]];\n \n let np = pppsig.length;\n \tlet vec = new Array(np);\n \n for(let j = 0; j < np; j++) {\n \tvec[j] = {\n \t'pose': pose[j].y,\n \t'posn': posn[j].y,\n \t'posv': posv[j].y,\n 'pppsig': pppsig[j].y,\n 't': new Date((pppsig[j].t + 946728000) * 1000)\n };\n }\n \n ret[i] = vec;\n }\n \n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"colors = {\n\tlet tableau_colors = ['rgb(255,127,14)','rgb(214,39,40)','rgb(148,103,189)','rgb(44,160,44)',\n \t 'rgb(31,119,180)','rgb(227,119,194)','rgb(188,189,34)','rgb(140,86,75)',\n \t 'rgb(127,127,127)','rgb(23,190,207)'];\n\n\treturn tableau_colors.map(c => d3.rgb(c));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"html`\n

[CSS here]

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"