D3 Examples - Vibrational effect 1

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...

xxxxxxxxxx
 
<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>
    