Skip to content

Instantly share code, notes, and snippets.

@rpragana

rpragana/index.html

Created April 30, 2018 11:38
Show Gist options
  • Save rpragana/a33feea9091292bd396af63506035146 to your computer and use it in GitHub Desktop.
Save rpragana/a33feea9091292bd396af63506035146 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>General update pattern</title>
</head>
<style>
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
color: #333;
}
#menu {
margin: 10px;
}
#content div {
display: inline-block;
margin: 2px;
background-color: orange;
color: white;
padding: 8px;
width: 14px;
height: 14px;
text-align: center;
}
</style>
<body>
<div id="menu">
<button onClick="doUpdate();">Update</button>
</div>
<div id="content">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>
var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
function doUpdate() {
var rand = Math.floor( Math.random() * 26 );
var myData = letters.slice(0, rand).split('');
update(myData);
}
function update(data) {
var u = d3.select('#content')
.selectAll('div')
.data(data);
u.enter()
.append('div')
.merge(u)
.text(function(d) {
return d;
});
u.exit().remove();
}
doUpdate();
</script>
<script id="jsbin-javascript">
sadfsdfsafsdsdsadf
</script>
<script id="jsbin-source-javascript" type="text/javascript">sadfsdfsafsdsdsadf</script></body>
</html>
Raw
jsbin.gist.js
sadfsdfsafsdsdsadf
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment