d3js | Eisenhower matrix

Just two simple questions to prioritise tasks, using Eisenhower’s strategy matrix.

"Using the decision matrix, you will separate your actions based on four possibilities.

Urgent and important (tasks you will do immediately)
Important, but not urgent (tasks you will schedule to do later)
Urgent, but not important (tasks you will delegate to someone else)
Neither urgent nor important (tasks that you will eliminate)

The great thing about this matrix is that it can be used for broad productivity plans (“How should I spend my time each week?”) and for smaller, daily plans (“What should I do today?”)"

text source & more info

<!DOCTYPE html>
<meta charset='utf-8'>
<link rel="stylesheet" href="main.css">
<body>
<header id="questions">
    <p>What is important is seldom urgent and what is urgent is seldom important.
     &mdash;Dwight Eisenhower</p>

<h1>Is your task: </h1>
    <h3>
        important? <span id="q1"></span> 
        &amp; urgent? <span id="q2"></span>
    </h3>
</header>

<ul id='eisenhower'>
    <li class="eh-item" id="eh-1">Just do it</li>
    <li class="eh-item" id="eh-2">Trello it</li>
    <li class="eh-item" id="eh-3">Delegate it</li>
    <li class="eh-item" id="eh-4">Drop it</li>
</ul>

// render no/yes buttons
    var q1 = noYesBtns('#q1')
        .nBg('#FDBB30')
        .yBg('#FDBB30')
        .on('_click', function () {

if (this.firstChild.data == 'yes') {
                important = true; 
            } else {
                important = false; 
            } 
            // apply decision
            decision();
        })
        .render();

var q2 = noYesBtns('#q2')
        .nBg('#FDBB30')
        .yBg('#FDBB30')
        .on('_click', function () {

if (this.firstChild.data === 'yes') {
                urgent = true; 
            } else {
                urgent = false; 
            }

decision();
        })
        .render();

function highlight(id, alpha) {
        d3.selectAll('.eh-item').style('opacity', 0.1);
        d3.select(id).transition().style('opacity', alpha);
    }

}());

// just for blocks viewer size
d3.select(self.frameElement).style('height', '700px');

</script>
</body>

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