Skip to content

Instantly share code, notes, and snippets.

@ninestar09
Created March 4, 2016 17:34
Show Gist options
  • Save ninestar09/55edf22d4df04cc526c7 to your computer and use it in GitHub Desktop.
Save ninestar09/55edf22d4df04cc526c7 to your computer and use it in GitHub Desktop.
Tributary inlet
{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":621,"height":552,"hide":false},"endpoint":"","description":"Tributary inlet","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true}
/*d3.selection.prototype.moveToFront = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};
*/
var svg = d3.select("svg");
var data = d3.range(10);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr({
cx: function(d,i) {
return d * 20 + 100
},
cy: 100,
r: 20,
fill: "#aaa",
stroke: "#000"
})
.on("mouseover", function() {
var sel = d3.select(this);
sel.moveToFront();
});
Display the source blob
Display the rendered blob
Raw
<svg class="tributary_svg" width="1308" height="703"><circle cx="100" cy="100" r="20" fill="#aaa" stroke="#000"></circle><circle cx="120" cy="100" r="20" fill="#aaa" stroke="#000"></circle><circle cx="140" cy="100" r="20" fill="#aaa" stroke="#000"></circle><circle cx="160" cy="100" r="20" fill="#aaa" stroke="#000"></circle><circle cx="180" cy="100" r="20" fill="#aaa" stroke="#000"></circle><circle cx="200" cy="100" r="20" fill="#aaa" stroke="#000"></circle><circle cx="220" cy="100" r="20" fill="#aaa" stroke="#000"></circle><circle cx="240" cy="100" r="20" fill="#aaa" stroke="#000"></circle><circle cx="260" cy="100" r="20" fill="#aaa" stroke="#000"></circle><circle cx="280" cy="100" r="20" fill="#aaa" stroke="#000"></circle></svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment