Community Summary

tData = transpose(data)
//Define Data
categoryValues = new Set(tData.map((d)=>d.Category))
regionValues = Object.keys(tData[0]).slice(3)

function getQueryParams() {
  const url = new URL(location)
  const search = url.searchParams
  const category = search.get('category') ?? "Demographics"
  const region1 = search.get('region1') ?? "Aklavik"
  const region2 = search.get('region2') ?? "Canada"
  const params = {
    category,
    region1,
    region2
  }
  return params
}

initParams = getQueryParams()

viewof category = Inputs.select([...categoryValues], {value: initParams.category,label:"Category"})
viewof region1 = Inputs.select(regionValues, {value: initParams.region1, label:"Region 1"})
viewof region2 = Inputs.select(regionValues.filter(d=>d!=region1), {value: initParams.region2, label:"Region 2"})

queryParamSetter = {
  const url = new URL(location)
  const params = { category, region1, region2 }
  for (const [k, v] of Object.entries(params)) {
    url.searchParams.set(k, v)
  }
  const oldURL = new URL(location)
  if (url.toString() !== oldURL.toString()) {
    history.replaceState({ category, region1, region2 }, "", url)
  }
  return params
}

Table

filteredByCategoryAndRegion = category!="All" ? tData.filter((d)=> d.Category === category): tData

indexStyling = ()=>{
  return x => htl.html`<div style=" font-weight:bold; padding: 0.5rem; text-decoration: underline #000 dotted">${x.toLocaleString("en")}`
}

//Display Table


viewof mainTable = Inputs.table(filteredByCategoryAndRegion,{
    columns:["Statistic","Unit",region1,region2],
    format:{
      "Statistic": indexStyling(),
    },
    rows:20,
    width:{
        Statistic:300,
        Unit: 300,
        [region1]:300,
        [region2]:300,
        Canada:300
    }
    }
)

{
viewof mainTable.firstChild.style.margin = "auto"
const tableElement = viewof mainTable
const { glossary } = yaml_data

tableElement.addEventListener("mouseover", (e)=>{
  const targetValue = e.target.innerText
  const valuesList = data.Statistic
  if ( valuesList.includes(targetValue) ) {
    for (let i in glossary){
      if (glossary[i].term === targetValue){
          e.target.title = glossary[i].definition
      }
    }
  }
  })
}