Inkblot, 4th attempt. Using gooey-effects to make more ink-like, and adding new 4.0 color scales.
Last active
January 5, 2018 18:38
-
-
Save pstuffa/9c5088e0e839520782f5f5bf64215aed to your computer and use it in GitHub Desktop.
Rorschach IV
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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