csv-demo.md

layout
default

This example uses data from the 538 Github repository, and the data (the CSV file avengers.csv) is made available under an MIT license, as it is not a work of the US Government. Please see the original repository.

First, a datafile

Any CSV will do.

I use VS Code and the extension Rainbow CSV so that every column gets its own color when editing. This makes things easier. (You may have other favorite tools.) Obviously, you could also use Excel, save the .xlsx in the _data directory, and keep an up-to-date .csv version along side it.

In this case, we're using _data/avengers.csv.

Then, a for loop

Jekyll uses Liquid Tags for markup. Here's the iteration section of the docs. Also, here's a handy cheatsheet.

We'll start with a for loop.

{% raw %}

{% for row in site.data.avengers_short %}
  
{% endfor %}

{% endraw %}

Show some data

{% raw %}

<ul>
{% for row in site.data.avengers_short %}
    <li>{{ row["Name/Alias"] }}</li>
{% endfor %}
</ul>

{% endraw %}

becomes

{% for row in site.data.avengers_short %}
• {{ row["Name/Alias"] }}
{% endfor %}

Filtering data

We could see how many of the avengers have more than 2000 appearances. This involves converting a string (all data in the CSV comes into Jekyll as a string) into an integer. We do that in a very... opaque way. We do it by adding zero to the string. (Yeah. Welcome to Jekyll. Google is your friend. Ask questions in Slack anytime.)

{% raw %}

<ul>
{% for row in site.data.avengers_short %}
    {% assign app = row["Appearances"] | plus: 0 %}
    {% if  app > 2000 %}
        <li>{{ row["Name/Alias"] }}</li>
    {% endif %}
{% endfor %}
</ul>

{% endraw %}

becomes

{% for row in site.data.avengers_short %} {% assign app = row["Appearances"] | plus: 0 %} {% if app > 2000 %}
• {{ row["Name/Alias"] }}
{% endif %} {% endfor %}

As you can see, we now have a small set of Avengers. Only a few have appeared many times. And, they're all dudes.

Why filtering?

You might not need it. To manage sections, you might just have separate CSV files.

Or, you might have one CSV, and tag sections like "OVERVIEW," "POLICY," "RECOMMENDATION." Then, you could do comparisons on that column (e.g. an if that asks if that column is OVERVIEW), and only put out part of a table at a time. You would only do this if it makes sense to keep multiple sections conceptually "together," but you'd like to render them out in chunks.

Speaking of tables!

Tables will involve a bit of HTML. It's better than mixing in Markdown with the Liquid markup. (And, I'm not really certain that you can even use Markdown in the middle of a chunk of Jekyll markup.)

{% raw %}

<table class="ds-c-table ds-c-table ds-text-body--sm">
        <thead>
            <tr>
                <th>Name/Alias</th>
                <th>Appearances</th>
                <th>Year</th>
            </tr>
        </thead>
{% for row in site.data.avengers_short %}
    {% assign app = row["Appearances"] | plus: 0 %}
    {% if  app > 2000 %}
        <tr>
            <td>{{ row["Name/Alias"] }}</td>
            <td>{{ row["Appearances"] }}</td>
            <td>{{ row["Year"] }}</td>
        </tr>
    {% endif %}
{% endfor %}
</table>

{% endraw %}

which comes out all nice and Kentucky, just the way you want:

{% for row in site.data.avengers_short %} {% assign app = row["Appearances"] | plus: 0 %} {% if app > 2000 %} {% endif %} {% endfor %}

Name/Alias	Appearances	Year
{{ row["Name/Alias"] }}	{{ row["Appearances"] }}	{{ row["Year"] }}

Links: a bit of fanciness

And, in case you have URLs you want to link in, it might look like this.

{% raw %}

<table class="ds-c-table ds-c-table--borderless ds-text-body--sm">
        <thead>
            <tr>
                <th>Name/Alias</th>
                <th>Appearances</th>
                <th>Year</th>
            </tr>
        </thead>
{% for row in site.data.avengers_short %}
    {% assign app = row["Appearances"] | plus: 0 %}
    {% if  app > 2000 %}
        <tr>
            <td><a href="{{ row["URL"] }}">{{ row["Name/Alias"] }}</a></td>
            <td>{{ row["Appearances"] }}</td>
            <td>{{ row["Year"] }}</td>
        </tr>
    {% endif %}
{% endfor %}
</table>

{% endraw %}

which renders as

{% for row in site.data.avengers_short %} {% assign app = row["Appearances"] | plus: 0 %} {% if app > 2000 %} {% endif %} {% endfor %}

Name/Alias	Appearances	Year
{{ row["Name/Alias"] }}	{{ row["Appearances"] }}	{{ row["Year"] }}

and really just adds an A tag around the name of the Avenger, using the contents of the URL column as the href for the URL. (If that statement went by a bit quick, or you're getting lost in HTML soup, give a shout.)