Skip to content

Instantly share code, notes, and snippets.

@pgiraud

pgiraud/README.md

Forked from anonymous/options.json
Created July 30, 2013 10:43
Show Gist options
  • Save pgiraud/6111936 to your computer and use it in GitHub Desktop.
Save pgiraud/6111936 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
options.json
{
"libraries": [
"d3",
"d3.chart",
"d3.hexbin"
],
"mode": "css",
"layout": "fullscreen mode (vertical)",
"resolution": "reset"
}
Raw
water.css
/* css goes here */
#tags {
width: 250px;
border: 1px solid blue;
}
.foo {
position: relative;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
}
.bar {
display: inline-block;
border: 1px solid red;
}
li a {
display: inline-block;
}
Raw
water.html
<!-- html goes here -->
<ul id="tags">
<li class="foo bar">lorem ipsum<a><span>fdfdf</span></a></li>
<li class="bar">lorem ipsum<a><span>fdfdf</span></a></li>
<li class="bar">lorem ipsum<a><span>fdfdf</span></a></li>
<li class="bar">lorem ipsum<a><span>fdfdf</span></a></li>
<li class="bar">lorem ipsum<a><span>fdfdf</span></a></li>
<li class="bar">lorem ipsum<a><span>fdfdf</span></a></li>
<li class="bar">lorem ipsum<a><span>fdfdf</span></a></li>
</ul>
Raw
water.js
/* javascript goes here */
d3.select("body").style("color", "black");
var $foo =d3.selectAll(".foo");
$foo.style('opacity', 1);
$foo.on("click", function() {
d3.select("body").transition()
.ease(Math.sqrt).style("color", "red");
console.log(d3.select(this).style('width'));
d3.select(this)
.transition()
.duration(500)
.style('width', "0px")
.remove();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment