Skip to content

Instantly share code, notes, and snippets.

@pstuffa

pstuffa/.block

Last active January 5, 2018 18:38
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pstuffa/9c5088e0e839520782f5f5bf64215aed to your computer and use it in GitHub Desktop.
Save pstuffa/9c5088e0e839520782f5f5bf64215aed to your computer and use it in GitHub Desktop.
Download ZIP
Rorschach IV
Raw
.block
license: mit
Raw
README.md

Inkblot, 4th attempt. Using gooey-effects to make more ink-like, and adding new 4.0 color scales.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
margin: 0;
}
#chart {
margin: auto;
display: block
}
</style>
<body>
<div id="chart" onHover="update()">
</div>
<br />
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var margin = {top: 30, right: 0, bottom: 30, left: 0}
, width = window.innerWidth - margin.left - margin.right
, height = window.innerHeight - margin.top - margin.bottom
, n = 200;
var x = d3.scaleLinear()
.range([0, width/2])
.domain([0, 1 ]);
var y = d3.scaleLinear()
.range([height, 0])
.domain([0, n]);
var sizeScale = d3.scaleLinear()
.domain([0,1])
.range([5, 20])
var colorScale = d3.scaleSequential(d3.interpolateCool)
.domain([0, 1]);
var dataset = d3.range(n).map(function() { return Math.random(); })
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("class", "circleWrapper")
.style("filter", "url(#gooeyCodeFilter)")
var left = svg.append("g")
.attr("transform", "translate(" + width/2 + "," + margin.top + ")");
// from http://bl.ocks.org/nbremer/e627a8fced026a9286932c6c0a02d71b
var defs = svg.append("defs");
var filter = defs.append("filter").attr("id","gooeyCodeFilter");
filter.append("feGaussianBlur")
.attr("in","SourceGraphic")
.attr("stdDeviation","10")
//to fix safari: http://stackoverflow.com/questions/24295043/svg-gaussian-blur-in-safari-unexpectedly-lightens-image
.attr("color-interpolation-filters","sRGB")
.attr("result","blur");
filter.append("feColorMatrix")
.attr("in","blur")
.attr("mode","matrix")
.attr("values","1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7")
.attr("result","gooey");
left.selectAll(".left-circles")
.data(dataset)
.enter().append("circle")
.attr("class","left-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); })
.style("fill", function(d, i) { return colorScale(d); })
.attr("transform", "translate(-400, 0) scale(1, 1)");
var right = svg.append("g")
.attr("transform", "translate(" + width/2 + "," + margin.top + ")")
right.selectAll(".right-circles")
.data(dataset)
.enter().append("circle")
.attr("class","right-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); })
.style("fill", function(d, i) { return colorScale(d); })
.attr("transform", "translate(400, 0) scale(-1, 1)");
function update() {
// Get the data again
var newdata = d3.range(n).map(function() { return Math.random(); })
d3.selectAll(".left-circles")
.data(newdata)
.transition()
.delay(function(d,i) { return i*10 })
.duration(3000)
.attr("r", function(d, i) { return sizeScale(d); })
.style("fill", function(d, i) { return colorScale(d); })
.attr("cx", function(d, i) { return x(d); })
.attr("cy", function(d, i) { return y(i); });
d3.selectAll(".right-circles")
.data(newdata)
.transition()
.delay(function(d,i) { return i*10 })
.duration(3000)
.attr("r", function(d, i) { return sizeScale(d); })
.style("fill", function(d, i) { return colorScale(d); })
.attr("cx", function(d, i) { return x(d); })
.attr("cy", function(d, i) { return y(i); });
}
d3.interval(update, 8000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment