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