Skip to content

Instantly share code, notes, and snippets.

@pstuffa
Last active September 12, 2016 02:31
Show Gist options
  • Save pstuffa/75b3307a34e4623c67ce to your computer and use it in GitHub Desktop.
Save pstuffa/75b3307a34e4623c67ce to your computer and use it in GitHub Desktop.
Rorschach III

Inkblot, 3rd attempt. Playing with transitions...too much...

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
margin: 0;
}
#button {
position: absolute;
top: 20px;
left: 333px;
}
</style>
<body>
<div id="button">
<button>Click Until You See What You Want To See</button>
</div>
<br />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
function randomData(datalist) {
for (var i = 0; i < 200; i++) {
var newNumber = Math.random() * 40;
datalist.push(newNumber);
}
}
var dataset = [];
randomData(dataset);
var margin = {top: 40, right: 40, bottom: 40, left: 40},
width = 1000 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width/2])
.domain([-1, d3.max(dataset) + 1 ]).nice();
var y = d3.scale.linear()
.range([height, 0])
.domain([-5, 205]).nice();
var sizeScale = d3.scale.linear()
.domain([0.0,30.0])
.range([1, 15]);
var opacityScale = d3.scale.linear()
.domain([0.0,30.0])
.range([0.70, 1]);
var circles = d3.select("body")
.select("svg")
.selectAll(".circles");
d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + 450 + "," + margin.top + ")")
.selectAll("circle")
.data(dataset)
.enter().append("circle")
.attr("class","circles")
.attr("r", function(d, i) { return sizeScale(d); })
.attr("cx", function(d, i) { return x(d); })
.attr("cy", function(d, i) { return y(i); })
.attr("transform", "translate(-400, 0) scale(1, 1)");
d3.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + 450 + "," + margin.top + ")")
.selectAll("circle")
.data(dataset)
.enter().append("circle")
.attr("class","circles")
.attr("r", function(d, i) { return sizeScale(d); })
.attr("cx", function(d, i) { return x(d); })
.attr("cy", function(d, i) { return y(i); })
.attr("transform", "translate(400, 0) scale(-1, 1)");
function updateData() {
// Get the data again
var newdata = [];
randomData(newdata);
// Scale the range of the data again
x.domain([-1, d3.max(newdata) + 1 ]).nice();
d3.select("body").selectAll("g")
.selectAll("circle")
.data(newdata)
.transition()
.duration(1500)
.attr("r",2)
.attr("cx", function(d, i) { return x(d); })
.attr("cy", function(d, i) { return y(d); })
.transition()
.duration(1500)
.attr("r",2)
.attr("cx", width/2)
.attr("cy", height/2)
.transition()
.duration(1500)
.attr("r",2)
.attr("cx", function(d, i) { return y(i); })
.attr("cy", function(d, i) { return y(i); })
.transition()
.delay(4500)
.duration(3000)
.attr("class","circles")
.attr("r", function(d, i) { return sizeScale(d); })
.attr("cx", function(d, i) { return x(d); })
.attr("cy", function(d, i) { return y(i); })
;
}
d3.selectAll("button").on("click",updateData)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment