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
}
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
}
}
}
})
}