Columbia '20 // hackNY '17
Published
Edited
Feb 29, 2020
4 stars
md `## waves`
waves = {
const svg = d3.select(DOM.svg(1000, 1000));
var dict = [];
for (var i = 0; i < 38; i++) {
for (var j = 0; j < 38; j++) {
dict.push({"x": 25+i*25 + (j%2)*12.5,
"y": 25+j*25
});
}
}
svg.selectAll("circle")
.data(dict)
.enter()
.append("circle")
.attr("r", 4)
.attr("cx", function(d, i) {
return d["x"];
})
.attr("cy", function(d, i) {
return d["y"];
})
d3.timer(animateThings);
function animateThings(time) {
var sineVal = 500*(Math.sin(time*0.001) + 1);
svg.selectAll("circle").attr("r", function(d) {
if (Math.abs(d["x"] - sineVal) < 50) {
return 4 + (5-Math.abs(d["x"] - sineVal)/10)
return 10;
}
return 4
})
.attr("fill", function(d) {
return d3.interpolateViridis(1-(Math.abs(d["x"] - sineVal)/1000));
});
}
return svg.node()
}
md `## interesting circles`
circles = {
const svg = d3.select(DOM.svg(1000, 1000));
var dict = [];
for (var i = 0; i < 38; i++) {
for (var j = 0; j < 38; j++) {
dict.push({"x": 25+i*25 + (j%2)*12.5,
"y": 25+j*25
});
}
}
svg.selectAll("circle")
.data(dict)
.enter()
.append("circle")
.attr("r", 4)
.attr("cx", function(d, i) {
return d["x"];
})
.attr("cy", function(d, i) {
return d["y"];
})
svg.on('mousemove', onMouseover);
return svg.node();
}
function onMouseover(d, i) {
var coordinates = d3.mouse(this);
var x = coordinates[0];
var y = coordinates[1];
d3.selectAll("circle")
.attr("fill", function(d, i) {
var distance = Math.sqrt(((x-d["x"])*(x-d["x"])) + ((y-d["y"])*(y-d["y"])))
return d3.interpolateViridis(distance/1000);
})
.attr("r", function(d, i) {
var distance = Math.sqrt(((x-d["x"])*(x-d["x"])) + ((y-d["y"])*(y-d["y"])))
return 5+ distance/75;
})
}
d3 = require("d3@5");
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
