This repo is a small personal library of useful visualization approaches with Vega-Lite. Basically, I needed to keep things in one place as I learned, experimented, and wound up settling or finding useful techniques. This is the place.
This repo uses:
d3.csv
to ingest dataThis will probably get out of date pretty soon, but:
parseFloat()
to create and chart calculated fields. Also done here.A lot of these are shown pretty simply and clearly in each page, but here’s a quick summary.
Using a named data source gives us more opportunities to manipulate the source of the data (that is, importing data into the browser, manipulating it using JavaScript, and delivering it to the chart - rather than relying on a precisely-formatted CSV).
Essentially we’re using layer.transform
as transform": [{"filter": "datum.date_of_interest > 0"}
and then subbing out that 0 for a value we calculate. (Note that with a bar-and-line chart, having two layers, we need to have this filter on both layers.)
We can calculate in transform.calculate
, but we need to use parseFloat()
for it to work. The below does the trick, essentially creating a new calculated field of TOTAL_CASE_COUNT that we can use to chart.
"transform": [
{"calculate": "parseFloat(datum.CASE_COUNT) + parseFloat(datum.PROBABLE_CASE_COUNT)", "as": "TOTAL_CASE_COUNT"}
],
A lot of these examples bring data in using Arquero. This plus using named data sources should let us do a lot more manipulation within the browser.
dt.columns()