Skip to content

Instantly share code, notes, and snippets.

@enjalot

enjalot/.block

Created October 17, 2016 23:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save enjalot/de2b023d968abb7276b894409efdac56 to your computer and use it in GitHub Desktop.
Save enjalot/de2b023d968abb7276b894409efdac56 to your computer and use it in GitHub Desktop.
Download ZIP
merging selections
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
var dataEarly = [
{ ldap: "enjalot", x: 0 },
{ ldap: "siumei", x: 1},
{ ldap: "ramesh", x: 2}
]
var dataLate = [
{ ldap: "sami", x: 3},
{ ldap: "logan", x: 4},
{ ldap: "siumei", x: 5},
{ ldap: "phillip", x: 6},
{ ldap: "kristen", x: 7},
{ ldap: "adelaide", x: 8}
]
svg.selectAll("circle")
.data(dataEarly, function(d) {
return d.ldap
})
.enter()
.append("circle")
.attr("r", 30)
.attr("cx", function(d,i) {
return 50 + d.x * 80
})
.attr("cy", 100)
.attr("fill", "#eda39a")
.on("mouseover", function(d,i) {
console.log(i,d)
})
console.log("get ready")
setTimeout(function() {
//console.log("hiiii")
var circles = svg.selectAll("circle")
.data(dataLate, function(d) {
return d.ldap
})
var enteredCircles = circles.enter()
.append("circle")
.attr("r", 30)
.attr("cy", 100)
.attr("cx", function(d,i) {
return 50 + d.x * 80
})
.style("opacity", 0)
enteredCircles.merge(circles)
.on("mouseover", function(d,i) {
console.log(i,d)
})
.transition().duration(2000)
.attr("cx", function(d,i) {
return 50 + d.x * 80
})
.attr("fill", "#9bedd4")
.attr("stroke", "#111")
.style("opacity", 1)
}, 1000)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment