d3 | UI for MakeyMakey and lego characters

.script-compiled.js

(function() {
// connect with MakeyMakey
    var body = d3.select('body')
    var quote = d3.select('h1#quote')
    var author = d3.select('h3#author')

    // background colours for each data file
    var colours = {
        space: '#FDBB30',
        left_arrow: '#ec008c', 
        right_arrow: '#ee3124',
        up_arrow: '#00b0dd',
        down_arrow: '#7ac143'
    }

    d3.queue()
        .defer(d3.json, 'data_space.json')
        .defer(d3.json, 'data_left_arrow.json')
        .defer(d3.json, 'data_right_arrow.json')
        .defer(d3.json, 'data_up_arrow.json')
        .defer(d3.json, 'data_down_arrow.json')
        .await(analyze)

    function getQuote(data) {
        return data[Math.floor(d3.randomUniform(0, data.length-1)())]
    }

    function renderQuote(d) {
        // console.log(d)
        quote.html(d.quote)
        author.html(d.author)
    }
        
    function analyze(error, space, left_arrow, right_arrow, up_arrow, down_arrow) {
        if (error) { throw error; }

        var allQuotes = space.concat(left_arrow, right_arrow, up_arrow, down_arrow)

        // console.log('allQuotes', allQuotes)

        // add some key events
        body.on('keydown', function() {
            // console.log('d3.event.keyCode:', d3.event.keyCode)
            // console.log('d3.event.key:', d3.event.key)

            var n = d3.event.keyCode

            if (n == 37) {
                console.log('Left Arrow')
                body.style('background', colours.left_arrow)
                renderQuote(getQuote(left_arrow))
            } else if (n == 38) {
                console.log('Up Arrow')
                body.style('background', '#00b0dd')
                renderQuote(getQuote(up_arrow))
            } else if (n == 39) {
                console.log('Right Arrow')
                body.style('background', '#ee3124')
                renderQuote(getQuote(right_arrow))
            } else if (n == 40) { 
                console.log('Down Arrow')
                body.style('background', '#7ac143')
                renderQuote(getQuote(down_arrow))
            } else if (n == 32) {
                console.log('SPACE')
                body.style('background', '#f47521')
                renderQuote(getQuote(allQuotes))
            } else {
                return null
            }
        })
        // .on('focus', function() {})

        // have a click event
        body.on('click', function() {
            body.style('background', '#FDBB30')
                quote.html('Place your character :)')
                author.html('(or use arrow keys)')
        })
    }

})()

README.md

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.

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

data_down_arrow.json

[ 
    {
        "quote": "You can't teach people everything they need to know. The best you can do is position them where they can find what they need to know when they need to know it.",
        "author": "Seymour Papert"
    },
    {
        "quote": "You can't think seriously about thinking without thinking about thinking about something.",
        "author": "Seymour Papert"
    },
    {
        "quote": "The role of the teacher is to create the conditions for invention rather than provide ready-made knowledge.",
        "author": "Seymour Papert"
    }
]

data_left_arrow.json

[ 
    {
        "quote": "Happiness and confidence are the prettiest things you can wear.",
        "author": "Taylor Swift"
    },
    {
        "quote": "No matter what happens in life, be good to people. Being good to people is a wonderful legacy to leave behind.",
        "author": "Taylor Swift"
    },
    {
        "quote": "I love making new friends and I respect people for a lot of different reasons.",
        "author": "Taylor Swift"
    }
]

data_right_arrow.json

[ 
    {
        "quote": "The most damaging phrase in the language is: It's always been done that way.",
        "author": "Grace Hopper"
    },
    {
        "quote": "A ship in port is safe, but that's not what ships are built for.",
        "author": "Grace Hopper"
    },
    {
        "quote": "One accurate measurement is worth a thousand expert opinions.",
       "author": "Grace Hopper"
    }
]

data_space.json

[ 
    {
        "quote": "Nothing is impossible, the word itself says 'I'm possible'!",
        "author": "Audrey Hepburn"
    },
    {
        "quote": "When someone tells you that you can\"t, turn around and say ‘watch me",
        "author": "Anonymous"
    },
    {
        "quote": "I can’t think of any better representation of beauty than someone who is unafraid to be herself.",
        "author": "Emma Stone"
    },
    {
        "quote": "Believe in yourself and you can do unbelievable things",
       "author": "Unknown"
    },
    {
        "quote": "The most effective way to do it, is to do it.",
       "author": "Amelia Earhart"
    }
]

data_up_arrow.json

[ 
    {
        "quote": "We want to encourage a world of creators, of inventors, of contributors. Because this world that we live in, this interactive world, is ours.",
        "author": "Ayah Bdeir"
    },
    {
        "quote": "Everyone is creative and everyone is a techie.",
        "author": "Ayah Bdeir"
    },
    {
        "quote": "LEGO has essentially taken the concrete block, the building block of the world, and made it into the building block of our imagination.",
       "author": "Ayah Bdeir"
    }
]

index.html

<!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="https://d3js.org/d3.v4.min.js"></script>
<script>window.d3 || document.write('<script src="../d3.min4.4.0.js" charset="utf-8"><\/script>')</script>

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

script.js

(function() {
// connect with MakeyMakey
    const body = d3.select('body')
    const quote = d3.select('h1#quote')
    const author = d3.select('h3#author')

    // background colours for each data file
    const colours = {
        space: '#FDBB30',
        left_arrow: '#ec008c', 
        right_arrow: '#ee3124',
        up_arrow: '#00b0dd',
        down_arrow: '#7ac143'
    }

    d3.queue()
        .defer(d3.json, 'data_space.json')
        .defer(d3.json, 'data_left_arrow.json')
        .defer(d3.json, 'data_right_arrow.json')
        .defer(d3.json, 'data_up_arrow.json')
        .defer(d3.json, 'data_down_arrow.json')
        .await(analyze)

    function getQuote(data) {
        return data[Math.floor(d3.randomUniform(0, data.length-1)())]
    }

    function renderQuote(d) {
        // console.log(d)
        quote.html(d.quote)
        author.html(d.author)
    }
        
    function analyze(error, space, left_arrow, right_arrow, up_arrow, down_arrow) {
        if (error) throw error;

        var allQuotes = space.concat(left_arrow, right_arrow, up_arrow, down_arrow)

        // console.log('allQuotes', allQuotes)

        // add some key events
        body.on('keydown', function() {
            // console.log('d3.event.keyCode:', d3.event.keyCode)
            // console.log('d3.event.key:', d3.event.key)

            let n = d3.event.keyCode

            if (n == 37) {
                console.log('Left Arrow')
                body.style('background', colours.left_arrow)
                renderQuote(getQuote(left_arrow))
            } else if (n == 38) {
                console.log('Up Arrow')
                body.style('background', '#00b0dd')
                renderQuote(getQuote(up_arrow))
            } else if (n == 39) {
                console.log('Right Arrow')
                body.style('background', '#ee3124')
                renderQuote(getQuote(right_arrow))
            } else if (n == 40) { 
                console.log('Down Arrow')
                body.style('background', '#7ac143')
                renderQuote(getQuote(down_arrow))
            } else if (n == 32) {
                console.log('SPACE')
                body.style('background', '#f47521')
                renderQuote(getQuote(allQuotes))
            } else {
                return null
            }
        })
        // .on('focus', function() {})

        // have a click event
        body.on('click', function() {
            body.style('background', '#FDBB30')
                quote.html('Place your character :)')
                author.html('(or use arrow keys)')
        })
    }

})()

thumbnail.png