D3 Examples - icon array scale interactive example

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>Icon array scaletest</title>
    <script src="//d3js.org/d3.v4.0.0-alpha.18.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="d3-iconarray.js"></script>
    <style type="text/css">
    *{
        font-family: sans-serif;
        font-weight: bold;
        letter-spacing: 1px;
    }
​
    input[type='range']{
        width:600px;
    }
​
    p{
        font-weight: normal;
    }
    .arg{
        color: #B00;
        font-weight: bold;
    }
​
    </style>
</head>
<body>
​
<p>gapInterval(<span class="arg" id="interval-value">4</span>):</p> <input value="4" id="interval-input" type="range" min="0" max="12" step="1"></input>
​
<p>gapSize(<span class="arg" id="size-value">1</span>):</p><input value="1" id="size-input" type="range" min="0" max="3" step="0.1"></input>
​
​
<div id="simple-example">
    
</div>
</body>
<script type="text/javascript">
    
var layout = d3_iconarray.layout();
​
var data = d3.range(1, 145, 1);
​
var grid = layout(data);
var dotRadius = 10;
var width = 600, 
    height = 600, 
    margin = {top:20, bottom:20, left:20, right:20 };
​
var arrayScale = d3_iconarray.scale()
    .domain([ 0, layout.maxDimension(data.length) ])
    .range([0, width-(margin.left+margin.right)])
    .gapSize(1)
    .gapInterval(4);
​
var svg = d3.select('#simple-example')
        .append('svg')
            .attr('width',width)
            .attr('height',height)
        .append('g')
            .attr('transform','translate('+margin.left+','+margin.top+')');
​
svg.selectAll('g')
    .data(grid)
        .enter()
    .append('g').attr('transform', function(d){ 
        return 'translate('+arrayScale(d.position.x)+','+arrayScale(d.position.y)+')' 
    })
    .call(function(parent){
        parent.append('text')
            .text(function(d){ return d.data; })
            .attr('stroke','#000')
            .attr('stroke-width',8)
            .attr('stroke-linejoin','round')
            .attr('text-anchor','middle')
            .attr('x',dotRadius)
            .attr('y',dotRadius*6/4)
​
        parent.append('text')
            .text(function(d){ return d.data; })
            .attr('fill','#FFF')
            .attr('text-anchor','middle')       
            .attr('y',dotRadius*6/4)
            .attr('x',dotRadius)    
    });
​
d3.selectAll('input#interval-input, input#size-input').on('change',function(){
    console.log('hiya');
​
    var interval = document.getElementById('interval-input').value;
    var size = document.getElementById('size-input').value;
​
    d3.select('#interval-value').text(interval);
    d3.select('#size-value').text(size);
​
    arrayScale.gapSize(size)
        .gapInterval(interval);
​
    svg.selectAll('g')
        .transition()
        .attr('transform', function(d){ 
            return 'translate('+arrayScale(d.position.x)+','+arrayScale(d.position.y)+')' 
        })
})
​
d3.select(self.frameElement).style("height", (height + 200)+"px");
​
</script>
</html>
    