sebastian-meier/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    Scatterplots with Blur

The slider is taken from http://bl.ocks.org/shancarter/5979700
Inspired by "Enhancing Scatterplots with Multi-Dimensional Focal Blur", Joachim Staib, Sebastian Grottel, Stefan Gumhold - EuroVis 2016

  
## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="icon" href="favicon.ico">

		<title>Scratterplot Blur</title>
		<style type="text/css">
			circle{
				fill:#000;
				stroke:transparent;
			}

			svg{
				margin:80px 0 0 40px;
			}

			.slider {
				position: relative;
				top: 40px;
				left: 40px;
			}

			.slider-tray {
				position: absolute;
				width: 100%;
				height: 6px;
				border: solid 1px #ccc;
				border-top-color: #aaa;
				border-radius: 4px;
				background-color: #f0f0f0;
				box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
			}

			.slider-handle {
				position: absolute;
				top: 3px;
			}

			.slider-handle-icon {
				width: 14px;
				height: 14px;
				border: solid 1px #aaa;
				position: absolute;
				border-radius: 10px;
				background-color: #fff;
				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
				top: -7px;
				left: -7px;
			}
		</style>
	</head>
	<body>
		<div class="slider"></div>
		<script src="https://d3js.org/d3.v3.min.js"></script>
		<script type="text/javascript">
			var min = 0, max = 500, width = 500, height = 500, data = [], blur = 10, radius=5;
			for(var i = 0; i<500; i++){
				data.push({
					x:Math.random()*max,
					y:Math.random()*max,
					z:Math.random()*max
				});
			}

			var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);

			/*SLIDER START*/
			var x = d3.scale.linear()
			    .domain([1, 100])
			    .range([0, width])
			    .clamp(true);

			var dispatch = d3.dispatch("sliderChange");

			var slider = d3.select(".slider")
			    .style("width", width + "px");

			var sliderTray = slider.append("div")
			    .attr("class", "slider-tray");

			var sliderHandle = slider.append("div")
			    .attr("class", "slider-handle");

			sliderHandle.append("div")
			    .attr("class", "slider-handle-icon")

			slider.call(d3.behavior.drag()
			    .on("dragstart", function() {
			      dispatch.sliderChange(x.invert(d3.mouse(sliderTray.node())[0]));
			      d3.event.sourceEvent.preventDefault();
			    })
			    .on("drag", function() {
			      dispatch.sliderChange(x.invert(d3.mouse(sliderTray.node())[0]));
			    }));

			dispatch.on("sliderChange.slider", function(value) {
			  sliderHandle.style("left", x(value) + "px")

			  scatter.attr("filter",function(d){
			  	return "url(#blur_"+Math.round(Math.abs(value*(max/100)-d.z)/max*100)+")";
			  });
			});
			/*SLIDER END*/


			var filter = svg.append("defs").selectAll("filter").data(new Array(100)).enter().append("filter")
				.attr("id",function(d,i){ return "blur_"+i; })
				.attr("x",-blur)
				.attr("y",-blur)
				.attr("width",(blur*2+radius))
				.attr("height",(blur*2+radius));

			filter.append("feGaussianBlur").datum(function(d,i){ return i; })
				.attr("in","SourceGraphic")
				.attr("stdDeviation",function(d){ return blur/100*d; });

			var scatter = svg.append("g").selectAll("circle").data(data).enter().append("circle")
				.attr("cx",function(d){return d.x;})
				.attr("cy",function(d){return d.y;})
				.attr("r",radius)
				.attr("filter",function(d){return "url(#blur_0)";});

		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="icon" href="favicon.ico">

	<title>Scratterplot Blur</title>
	<style type="text/css">
	circle{
	fill:#000;
	stroke:transparent;
	}

	svg{
	margin:80px 0 0 40px;
	}

	.slider {
	position: relative;
	top: 40px;
	left: 40px;
	}

	.slider-tray {
	position: absolute;
	width: 100%;
	height: 6px;
	border: solid 1px #ccc;
	border-top-color: #aaa;
	border-radius: 4px;
	background-color: #f0f0f0;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
	}

	.slider-handle {
	position: absolute;
	top: 3px;
	}

	.slider-handle-icon {
	width: 14px;
	height: 14px;
	border: solid 1px #aaa;
	position: absolute;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	top: -7px;
	left: -7px;
	}
	</style>
	</head>
	<body>
	<div class="slider"></div>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript">
	var min = 0, max = 500, width = 500, height = 500, data = [], blur = 10, radius=5;
	for(var i = 0; i<500; i++){
	data.push({
	x:Math.random()*max,
	y:Math.random()*max,
	z:Math.random()*max
	});
	}

	var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);

	/SLIDER START/
	var x = d3.scale.linear()
	.domain([1, 100])
	.range([0, width])
	.clamp(true);

	var dispatch = d3.dispatch("sliderChange");

	var slider = d3.select(".slider")
	.style("width", width + "px");

	var sliderTray = slider.append("div")
	.attr("class", "slider-tray");

	var sliderHandle = slider.append("div")
	.attr("class", "slider-handle");

	sliderHandle.append("div")
	.attr("class", "slider-handle-icon")

	slider.call(d3.behavior.drag()
	.on("dragstart", function() {
	dispatch.sliderChange(x.invert(d3.mouse(sliderTray.node())[0]));
	d3.event.sourceEvent.preventDefault();
	})
	.on("drag", function() {
	dispatch.sliderChange(x.invert(d3.mouse(sliderTray.node())[0]));
	}));

	dispatch.on("sliderChange.slider", function(value) {
	sliderHandle.style("left", x(value) + "px")

	scatter.attr("filter",function(d){
	return "url(#blur_"+Math.round(Math.abs(value(max/100)-d.z)/max100)+")";
	});
	});
	/SLIDER END/


	var filter = svg.append("defs").selectAll("filter").data(new Array(100)).enter().append("filter")
	.attr("id",function(d,i){ return "blur_"+i; })
	.attr("x",-blur)
	.attr("y",-blur)
	.attr("width",(blur*2+radius))
	.attr("height",(blur*2+radius));

	filter.append("feGaussianBlur").datum(function(d,i){ return i; })
	.attr("in","SourceGraphic")
	.attr("stdDeviation",function(d){ return blur/100*d; });

	var scatter = svg.append("g").selectAll("circle").data(data).enter().append("circle")
	.attr("cx",function(d){return d.x;})
	.attr("cy",function(d){return d.y;})
	.attr("r",radius)
	.attr("filter",function(d){return "url(#blur_0)";});

	</script>
	</body>
	</html>