eesur/README.md

## README.md

      
    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

  
## 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));

## 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>


## 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;
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	(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));
	<!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.
	—Dwight Eisenhower</p>

	<h1>Is your task: </h1>
	<h3>
	important? <span id="q1"></span>
	& 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>
	@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;
	}