Useful Resources

AI

Once you have reached a level where you know the questions you want to ask, AI is super helpful in giving you answers and code examples to achieve your goals.

Pro-Tip: Use an AI engine like Gemini, preferably in coding-partner mode, and then ask it questions like:

• Using vegalite v5, how do I make the title of a barchart bold.

• How to I remove formatting from the original data being supplied to vegalite v5

• How do I change the position of the legent on a barchart in vegalite v5

Chart Configs:

• Vega-Lite Example Library

• Vega-Lite string functions in expr fields: vega link

Color Generators

• IBM Color Palettes

• Vengage Accessible color palette generator

• ColorBrewer

• Patternfly colors for charts generator

• Chroma.js applet

Charting/Accessibility Best Practices

Useful Snippets:

1. Remove currency and basic numeric fomatting from data fields:

"data" : { ... incuding a formatted field called "Amount" ... },
"transform":[
  {
    "calculate": "parseFloat(replace(datum.Amount, /[$,]/g, ''))",
    "as": "Amount"
  }
]

1. Make a legend uppercase:

"encoding": {
  "color": {
    ...
    "legend": {
      "legendExpr": "upper(datum.label)"
    }
  }
}

1. Manually set the order of fields:

"encoding":{
  "color":{
    "scale":{
      "domain":[
        "Direct School Expenses",
        "School Services Budgeted Centrally",
        "Central Administration",
        "Charter Assessment",
        "Non-BPS Student Services"
      ]
    }
  }
}