≡ ⎆

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
data:qc:interactive [2025/08/11 21:40] – forandata:qc:interactive [2026/05/19 14:27] (current) – scanners on same plot foran
Line 1: Line 1:
 +====== Interactive QC Plot ======
 +
 +Javascript (''vega'') rendering of [[:data:qc]]. Hover over a point to see it's value. Use the scroll wheel to zoom, drag to pan, and double click to reset.
 +
 <html> <html>
-   <head><title>QA Plot</title></head> +  <script src="https://cdn.jsdelivr.net/npm/vega@6"></script> 
-   <script src="https://cdn.jsdelivr.net/npm/vega@6"></script> +  <script src="https://cdn.jsdelivr.net/npm/vega-lite@6"></script> 
-   <script src="https://cdn.jsdelivr.net/npm/vega-lite@6"></script> +  <script src="https://cdn.jsdelivr.net/npm/vega-embed@7"></script>
-   <script src="https://cdn.jsdelivr.net/npm/vega-embed@7"></script>+
  
-   <body> 
-      <div id="vega_chart"></div> 
  
-      <script> +    <div id="vega_chart"></div> 
-         vegaEmbed('#vega_chart', { + 
-            $schema: "https://vega.github.io/schema/vega-lite/v5.json", +    <script>      
-            description: "Multi-line timeseries per scanner and variable.", +      vegaEmbed('#vega_chart', { 
-            data: { +        $schema: "https://vega.github.io/schema/vega-lite/v5.json", 
-               url: "https://wiki.mrrc.pitt.edu/lib/exe/fetch.php?media=phantomqc.csv", +        description: "Multi-line timeseries per scanner and variable.", 
-               format: { type: "csv" } +        data: { 
-            }, +          url: "https://wiki.mrrc.pitt.edu/lib/exe/fetch.php?media=phantomqc.csv", 
-            transform: [ +          format: { type: "csv", parse: { "DATE": "date" } }  // <-- parse DATE as date 
-               { calculate: "toDate(datum.DATE)", as: "parsed_date" } +        }, 
-            ], +        params: [ 
-            facet: { +        { "name": "nDays", "value": 60, 
-               column: { field: "variable", type: "nominal" }, +          "bind": {"input": "range", "min": 0, "max": 3*365, "step": 5}  
-               row: { field: 'scanner', type: 'nominal' }}, +        }, 
-            resolve: { scale: { y: "independent" } }, +          { name: "cutoff", expr: "datetime(year(now()), month(now()), date(now())-nDays)" }, 
-            spec: { +          /*, 
-               mark: {type: "line", point: true}, +          {name: "scanner_selector", select: { type: "point", fields: ["scanner"]  }, 
-               encoding: { +           bind: { input: "select", 
-                  x: { field: "parsed_date", type: "temporal", title: "Date" }, +                   options: [null, "Prisma1", "Prisma2", "Prisma3"], 
-                  y: { field: "value", type: "quantitative",  scale: {zero: false }}, +                   labels: ["Show All", "P1", "P2", "P3"], 
-                  color: { field: "scanner", type: "nominal" }, +                  name: "Scanner Selection:" } }*/ 
-                  tooltip: [ +        ], 
-                     { field: "scanner", type: "nominal" }, +         
-                     { field: "value", type: "quantitative" }, +  
-                     { field: "parsed_date", type: "temporal" } + 
-                  ] +        transform: [ 
-               }+          { fold: ["tsnr", "X", "Z", "Temp", "fwhm", "fwhm_svs"], as: ["variable", "value"] }, 
 +          { filter: "datum.DATE >= cutoff"  // <-- keep only last two months 
 +          } 
 +        ], 
 + 
 +        facet: { 
 +         /* previously grid per measure*scanner */ 
 +         // column: { field: "scanner", type: "nominal" }, 
 +         // row: { field: "variable", type: "nominal" } 
 +          
 +         row: {field: "variable", type: "nominal"} 
 +        }, 
 +        resolve: { scale: { y: "independent" } }, 
 + 
 +        spec: { 
 +          mark: { type: "line", point: true }, 
 +          // not needed 20260519 
 +         // params: [{name: "grid", select: { type: "interval"}, bind: "scales" }], 
 +          encoding: { 
 +            x: { 
 +              field: "DATE", 
 +              type: "temporal", 
 +              title: "Date", 
 +              scale: { domainMin: { expr: "cutoff" } }
             },             },
-            transform: [ +            y: { field: "value", type: "quantitative", scale: { zero: false } }, 
-               { +            color: { field: "scanner", type: "nominal" }, 
-                  fold: ["tsnr", "Z", "Temp"],  +            tooltip: [ 
-                  as: ["variable", "value"] +              { field: "scanner", type: "nominal" }, 
-               }, +              { field: "value", type: "quantitative" }, 
-               { calculate: "toDate(datum.DATE)", as: "parsed_date" }, +              { field: "DATE", type: "temporal" }
-               { "type": "filter", "expr": "datum.parsed_date >= timeOffset('month', now(), -3)"}+
             ]             ]
 +          }
 +        }
 +      });
 +    </script>
  
-         }); 
-      </script> 
 </html> </html>