This is an alteration of the D3:particles example on livecoding.io. I've modified the Javascript & CSS to use rectangles rather than circles.
View this code at http://livecoding.io/6738641
This is an alteration of the D3:particles example on livecoding.io. I've modified the Javascript & CSS to use rectangles rather than circles.
View this code at http://livecoding.io/6738641
{ | |
"libraries": [ | |
"d3" | |
], | |
"mode": "css", | |
"layout": "sketchpad mode", | |
"resolution": "reset" | |
} |
svg { | |
background: #222; | |
position: absolute; | |
} | |
rect { | |
fill: none; | |
stroke-width: 4px; | |
} |
<svg></svg> |
// mouseover the graph! | |
// from http://bl.ocks.org/1062544 | |
var //w = $('svg').width(), | |
//h = $('svg').height(), | |
z = d3.scale.category20b(), | |
i = 0; | |
var svg = d3.select('svg') | |
//.attr("width", w) | |
//.attr("height", h) | |
.style("pointer-events", "all") | |
.on("mousemove", particle); | |
function particle() { | |
var m = d3.mouse(this); | |
svg.append("svg:rect") | |
.attr("x", m[0]) | |
.attr("y", m[1]) | |
.attr("width", 1e-6) | |
.attr("height", 1e-6) | |
.style("stroke", z(++i)) | |
.style("stroke-opacity", 3) | |
.transition() | |
.duration(5000) | |
.ease(Math.sqrt) | |
.attr("width", 150) | |
.attr("height", 150) | |
.style("stroke-opacity", 1e-6) | |
.remove(); | |
} |
{ } |