Slides can be used to display information about a specific topic; for example, a project or article.

The code for the slider consists in using a .slider element to wrap multiple slide components. That will automatically trigger the JS and all the extra functionality and styles used by slick.js. We are extending Slick with our own visual styles.

              <div class="slider">
                <div class="slide">...</div> <!-- Slide Component -->
                <div class="slide">...</div> <!-- Slide Component -->
                <div class="slide">...</div> <!-- Slide Component -->
                ...
              </div>
            

The .table-sortable element uses List.js for sorting and fuzzysearch. This example uses three classes, .item__name, .item__category, and .item__date.

The .accordion element is based upon dl, dt and dd elements and the .accordion__item class used to separate the sections of the accordion.

The map component uses a custom D3.js script. The script makes it easy to represent discrete numerical data per geographic region.

The script targets two div elements:

              <div id="map-wrapper">
                <!-- The map overlayed with circular elements -->
              </div>
              <div id="caption">
                <!-- Dynamically created labels-captions -->
              </div>
          

The script is dependent on two files:

1. A topojson/geojson file. This file is used to create the base map;
2. A csv/json file with discrete values corresponding to the specific features of the base map (counties, states, provinces, etc.). This file is used to create circular elements over the base map and the labels-captions on hover. The features targeted in this file need to exist in the topojson/geojson file and follow the same naming convention. If the topojson/geojson does not contain certain features, they cannot be targeted.

The files used to create the above example can be found in the static folder.

The styling of the map component is independent of the D3.js script and can be changed using custom CSS.