Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Fast prototyping tricks - Display prototype on device

View README.md
View README.md
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
<!DOCTYPE html>
<meta name="viewport" content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0' />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta charset="utf-8">
<style>
/* Avoid swipe gesture selecting part of the app */
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background: #444;
/* make sure the body cannot be scrolled */
overflow: hidden;
position: fixed;
top:0;
left:0;
}
circle {
fill: #f48;
}
</style>
 
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.10/hammer.min.js"></script>
<script type='text/javascript'>
(function () {
var color = d3.scale.category20c(d3.range(0, 20));
window.addEventListener('load', function () {
var width = window.innerWidth;
var height = window.innerHeight;
var svg = d3.select('body').append('svg')
.attr('width', '100%')
.attr('height', '100%');
var r = Math.min(width, height) / 8;
var circle = svg.append('circle')
.attr('cx', width/2)
.attr('cy', height/2)
.attr('r', r);
Hammer(circle.node()).on('tap', function (event) {
var cx = r + (width - 2 * r) * Math.random();
var cy = r + (height - 2 * r) * Math.random();
circle
.transition()
.duration(500)
.ease('bounce')
.attr('cx', cx)
.attr('cy', cy);
});
Hammer(d3.select('body').node()).on('swipe', function (event) {
circle.style('fill', color(Math.floor(Math.random() * 20)));
});
document.body.addEventListener('touchmove', function (e) { e.preventDefault(); })
});
})();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.