Skip to content

Instantly share code, notes, and snippets.

@bricof

bricof/.block

Last active May 1, 2017 12:36
Show Gist options
  • Save bricof/1f75e725ddf7b6576b5f45efdf6c90f5 to your computer and use it in GitHub Desktop.
Save bricof/1f75e725ddf7b6576b5f45efdf6c90f5 to your computer and use it in GitHub Desktop.
Download ZIP
Datanado
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var x_center = 480
var y_min = 200
var y_max = 300
var data_dots_colors = ["#CCDE66", "#AA7CAA", "#587868", "#F3A54A", "#4B90A6", "#52598B"]
var data_dots_start = []
for (var i=0; i<30; i++) {
data_dots_start.push({x: 200 + Math.random() * 560,
y: 300 + Math.random() * 200,
fill: data_dots_colors[Math.floor(Math.random() * 6)]})
}
function datanado(t, x_center, y_min, y_max){
var delta_t = (t - 500) / 1000
var data_points = d3.select("svg").selectAll("text")
.data(data_dots_start)
data_points
.enter().append("text")
.attr("fill", function(d){ return d.fill })
.text(function(d) { return Math.floor(Math.random()*2) })
.attr("transform", function(d){ return "translate(" + d.x + "," + d.y + ")" })
data_points
.attr("transform", function(d){
var x
if (delta_t < 0.8) {
x = (1 - delta_t) * d.x + delta_t * x_center
} else {
var v = (1 - delta_t) * d.x + delta_t * x_center
x = x_center + Math.sin(v / 20.0) * 10
}
var v = (1 - delta_t) * d.y + delta_t * (y_max + y_min) / 2
var y = ((y_max + y_min) / 2) + Math.sin(v / 100.0) * (y_max - y_min) / 2
return "translate(" + x + "," + y + ")"
})
}
d3.timer(function(t){
datanado(t, x_center, y_min, y_max)
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment