20241130_sf_series_counts_met_standards_v1_v

spec.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 1100,
  "height": 100,
  "padding": {"top": 10, "right": 5, "bottom": 0, "left": 5},
  "background": "#000",
  "title": {
    "text": "Count by Series",
    "subtitle": {"signal": "toggleIncludeMet ? ' ' : 'Criteria Not Met Only'"},
    "subtitleColor": {"signal": "mediumColor"},
    "color": {"signal": "mediumColor"},
    "fontSize": 14,
    "offset": -25
  },
  "view": {"stroke": "transparent"},
  "signals": [
    {
      "name": "lightColor",
      "description": "light color for theme as hex value",
      "value": "#EEE"
    },
    {
      "name": "mediumColor",
      "description": "medium color for theme as hex value",
      "value": "#AAA"
    },
    {
      "name": "darkColor",
      "description": "dark color for theme as hex value",
      "value": "#777"
    },
    {
      "name": "backgroundRGB",
      "description": "rgb value of the canvas background",
      "value": "#000"
    },
    {"name": "xBarStep", "value": 40},
    {
      "name": "configIncludeMet",
      "description": "configurations for the 'Include Criteria Not Met' toggle control",
      "update": "{enabled: true, initialValue: false, xOffset: 40, track: {height: 7.5, width: 25, cornerRadius: 5, fill: lightColor, stroke: '#777', strokeWidth: 1}, handle: {stroke: '#777', strokeWidth: 1, fill: '#fff'}, label: {text: 'Include Criteria Met', font: 'Segoe UI', fontSize: 12, fill: mediumColor, fontStyle: 'regular', dy: 11.5}, on: {fill: '#b5cae1', fillOpacity: 1, stroke: '#777', strokeWidth: 1}, tooltip: {text: 'Include counts for criteria met'}}"
    },
    {
      "name": "toggleIncludeMet",
      "init": "configIncludeMet.initialValue",
      "on": [
        {
          "events": "@group_toggleIncludeMet:pointerdown",
          "update": "!toggleIncludeMet"
        }
      ]
    },
    {
      "name": "barHoverDatum",
      "init": "null",
      "on": [
        {
          "events": "@bar_rects:mouseover",
          "update": "isValid(datum) ? datum : null"
        },
        {"events": "@bar_rects:mouseout", "update": "null"}
      ]
    },
    {
      "name": "unit",
      "value": {},
      "on": [
        {"events": "pointermove", "update": "isTuple(group()) ? group() : {}"}
      ]
    },
    {
      "name": "ctrlKey",
      "init": "false",
      "on": [
        {
          "events": [{"type": "mousemove", "filter": "event.ctrlKey"}],
          "update": "true"
        },
        {
          "events": [{"type": "mousemove", "filter": "!event.ctrlKey"}],
          "update": "false"
        }
      ]
    },
    {
      "name": "submitSelections",
      "value": false,
      "on": [
        {
          "events": [{"source": "scope", "type": "click"}],
          "update": "datum && isValid(datum['_vgsid_']) ? true : false",
          "force": true
        },
        {
          "events": [{"source": "view", "type": "click"}],
          "update": "!datum ? true : submitSelections",
          "force": true
        }
      ]
    },
    {
      "name": "selection_modify",
      "on": [
        {
          "events": {"signal": "selection_tuple"},
          "update": "submitSelections ? modify('selection_store', null, (!ctrlKey ? true : null), isValid(selection_tuple) && isValid(selection_tuple['_vgsid_']) && isValid(selection_tuple.datum) ? selection_tuple.datum : null) : null"
        }
      ]
    },
    {
      "name": "selection",
      "update": "data('selection_store') ? vlSelectionResolve('selection_store', 'union', true, true) : null"
    },
    {
      "name": "selection_tuple",
      "on": [
        {
          "events": [{"source": "scope", "type": "click"}],
          "update": "datum && item().mark.marktype !== 'group' && indexof(item().mark.role, 'legend') < 0 ? {_vgsid_: datum['_vgsid_'], datum: datum} : null",
          "force": true
        },
        {
          "events": [{"source": "view", "type": "click"}],
          "update": "!datum ? null : selection_tuple",
          "force": true
        }
      ]
    },
    {
      "name": "selectionCount",
      "update": "isValid(selection) && isValid(selection.vlPoint) && isValid(selection.vlPoint.or) ? length(selection.vlPoint.or) : 0"
    },
    {
      "name": "highlightIds",
      "init": "[]",
      "on": [
        {
          "events": [{"signal": "selection"}],
          "update": "isValid(selection) && isValid(selection.vlPoint) && isValid(selection.vlPoint.or) ? pluck(selection.vlPoint.or, '_vgsid_') : []"
        }
      ]
    }
  ],
  "marks": [
    {
      "name": "group_toggleIncludeMet",
      "description": "group for the marks that make up the toggle include criteria not met",
      "type": "group",
      "interactive": true,
      "clip": false,
      "encode": {
        "update": {
          "x": {"signal": "0"},
          "y": {"signal": "-60"},
          "height": {"signal": "30"},
          "width": {"signal": "configIncludeMet.track.width"},
          "fill": {"value": "transparent"},
          "tooltip": {"signal": "configIncludeMet.tooltip.text"},
          "cursor": {"value": "pointer"}
        }
      },
      "marks": [
        {
          "name": "toggleIncludeMet_text",
          "description": "the title for the toggle control",
          "type": "text",
          "interactive": false,
          "encode": {
            "update": {
              "text": {"signal": "configIncludeMet.label.text || ''"},
              "baseline": {"value": "top"},
              "font": {"signal": "configIncludeMet.label.font"},
              "fontSize": {"signal": "configIncludeMet.label.fontSize"},
              "fontStyle": {"signal": "configIncludeMet.label.fontStyle"},
              "align": {"value": "left"},
              "fill": {"signal": "configIncludeMet.label.fill"}
            }
          }
        },
        {
          "name": "track_rect",
          "description": "the track for the toggle control",
          "type": "rect",
          "from": {"data": "toggleIncludeMet_text"},
          "interactive": false,
          "encode": {
            "update": {
              "y": {"signal": "datum.bounds.y2+configIncludeMet.label.dy"},
              "height": {"signal": "configIncludeMet.track.height"},
              "x": {"signal": "0"},
              "x2": {"signal": "configIncludeMet.track.width"},
              "cornerRadius": {"signal": "configIncludeMet.track.cornerRadius"},
              "fill": {
                "signal": "toggleIncludeMet ? configIncludeMet.on.fill : configIncludeMet.track.fill"
              },
              "stroke": {"signal": "configIncludeMet.track.stroke"},
              "strokeWidth": {"signal": "configIncludeMet.track.strokeWidth"}
            }
          }
        },
        {
          "name": "toggle_outer_arc",
          "description": "the circle mark that serves as the the 'toggle handle'",
          "from": {"data": "toggleIncludeMet_text"},
          "type": "arc",
          "interactive": false,
          "encode": {
            "enter": {
              "y": {
                "signal": "datum.bounds.y2+configIncludeMet.label.dy+configIncludeMet.track.height/2"
              },
              "innerRadius": {"value": 0},
              "outerRadius": {"signal": "configIncludeMet.track.height*0.9"},
              "startAngle": {"signal": "0"},
              "endAngle": {"signal": "2*PI"},
              "stroke": {"signal": "configIncludeMet.handle.stroke || '#BBB'"},
              "strokeWidth": {"signal": "configIncludeMet.handle.strokeWidth"},
              "fill": {"signal": "configIncludeMet.handle.fill || '#fff'"}
            },
            "update": {
              "x": {
                "signal": "toggleIncludeMet ? configIncludeMet.track.width-configIncludeMet.track.cornerRadius : configIncludeMet.track.cornerRadius"
              }
            }
          }
        }
      ]
    },
    {
      "name": "bar_rects",
      "type": "rect",
      "from": {"data": "dataset_aggregated"},
      "encode": {
        "update": {
          "x": {
            "scale": "xScale",
            "field": "MET Analytics Name",
            "offset": {"scale": "xSubScale", "field": "Criteria Met"}
          },
          "width": {"signal": "bandwidth('xSubScale')"},
          "y": {"scale": "yScale", "field": "count"},
          "y2": {"signal": "height"},
          "fill": {"scale": "colorScale", "field": "Criteria Met"},
          "cursor": {"value": "pointer"},
          "stroke": {"value": "#444"},
          "strokeWidth": {
            "signal": "isValid(barHoverDatum) && isValid(barHoverDatum['MET Analytics Name']) && barHoverDatum['MET Analytics Name'] === datum['MET Analytics Name'] && barHoverDatum['Criteria Met'] === datum['Criteria Met'] ? 2 : 0"
          },
          "opacity": {
            "signal": "isValid(highlightIds) ? length(highlightIds) > 0 ? indexof(highlightIds, datum['_vgsid_']) >= 0 || indexof(highlightIds, datum['parent_vgsid_']) >= 0 ? 1 : 0.5 : 1 : 1"
          },
          "tooltip": {
            "signal": "{title: datum['MET Analytics Name'], 'Criteria Met': datum['Criteria Met'], Count: datum.count + ' / ' + datum['Total Count']}"
          }
        }
      }
    },
    {
        "name": "labels",
        "type": "text",
        "interactive": false,
        "from": {"data": "bar_rects"},
        "encode": {
            "update": {
                "text": {
                    "signal": "datum.datum.count"
                }, 
                "x": {
                    "signal": "datum.bounds.x1+(datum.bounds.x2-datum.bounds.x1)/2"
                }, 
                "y": {
                    "signal": "datum.bounds.y1"
                },
                "dy": {
                    "value": -2.5
                },
                "align": {
                    "value": "center"
                },
                "fontSize": {"value": 14},
                "baseline": {
                    "value": "bottom"
                },
                "fill": {
                    "field": "fill"
                },
                "opacity": {"signal": "datum.opacity"}
            }
        }
    }
  ],
  "scales": [
    {
      "name": "xScale",
      "type": "band",
      "domain": {
        "data": "xDomain",
        "field": "MET Analytics Name",
        "sort": {"field": "MET Analytics Sort", "order": "ascending"}
      },
      "range": {"signal": "[0,width]"}
    },
    {
      "name": "xSubScale",
      "type": "band",
      "domain": {"signal": "toggleIncludeMet ? ['Y', 'N'] : ['N']"},
      "range": {
        "signal": "[(bandwidth('xScale')-xBarStep*length(toggleIncludeMet ? ['Y', 'N'] : ['N']))/2, bandwidth('xScale')-(bandwidth('xScale')-xBarStep*length(toggleIncludeMet ? ['Y', 'N'] : ['N']))/2]"
      },
      "paddingInner": 0.1
    },
    {
      "name": "yScale",
      "type": "linear",
      "domain": {"data": "dataset_aggregated", "field": "count"},
      "range": {"signal": "[height, 0]"},
      "zero": true
    },
    {
      "name": "colorScale",
      "type": "ordinal",
      "domain": {"signal": "toggleIncludeMet ? ['Y', 'N'] :  ['N']"},
      "range": {
        "signal": "toggleIncludeMet ? ['#4CAF50', '#F44336']: ['#F44336']"
      }
    }
  ],
  "axes": [
    {
      "scale": "xScale",
      "orient": "bottom",
      "titlePadding": 25,
      "titleLineHeight": 20,
      "titleFontSize": 14,
      "domainColor": {"signal": "darkColor"},
      "labelColor": {"signal": "mediumColor"},
      "tickColor": {"signal": "darkColor"},
      "titleColor": {"signal": "mediumColor"},
      "tickExtra": false,
      "tickOpacity": {"signal": "1"},
      "grid": true,
      "gridColor": {"signal": "darkColor"},
      "gridDash": [2, 4],
      "gridOpacity": {"signal": "1"},
      "encode": {
        "grid": {
          "update": {
            "x": {
              "signal": "scale('xScale', datum.value)+bandwidth('xScale')-1",
              "extra": false
            }
          }
        },
        "labels": {
          "update": {
            "text": {
              "signal": "pluck(data('xDomain'), 'xLabel')[indexof(domain('xScale'), datum.value)]"
            },
            "fontSize": {"value": 14},
            "opacity": {
                "signal": "isValid(highlightIds) ? length(highlightIds) > 0 ? indexof(pluck(data('selection_store'), 'MET Analytics Name'), datum.value) >= 0 ? 1 : 0.5 : 1 : 1"
            }
          }
        }
      }
    },
    {
      "scale": "yScale",
      "orient": "left",
      "domainColor": {"signal": "darkColor"},
      "labelColor": {"signal": "mediumColor"},
      "tickColor": {"signal": "darkColor"},
      "titleColor": {"signal": "mediumColor"},
      "tickExtra": false,
      "tickOpacity": {"signal": "1"},
      "labelOverlap": true,
      "encode": {
        "labels": {
          "update": {
            "text": {
              "signal": "isNumber(datum.value) && datum.value % 1 === 0 ? format(datum.value, '.0f') : ''"
            },
            "opacity": {"signal": "+datum.value % 1 === 0 ? 1 : 0"},
            "fontSize": {"value": 14}
          }
        },
        "ticks": {
          "update": {"opacity": {"signal": "+datum.value % 1 === 0 ? 1 : 0"}}
        }
      }
    }
  ],
  "legends": [
    {
      "fill": "colorScale",
      "orient": "none",
      "legendX": {"signal": "width - (toggleIncludeMet ? 76 : 38)"},
      "legendY": {"signal": "-60"},
      "symbolType": "square",
      "direction": "horizontal",
      "labelColor": "#eee",
      "encode": {
        "labels": {
          "update": {
            "opacity": {
              "signal": "isValid(highlightIds) ? length(highlightIds) > 0 ? indexof(pluck(data('selection_store'), 'Criteria Met'), datum.value) >= 0 ? 1 : 0.5 : 1 : 1"
            }
          }
        },
        "symbols": {
          "update": {
            "stroke": {
              "signal": "datum.value === 'Total' ? '#666' : 'transparent'"
            },
            "opacity": {
              "signal": "isValid(highlightIds) ? length(highlightIds) > 0 ? indexof(pluck(data('selection_store'), 'Criteria Met'), datum.value) >= 0 ? 1 : 0.5 : 1 : 1"
            }
          }
        }
      }
    }
  ],
  "data": [
    {
      "name": "dataset",
      "url": "https://raw.githubusercontent.com/Giammaria/PublicFiles/refs/heads/master/data/sf-notional-MET-standards-dataset.csv",
      "format": {
        "type": "tsv",
        "parse": {
          "Field Comm": "string",
          "Delta": "string",
          "Reporting Unit": "string",
          "Location": "string",
          "Capability": "string",
          "Component": "string",
          "Squadron Type": "string",
          "Mission": "string",
          "Task Number": "string",
          "Task Title": "string",
          "Task Full Name": "string",
          "MET Display Title": "string",
          "MET Analytics Series": "string",
          "MET Analytics Code": "string",
          "MET Analytics Name": "string",
          "MET Analytics Sort": "number",
          "MET Measure Full Name": "string",
          "Measure": "string",
          "Criteria Met": "string",
          "REMARK": "string"
        }
      },
      "transform": [
        {
          "type": "formula",
          "expr": "datum['MET Analytics Name'] + ' - ' + datum['Criteria Met']",
          "as": "Selection Composite Key"
        }
      ]
    },
    {
      "name": "dataset_aggregated",
      "source": "dataset",
      "transform": [
        {
          "type": "joinaggregate",
          "groupby": ["Criteria Met", "MET Analytics Name", "Total Count"]
        },
        {
          "type": "joinaggregate",
          "groupby": ["MET Analytics Name", "Total Count"],
          "as": ["Total Count"]
        },
        {
          "type": "filter",
          "expr": "toggleIncludeMet ? true : datum['Criteria Met'] === 'N'"
        },
        {
          "type": "aggregate",
          "groupby": ["Criteria Met", "MET Analytics Name", "Total Count"]
        },
        {"type": "window", "ops": ["row_number"], "as": ["_vgsid_"]},
        {
          "type": "formula",
          "expr": "datum['MET Analytics Name'] + ' - ' + datum['Criteria Met']",
          "as": "Selection Composite Key"
        }
      ]
    },
    {
      "name": "xDomain",
      "source": "dataset",
      "transform": [
        {
          "type": "aggregate",
          "groupby": ["MET Analytics Name", "MET Analytics Sort"]
        },
        {
          "type": "formula",
          "expr": "datum['MET Analytics Name']",
          "as": "xLabel"
        },
        {
          "type": "formula",
          "expr": "datum['xLabel'] === 'Equipment On-Hand' ? ['Equipment', 'On-Hand'] : datum['xLabel']",
          "as": "xLabel"
        },
        {
          "type": "formula",
          "expr": "datum['MET Analytics Name'] === 'Equipment Condition' ? ['Equipment', 'Condition'] : datum['xLabel']",
          "as": "xLabel"
        },
        {
          "type": "formula",
          "expr": "datum['MET Analytics Name'] === 'Designed Operational Capability (DOC) Response Time' ? ['DOC', 'Response', 'Time'] : datum['xLabel']",
          "as": "xLabel"
        },
        {
          "type": "formula",
          "expr": "datum['MET Analytics Name'] === 'Threat Environment and Threat Matrix for CAF units' ? ['Threat Env. &', 'Threat Matrix', 'for CAF units'] : datum['xLabel']",
          "as": "xLabel"
        },
        {
          "type": "formula",
          "expr": "datum['MET Analytics Name'] === 'UTC status (DCAPES UTC Assessments)' ? ['UTC status'] : datum['xLabel']",
          "as": "xLabel"
        },
        {
          "type": "formula",
          "expr": "datum['MET Analytics Name'] === 'Other functional based standards' ? ['Other', 'Functional', 'Standards'] : datum['xLabel']",
          "as": "xLabel"
        },
        {
          "type": "collect",
          "sort": {"field": "MET Analytics Sort", "order": "ascending"}
        }
      ]
    },
    {
      "name": "yDomain",
      "source": "dataset_aggregated",
      "transform": [{"type": "aggregate", "groupby": ["Criteria Met"]}]
    },
    {"name": "selection_store", "transform": []},
    {
      "name": "lyra_selections",
      "source": "dataset",
      "transform": [
        {
          "type": "lookup",
          "from": "selection_store",
          "key": "Selection Composite Key",
          "fields": ["Selection Composite Key"],
          "values": ["_vgsid_"]
        },
        {
          "type": "filter",
          "expr": "selectionCount > 0 ? isValid(datum['_vgsid_']) : true"
        }
      ]
    },
    {
      "name": "lyra_self_highlight",
      "on": [
        {"trigger": "selection", "remove": true},
        {
          "trigger": "selection",
          "insert": "isValid(selection) && isValid(selection.vlPoint) && isValid(selection.vlPoint.or) ? pluck(selection.vlPoint.or, '_vgsid_') : []"
        }
      ]
    }
  ]
}