Skip to content

Instantly share code, notes, and snippets.

@edwardabraham

edwardabraham/chemistry.html

Last active August 29, 2015 14:07
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 edwardabraham/6c13569d311ffc67c129 to your computer and use it in GitHub Desktop.
Save edwardabraham/6c13569d311ffc67c129 to your computer and use it in GitHub Desktop.
Download ZIP
Experiments in D3 - diffusing particles
Raw
chemistry.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: #333;
}
</style>
<body>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var DURATION = 100;
var DISTANCE = 40;
var N = 100;
var RADIUS = 20;
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var data = []
for (i=0; i < N; i++){
if (i < N/2.0){
data.push([x*0.6, y*0.5, "steelblue"]);
} else {
data.push([x*0.4, y*0.5, "white"]);
}
}
d3.select("body").append("svg")
.attr("width", x)
.attr("height", y)
d3.select("svg")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d){return d[0];})
.attr("cy", function(d){return d[1];})
.attr("r", RADIUS)
.attr("style", function(d){ return "fill:"+ d[2] +";"})
.attr("opacity", 0.5)
function updateWindow(){
x = w.innerWidth || e.clientWidth || g.clientWidth;
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
d3.select("svg").attr("width", x).attr("height", y);
}
window.onresize = updateWindow;
function react(quadtree){
return function(d, i){
var nx1 = d.x - RADIUS,
nx2 = d.x + RADIUS,
ny1 = d.y - RADIUS,
ny2 = d.y + RADIUS;
quadtree.visit(function(quad, x1, y1, x2, y2) {
if (quad.point &&
(quad.point !== d) &&
(quad.point[2] !== d[2]) &&
(quad.point[2] !== "yellow") &&
(d[2] !== "yellow")) {
if (Math.sqrt(Math.pow(d[0] - quad.point[0], 2) +
Math.pow(d[1] - quad.point[1], 2)) < RADIUS){
console.log("yellow");
d[2] = "yellow";
quad.point[2] = "yellow";
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
});
}
}
function tick(){
for (i = 0; i < data.length; i++){
data[i][0] += DISTANCE*(Math.random() - 0.5);
data[i][1] += DISTANCE*(Math.random() - 0.5);
data[i][0] = Math.min(Math.max(data[i][0], 0), x);
data[i][1] = Math.min(Math.max(data[i][1], 0), y);
}
var quadtree = d3.geom.quadtree()
.extent([[-1, -1], [x + 1, y + 1]])
(data);
d3.select("svg")
.selectAll("circle")
.data(data)
.each(react(quadtree))
.transition()
.attr("cx", function(d){return d[0];})
.attr("cy", function(d){return d[1];})
.attr("style", function(d){ return "fill:"+ d[2] +";"})
.duration(DURATION)
.ease("linear")
.delay(function(d, i){return i / N * DURATION;})
}
setInterval(function(){
tick();
}, DURATION);
</script>
Raw
contagion.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: #333;
}
</style>
<body>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var DURATION = 100;
var DISTANCE = 40;
var N = 100;
var RADIUS = 20;
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var data = []
for (i=0; i < N; i++){
data.push([x*Math.random(), y*Math.random(), "white"]);
}
data[0][2] = "yellow";
d3.select("body").append("svg")
.attr("width", x)
.attr("height", y)
d3.select("svg")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d){return d[0];})
.attr("cy", function(d){return d[1];})
.attr("r", RADIUS)
.attr("style", function(d){ return "fill:"+ d[2] +";"})
.attr("opacity", 0.5)
function updateWindow(){
x = w.innerWidth || e.clientWidth || g.clientWidth;
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
d3.select("svg").attr("width", x).attr("height", y);
}
window.onresize = updateWindow;
function react(quadtree){
return function(d, i){
var nx1 = d.x - RADIUS,
nx2 = d.x + RADIUS,
ny1 = d.y - RADIUS,
ny2 = d.y + RADIUS;
quadtree.visit(function(quad, x1, y1, x2, y2) {
if (quad.point &&
(quad.point !== d) &&
(quad.point[2] !== "yellow") &&
(d[2] == "yellow")) {
if (Math.sqrt(Math.pow(d[0] - quad.point[0], 2) +
Math.pow(d[1] - quad.point[1], 2)) < RADIUS){
quad.point[2] = "yellow";
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
});
}
}
function tick(){
for (i = 0; i < data.length; i++){
data[i][0] += DISTANCE*(Math.random() - 0.5);
data[i][1] += DISTANCE*(Math.random() - 0.5);
data[i][0] = Math.min(Math.max(data[i][0], 0), x);
data[i][1] = Math.min(Math.max(data[i][1], 0), y);
}
var quadtree = d3.geom.quadtree()
.extent([[-1, -1], [x + 1, y + 1]])
(data);
d3.select("svg")
.selectAll("circle")
.data(data)
.each(react(quadtree))
.transition()
.attr("cx", function(d){return d[0];})
.attr("cy", function(d){return d[1];})
.attr("style", function(d){ return "fill:"+ d[2] +";"})
.duration(DURATION)
.ease("linear")
.delay(function(d, i){return i / N * DURATION;})
}
setInterval(function(){
tick();
}, DURATION);
</script>
Raw
diffusion.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: #333;
}
</style>
<body>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var DURATION = 500;
var DISTANCE = 100;
var N = 100;
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var data = []
for (i=0; i < N; i++){
if (i < N/2.0){
data.push([x*0.6, y*0.5, "steelblue"]);
} else {
data.push([x*0.4, y*0.5, "white"]);
}
}
d3.select("body").append("svg")
.attr("width", x)
.attr("height", y)
d3.select("svg")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d){return d[0];})
.attr("cy", function(d){return d[1];})
.attr("r", 20)
.attr("style", function(d){ return "fill:"+ d[2] +";"})
.attr("opacity", 0.5)
function updateWindow(){
x = w.innerWidth || e.clientWidth || g.clientWidth;
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
d3.select("svg").attr("width", x).attr("height", y);
}
window.onresize = updateWindow;
function updateData(){
for (i = 0; i < data.length; i++){
data[i][0] += DISTANCE*(Math.random() - 0.5);
data[i][1] += DISTANCE*(Math.random() - 0.5);
data[i][0] = Math.min(Math.max(data[i][0], 0), x);
data[i][1] = Math.min(Math.max(data[i][1], 0), y);
}
d3.select("svg")
.selectAll("circle")
.data(data)
.transition()
.attr("cx", function(d){return d[0];})
.attr("cy", function(d){return d[1];})
.duration(DURATION)
.ease("linear")
.delay(function(d, i){return i / N * DURATION;})
}
setInterval(function(){
updateData();
}, DURATION);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment