WIP!
This javascript package provides a web component <table-charter> (using lit) that allows to interactively generate charts of the crosstabs in table books (see below). Please open the demo to see it live.
Table books are Excel VBA files to interactively select and show subsets of the contained crosstabs with various survey statistics, produced by DATA-Connection Gebr. Wilke GbR, a small company of my brother and me. The answers to the questions are in the rows and the total and a breakdown of various sub-populations in columns (headers) of the crosstabs.
- We generate the table books with 2 R packages which we will also soon 🤞 put open source.
- Please contact us if you're interested in these table books for one of your projects.
Perhaps it's easiest to dive right into it. For demonstration purposes we have an example table book (non-interactive, stripped off of all VBA) of a made-up survey (see raw SPSS data of the survey here).
When calculating the data in the crosstabs from the raw data, we also translate it to a long format. Each value occupies one row, as needed by observable plot, which is used to generate the charts. Some modifications are then added with d3. In a nut shell, table_charter loads the long table book data into an app, where you can then also interactively choose the settings of the plots you're interested in.
In order to use table_charter you need to load the underlying code into your html. The easiest way is to load the source code of the npm package (which you can download from unpkg for every published version) in a stand-alone html file.
To understand how you can embed table_charter in html documents, have a look at the minimal_example.html stand-alone html file. When the source code is loaded, it provides the TableCharter web component that contains the app which you can embed with the <table-charter> tag in your html.
In example_dashboard.html we added a header (with the option to change the language of the app; only German and English for now) and a footer and some styling.
- You can run the app by downloading a stand-alone html file and open it locally in your browser.
- Another way is to install the package on your machine (see below) and then generate a stand-alone file with the current state of all the needed javascript code included (in contrast to providing a download link to the unpkg cdn) with
npm run standalone-build.
If you also want to experiment with the code inside the table_charter web component, install it on your machine with (needs git & npm):
git clone https://gitlab.com/urswilke/table_charter
cd table_charter
npm i
You can then run the app on a dev server on your computer with vite by entering the following commands in your cli:
npm run dev
This will run the app in index.html and all the related source code on a local dev server (example_dashboard.html is a stand-alone verion of index.html).
Our demo is the result of deploying the production version of the table_charter html element automatically each time code is pushed into this repo (with the pages part in the gitlab ci). By forking this repo and adapting the data used, you can deploy dashboards with your own data to the web.
The tests are made with webdriverio and can be run on firefox with
npm run test
and on chrome with
npm run test -- --chrome
They are also run on push with the gitlab ci.
The versatility of the lit element with charts from observable plot and the tidy data structure allow to easily
- add further options to controll the charts' features & appearance,
- connect the dashboard to a data base,
- also allow to generate interactive html versions of the tables in our table books,
- easily expand the generated plot types, such as
- plotting the data of multiple questions in different columns, or
- assembling the survey data of different years
- etc. ...
Please take not that the source code of this repo is published under the AGPLv3 license.