≡ ⎆

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/09/17 09:29] – hudlowedata: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>     <div id="vega_chart"></div>
  
-    <script>+    <script>     
       vegaEmbed('#vega_chart', {       vegaEmbed('#vega_chart', {
         $schema: "https://vega.github.io/schema/vega-lite/v5.json",         $schema: "https://vega.github.io/schema/vega-lite/v5.json",
Line 14: Line 17:
         data: {         data: {
           url: "https://wiki.mrrc.pitt.edu/lib/exe/fetch.php?media=phantomqc.csv",           url: "https://wiki.mrrc.pitt.edu/lib/exe/fetch.php?media=phantomqc.csv",
-          format: { type: "csv" }+          format: { type: "csv", parse: { "DATE": "date" } }  // <-- parse DATE as date
         },         },
 +        params: [
 +        { "name": "nDays", "value": 60,
 +          "bind": {"input": "range", "min": 0, "max": 3*365, "step": 5} 
 +        },
 +          { name: "cutoff", expr: "datetime(year(now()), month(now()), date(now())-nDays)" },
 +          /*,
 +          {name: "scanner_selector", select: { type: "point", fields: ["scanner"]  },
 +           bind: { input: "select",
 +                   options: [null, "Prisma1", "Prisma2", "Prisma3"],
 +                   labels: ["Show All", "P1", "P2", "P3"],
 +                  name: "Scanner Selection:" } }*/
 +        ],
 +        
 + 
 +
         transform: [         transform: [
-          { fold: ["tsnr", "Z", "Temp"], as: ["variable", "value"] }, +          { fold: ["tsnr", "X", "Z", "Temp", "fwhm", "fwhm_svs"], as: ["variable", "value"] }, 
-          { calculate: "toDate(datum.DATE)", as: "parsed_date" }, +          { filter: "datum.DATE >= cutoff"  // <-- keep only last two months 
-          { type: "filter", expr: "datum.parsed_date >= timeOffset('month', now(), -2)" }+          }
         ],         ],
 +
         facet: {         facet: {
-          column: { field: "variable", type: "nominal" }, +         /* previously grid per measure*scanner */ 
-          row: { field: "scanner", type: "nominal" }+         // column: { field: "scanner", type: "nominal" }, 
 +         // row: { field: "variable", type: "nominal" } 
 +          
 +         row: {field: "variable", type: "nominal"}
         },         },
         resolve: { scale: { y: "independent" } },         resolve: { scale: { y: "independent" } },
 +
         spec: {         spec: {
           mark: { type: "line", point: true },           mark: { type: "line", point: true },
 +          // not needed 20260519
 +         // params: [{name: "grid", select: { type: "interval"}, bind: "scales" }],
           encoding: {           encoding: {
-            x: { field: "parsed_date", type: "temporal", title: "Date" },+            x: { 
 +              field: "DATE", 
 +              type: "temporal", 
 +              title: "Date", 
 +              scale: { domainMin: { expr: "cutoff" } } 
 +            },
             y: { field: "value", type: "quantitative", scale: { zero: false } },             y: { field: "value", type: "quantitative", scale: { zero: false } },
             color: { field: "scanner", type: "nominal" },             color: { field: "scanner", type: "nominal" },
Line 35: Line 65:
               { field: "scanner", type: "nominal" },               { field: "scanner", type: "nominal" },
               { field: "value", type: "quantitative" },               { field: "value", type: "quantitative" },
-              { field: "parsed_date", type: "temporal" }+              { field: "DATE", type: "temporal" }
             ]             ]
           }           }
Line 41: Line 71:
       });       });
     </script>     </script>
-  </body>+
 </html> </html>