Skip to content

Instantly share code, notes, and snippets.

@feyderm

feyderm/index.html

Last active November 11, 2016 22:18
Show Gist options
  • Save feyderm/2b6d930df96aaa0b56a833277025c97a to your computer and use it in GitHub Desktop.
Save feyderm/2b6d930df96aaa0b56a833277025c97a to your computer and use it in GitHub Desktop.
Download ZIP
Opacity to jittered scatterplot
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div id="block"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
// credit: Christ Viau on Google Groups
// https://groups.google.com/forum/#!topic/d3-js/IBf4TFvRPIw
// http://www.biovisualize.com/
var gen_n = d3.randomNormal(400, 100);
var j = 20,
y_jitter = d3.randomUniform(-j, j);
var d = d3.range(700).map(i => gen_n());
svg = d3.select("#block")
.append("svg")
.attr("height", 400)
.attr("width", 700);
data_pt = svg.selectAll("g")
.data(d)
.enter(d)
.append("g");
var y = 250,
height = 200,
width = 1,
opacity = 0.2,
fill = "#660066";
// for reference
data_pt.append("rect")
.attr("x", d => d)
.attr("y", y)
.attr("height", height)
.attr("width", width)
.attr("opacity", opacity)
.style("fill", fill);
// for transition
data_pt.append("rect")
.attr("class", "transition")
.attr("x", d => d)
.attr("y", y)
.attr("height", height)
.attr("width", width)
.attr("opacity", 0)
.style("fill", fill);
d3.selectAll(".transition")
.transition()
.duration(3000)
.delay(750)
.attr("y", () => 200 + y_jitter())
.attr("height", 2)
.attr("width", 2)
.attr("rx", 2)
.attr("rx", 2)
.attr("opacity", 1.0)
.style("fill", "#333333");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment