≡ ⎆

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 12:26] – 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 16: Line 19:
           format: { type: "csv", parse: { "DATE": "date" } }  // <-- parse DATE as date           format: { type: "csv", parse: { "DATE": "date" } }  // <-- parse DATE as date
         },         },
- 
         params: [         params: [
-          { name: "cutoff", expr: "datetime(year(now()), month(now()) - 2, date(now()))" }+        { "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"] }, 
-          { filter: "datum.DATE >= cutoff" }  // <-- keep only last two months+          { filter: "datum.DATE >= cutoff"  // <-- keep only last two months 
 +          }
         ],         ],
  
         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" } },
Line 34: Line 51:
         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: {             x: {
Line 52: Line 71:
       });       });
     </script>     </script>
-  </body>+
 </html> </html>