Skip to content

Instantly share code, notes, and snippets.

@widged
Forked from tomgp/bertin500x490.jpg
Created October 12, 2015 10:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save widged/89be5296705dbe86ef6c to your computer and use it in GitHub Desktop.
Save widged/89be5296705dbe86ef6c to your computer and use it in GitHub Desktop.
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

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vibrational effect</title>
<script src="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment