Data by Design Chapter Navline Implementation

May 29, 2020 · by · in databydesign

I’ve been working on the implementation of the chapter navigation line.

Here are some features listed:

  • Blocks/Nodes with different colors represent different types of visualization, where their position in the navline is determined by their position in the chapter.
  • The user is able to scroll through the chapter and having their reading progress represented by the colored part of the navline.
  • The user’s current location is indicated by a separate block/node on the navline.
  • The user’s highlight(linked to the notebook) is represented by a separate column of blocks/nodes (peabody and dubois) or its background (playfair). The transparency of the blocks/nodes/background color is determined by the number of highlights attached to the subsection.
  • Able to hover over the block/node and able to jump to the visualization location in the chapter by clicking.

 

Peabody Chapter

Dubois Chapter

Playfair Chapter