Old school D3 from simpler times

All examples By author By category About

pstuffa

Full window Github gist

Rorschach IV

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

<!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 https://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: https://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>

https://d3js.org/d3.v4.min.js