Skip to content

Instantly share code, notes, and snippets.

@eesur

eesur/README.md

Last active May 3, 2021 18:40
Show Gist options
  • Save eesur/a1768bc757c6df430be1 to your computer and use it in GitHub Desktop.
Save eesur/a1768bc757c6df430be1 to your computer and use it in GitHub Desktop.
Download ZIP
d3js | Eisenhower matrix
Raw
README.md

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

Raw
d3_code_toggle_yn.js
(function(global) {
'use strict';
// convenience variables
var defaultCol = '#eee',
activeCol = '#7AC143';
global.noYesBtns = function(_selection) {
global.noYesBtns = noYesBtns;
var instance = {};
var dispatch = d3.dispatch('_click');
// some default values
var nTxt = 'no', // text for NO button
yTxt = 'yes', // text for YES button
nBg = defaultCol, // unselected background for NO
yBg = defaultCol, // unselected bg for YES
nBgActive = activeCol, // selected bg for NO
yBgActive = activeCol; // selected bg for YES
instance.render = function() {
var container = d3.select(_selection);
var btn = function(txt, bg, bgActive) {
container.append('button')
.attr({
class: 'ny-btn ny-btn-unselected'
})
.style({
background: bg
})
.text(txt)
.on('click', function () {
d3.select(_selection).selectAll('.ny-btn')
.style({
background: bg,
opacity: 0.2
})
.classed('ny-btn-unselected', true)
.classed('ny-btn-selected', false);
d3.select(this)
.style({
background: activeCol,
opacity: 1
})
.classed('ny-btn-unselected', false)
.classed('ny-btn-selected', true);
dispatch._click.apply(this, arguments);
});
};
var n = btn(nTxt, nBg, nBgActive);
var y = btn(yTxt, yBg, yBgActive);
return instance;
};
instance.nBg = function(value) {
if (!arguments.length) return nBg;
nBg = value;
return this;
};
instance.yBg = function(value) {
if (!arguments.length) return yBg;
yBg = value;
return this;
};
instance.nBgActive = function(value) {
if (!arguments.length) return nBgActive;
nBgActive = value;
return this;
};
instance.yBgActive = function(value) {
if (!arguments.length) return yBgActive;
yBgActive = value;
return this;
};
instance.nTxt = function(value) {
if (!arguments.length) return nTxt;
nTxt = value;
return this;
};
instance.yTxt = function(value) {
if (!arguments.length) return yTxt;
yTxt = value;
return this;
};
d3.rebind(instance, dispatch, 'on');
return instance;
};
}(window));
Raw
index.html
<!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>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="d3_code_toggle_yn.js" charset="utf-8"></script>
<script>
(function() {
// track state of both questions: true/false
var important = null,
urgent = null;
// 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 decision() {
// deal with only uncompleted questions (one value)
if (important && urgent === null || important === null && !urgent) {
highlight('#eh-2', 0.4);
} else if (!important && urgent === null || important === null && urgent) {
highlight('#eh-3', 0.4);
} // both questions have values
else if (important && urgent) {
// Urgent and important (tasks you will do immediately)
highlight('#eh-1', 1);
} else if (!important && urgent) {
// Urgent, but not important (tasks you will delegate to someone else)
highlight('#eh-3', 1);
} else if (important && !urgent) {
// Important, but not urgent (tasks you will schedule to do later)
highlight('#eh-2', 1);
} else if (!important && !urgent) {
// Neither urgent nor important (tasks that you will eliminate)
highlight('#eh-4', 1);
}
}
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>
Raw
main.css
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600);
body {
font-family: "Source Code Pro", Consolas, monaco, monospace;
font-size: 14px;
line-height: 1.5;
font-weight: 400;
background-color: #130C0E;
color: #FDBB30;
width: 600px;
margin: 0 auto;
padding: 20px;
}
p {
color: #EC008C;
max-width: 400px;
margin-bottom: 60px;
}
h1, h3 {
font-size: 18px;
font-weight: normal;
}
#questions {
margin-bottom: 30px;
}
button.ny-btn {
font-family: "Source Code Pro", Consolas, monaco, monospace;
font-size: 16px;
letter-spacing: 3px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
color: #130C0E; /* black */
font-weight: 400;
width: 60px;
border: none;
padding: 4px 8px;
display: inline-block;
margin-right: 2px;
font-weight: 600;
}
button.ny-btn:focus {
outline:0;
}
#eisenhower {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.eh-item {
background: #7AC143;
padding: 5px;
width: 48%;
height: 150px;
margin-top: 2px;
line-height: 150px;
color: #130C0E;
font-size: 36px;
text-align: center;
opacity: 0.1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment