Vibrational effect 1

A recreation of a figure from Jaques Bertin's Semiology of Graphics illustrating the visual vibration achieved with certain textures and values. The effect typically appears when the proportion of the black area in the symbol ranges from 50 to 60% (ie. in the middle of this picture). Whilst this can be unpleasant Bertin identifies it as a key tool for information designers because of its powerful ability to draw a readers attention.

Here's the original...

bertins original image

forked from tomgp's block: Vibrational effect 1

<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Vibrational effect</title>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css">
	svg{
		width:100%;
		height:100%;
	}
	.outer{
		fill:#fff;
	}
	
	.inner, .background{
		fill:#000;
	}
	</style>
</head>
<body>

</body>
<script type="text/javascript">
var rmax = 37;
var width = 450, height = 450, margin = {top:22,left:22,bottom:22,right:22};
var plotWidth = width - (margin.left + margin.right);
var plotHeight = height - (margin.top + margin.bottom);

var textures = d3.range(0.1,1,0.1);
var values = d3.range(0.1,1,0.1);

var data = makeData( values, textures );

var xScale = d3.scale.linear()
	.range( [0, plotWidth] )
	.domain( [0, textures.length] );

var yScale = d3.scale.linear()
	.range( [0, plotWidth] )
	.domain( [0, values.length] );

d3.select('body').append('svg').attr({
	width:width,
	height:height,
	viewBox:"0 0 " + width + " " + height 
}).append('g').attr('transform','translate(' + margin.left + ',' + margin.top + ')')
	.selectAll('g').data( data ).enter()
	.append('g')
		.attr({
			'transform':function(d){
				return 'translate(' + xScale(d.indices[0]) + ',' + yScale(d.indices[1]) + ')';
			}
		})
		.each(circle);

function circle(d,i){
	var selection = d3.select(this);
	var radius = propertiesToRadii(d.value, d.texture);

//background circle
	selection.append('circle').attr({
		'r':rmax * radius.background,
		'class':'background'
	});

//outer circle
	selection.append('circle').attr({
		'r':rmax * radius.outer,
		'class':'outer'
	});

//inner circle
	selection.append('circle').attr({
		'r':rmax * radius.inner,
		'class':'inner'
	});
}

//for makeing an array of texture/ value objects
function makeData(valueRange, textureRange){
	var d = [];
	for(var v=0; v<valueRange.length; v++){
		for(var t=0; t<textureRange.length; t++){
			d.push({
				value:valueRange[v],
				texture:textureRange[t],
				indices:[t,v]
			});
		}
	}
	return d;
}

//an element has two properties 'value' between 0 and 1
//and 'texture' between 0 and 1
//convert these into unit radii for three concentric circles
function propertiesToRadii(v, t){
	console.log(v,t);
	function radius(area){
		return Math.sqrt( area/Math.PI );
	}

return{
		inner: radius(v * t),
		outer: radius(1 - (v - (v * t))),
		background: radius(1)
	}
}
</script>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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