D3 Examples - d3 | Morphological Table 1

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

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

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- https://www.basscss.com/ -->
    <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>
​
        <section class="center py4">
            <svg width="500" height="500">
                <g id="vis" transform="translate(20, 20)"></g>
            </svg>
        </section>
    </main>
​
<script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
<!-- d3 code -->
<script src=".script-compiled.js" charset="utf-8"></script>
<!-- render code -->
<script>
    d3.select(self.frameElement).style('height', '780px');
</script>
​
</body>
</html>
​
​
​
    