View a set of chronological events from a CSV file, in a nicer way.
I created this thing because I needed a better visualization of some CSV files that I usually work on, that are used to store chronological events on a set of items.
The format of these CSV files looks like this:
Item_1,gg/mm/aa|event_type,...,gg/mm/aa|event_type
...
Item_n,gg/mm/aa|event_type,...,gg/mm/aa|event_type
Just start a webserver in the directory where you cloned this repo, and go there with a browser.
The script looks for a config.json
file, that contains info such as the CSV input file, the separator, etc; for example:
{
"projectName": "Sample tracking",
"inputFile": "examples/sample.csv",
"separator": ",",
"skipEmptyRows": true,
"customCSS": "examples/sample.css",
"eventTypeMapping": {
"a": "Type A",
"b": "Type B"
}
}
With it you can map the alias (event_type
) in the CSV to a human-comprehensible event name that you decide.
If you have rows with no events, with this flag you can skip them.
You can point to a CSS file in wich you can give some eye-candy to your output.
For example, since each cell has a CSS class type-<event_type>
you can define rules for specific event types:
.type-a {
background: rgba(197, 237, 52, .5);
}
What happens if - let's say - you want to use this thing with 3 CSV files?
- Just make 3 copies of
index.html
, and create 3 JSON configurations. - Configure the JSON files as you need;
- Point to the correct JSON configuration in the HTML files, by adding this line just before
<script src='main.js'></script>
:
<script>configFile = 'correct-config-file.json'</script>
By doing this, you now have a page for each configuration/CSV to visualize.
Atalanta,02/02/20|d,08/02/20|w,15/02/20|w,01/03/20|w
Roma,07/02/20|l,15/02/20|l,23/02/20|w,01/03/20|w
Lazio,09/02/20|w,16/02/20|w,23/02/20|w,29/02/20|w
Inter,02/02/20|w,09/02/20|w,16/02/20|l,08/03/20|l