index.html

---
title: Home
---
<header>
    <h1>Infopoetry</h1>
    <div>
        <p>How do we reconcile the description of a phenomenon with the experience we have about it? A “poetic” approach to data could help: there are moments in the data-journey when “feeling” the phenomenon behind the data could be as relevant as accurately “seeing” the data that represent it.</p>
    </div>
    <div id="my-canvas"></div>
</header>
<main class="gallery">
    <div class="filters">
        <div class="filter">
            <p class="filter__title" id="topic">Topic<span class="filter__arrow">&#8250;</span></p>
            <div class="filter__choices">
                {% for topic in site.topics %}
                <div><label for="{{ topic.title | slugify: 'latin' }}">{{ topic.title }}</label><input type="checkbox" name="topic" id="{{ topic.title | slugify: 'latin' }}"><span class="filter__check"></span></div>
                {% endfor %}
            </div>
        </div>
        <div class="filter">
            <p class="filter__title" id="medium">Medium<span class="filter__arrow">&#8250;</span></p>
            <div class="filter__choices">
                {% for medium in site.mediums %}
                <div><label for="{{ medium.title | slugify: 'latin' }}">{{ medium.title }}</label><input type="checkbox" name="medium" id="{{ medium.title | slugify: 'latin' }}"><span class="filter__check"></span></div>
                {% endfor %}
            </div>
        </div>
        <div class="filter">
            <p class="filter__title" id="year">Year<span class="filter__arrow">&#8250;</span></p>
            <div class="filter__choices">
                {% assign years = site.infopoetries | group_by:"year" | sort: "name" | reverse %}
                {% for year in years %}
                <div><label for="{{ year.name | slugify: 'latin' | prepend: 'aa' }}">{{ year.name | prepend: 'a.a. ' }}</label><input type="checkbox" name="year" id="{{ year.name | slugify: 'latin' | prepend: 'aa' }}"><span class="filter__check"></span></div>
                {% endfor %}
            </div>
        </div>
        <div class="filter">
            <p class="filter__title" id="institute">Institute<span class="filter__arrow">&#8250;</span></p>
            <div class="filter__choices">
                {% for institute in site.institutes %}
                <div><label for="{{ institute.title | slugify: 'latin' }}">{{ institute.title }}</label><input type="checkbox" name="institute" id="{{ institute.title | slugify: 'latin' }}"><span class="filter__check"></span></div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="infopoetries">
        {% assign infopoetries = site.infopoetries | sort: "year" | reverse %}
        {% for infopoetry in infopoetries %}
        <a href="{{ infopoetry.title | escape | replace: '&#39;', '' | slugify: 'latin' | append: '.html' | prepend: 'infopoetries/' }}" class="infopoetry {{ infopoetry.topic | slugify: 'latin' }} {{ infopoetry.medium | slugify: 'latin' }} {{ infopoetry.year | slugify: 'latin' | prepend: 'aa' }} {{ infopoetry.institute | slugify: 'latin' }}" data-year="{{ infopoetry.year | slice: -4, 4 }}">
            <img src="{{ '/assets/images/placeholder.jpg' | relative_url }}" data-src="{{ infopoetry.featured | relative_url }}" alt="Feature image for the project {{ infopoetry.title }}">
            <div class="infopoetry__content">
                <h2 class="sort--title">{{ infopoetry.title | replace: 'punctuation', '' }}</h2>
                <div class="infopoetry__desc">
                    <h3>by {{ infopoetry.author.name }}</h3>
                    <p>{{ infopoetry.topic }}</p>
                    <p>{{ infopoetry.medium }}</p>
                    <p>{{ infopoetry.institute }}</p>
                    <p>{{ infopoetry.year | prepend: 'a.a. ' }}</p>
                </div>
            </div>
        </a>
        {% endfor %}
    </div>
</main>