d3 | Morphological Table 1

This sketch is inspired from reading the amazing typographer Adrian Frutiger writings on morphology of signs and his first example table, Morphological Table 1.

The viewer's attitude toward a figure is very complex. In order to understand the procedure of taking in the meaning it is necessary to begin with a diagram with simple divisions, ... The diagram figures are built up from three vertical and three horizontal lines, which, when superimposed, alternately touch, cross, and supplement one another. Mathematically, 49 variants (7*7) can be produced with these six strokes. We call this procedure the completion of a program, seeking out all the possibilities contained in a given structure

[source: p.33 Signs and Symbols: Their Design and Meaning, Adrian Frutiger]

book image

notes:

d3 code is generating all the buttons
the user can both hover for quick viewing and click to hold the view (which can be toggled off) using pointer-events
the 49 views are drawn from filtering the data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    
    <link href="//npmcdn.com/basscss@8.0.2/css/basscss.min.css" rel="stylesheet">
    <style>
        body { 
            font-family: Consolas, monaco, monospace; 
            background: #130C0E;
            color: #FFF;
        }
        line { 
            stroke-width: 8; 
            stroke: #FDBB30;
            stroke-linecap: square;
        }
        ul {
          color: #130C0E;
          /*font-size: 13px;*/
        }
        li {
          /*padding: 2px 8px;*/
          margin-right: 1px;
          margin-left: 1px;
          width: 40px;
          height: 20px;
          background: #FDBB30;
        }
        li:hover {
          background: #130C0E;
          color: #FDBB30;
          cursor: none;
        }
    </style>
</head>
<body>
    <main class="max-width-4 mx-auto">
        <header class="pl1">
            <p>Morphological Table 1 [Adrian Frutiger, Signs and Symbols]</p>
        </header>

</body>
</html>

https://d3js.org/d3.v4.min.js