Skip to content

Instantly share code, notes, and snippets.

@d3indepth

d3indepth/.block

Last active August 2, 2017 11:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save d3indepth/bdc412597d64502e7ab82d8ff0d56bb7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save d3indepth/bdc412597d64502e7ab82d8ff0d56bb7 to your computer and use it in GitHub Desktop.
Download ZIP
General update pattern (highlight entering elements)
Raw
.block
license: gpl-3.0
height: 130
border: no
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>General update pattern (highlight entering elements)</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: #ccc;
color: white;
padding: 8px;
width: 14px;
height: 14px;
text-align: center;
}
#content div.new {
background-color: orange;
}
</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')
.classed('new', true)
.text(function(d) {
return d;
});
u.text(function(d) {
return d;
})
.classed('new', false);
u.exit().remove();
}
doUpdate();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment