d3 | UI for MakeyMakey and lego characters

Built to use within a girls codeClub event for illustrating the computer as an output by triggering events with lego characters via Makey Makey

The idea is to place a LEGO character on each author block/card, to get a quote outputted by it's respective author (based off this one I did years ago using processing.js )

To start: Click the screen, to ensure it's active. Place the character to make a connection and trigger the event.

animated

Note: The LEGO characters have copper tape on them (one piece, starting under feet and running up the back) that makes the connection when you are holding and placing on the block/card connected to the crocodile clip.

There are four data files, each containing quotes that will be randomly picked when the relative figure is placed to connect to the respective arrow keys via the Makey Makey:

_data_left_arrow.json
_data_right_arrow.json
_data_up_arrow.json
_data_down_arrow.json

The SPACE key includes all the quotes in data/space.json and also those in the other data files (they are concatenated together)

These files can be changed to any quotes or author

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        html,body {
            height: 99%;
        }
        body {
            height: 100%;
            font-family: Consolas, monaco, monospace;
            margin: 0;
            color: #130c0e;
            background: #FDBB30;
            cursor: none;
        }
        h1#quote {
            font-size: 36px;
            line-height: 130%;
            padding-top: 30vh;
            width: 600px;
            margin: 0 auto;
        }
        h3#author {
            font-size: 18px;
            color: #fff;
            width: 600px;
            letter-spacing: 5px;
            padding-top: 8px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<h1 id=quote>Click the screen :)</h1>
<h3 id=author></h3>

<script src=".script-compiled.js" charset="utf-8"></script>
<script>
    // change frame height
    d3.select(self.frameElement).style('height', '600px');
</script>
</body>
</html>

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