fisheye-rectangles

Fisheye homepage for http://roadtolarissa.com

<!DOCTYPE html>
<meta charset="utf-8">

svg{
	margin: 0px auto;
	display: block;
	overflow: visible;
}

.border{
	fill: rgba(0,0,0,0);
	stroke: black;
}

text{
	fill: white;
}

</style>

var boxes = d3.range(numX*numY).map(function(i){
	return {
		pos: [s*(i % numX) + s/2, s*(Math.floor(i/numX)) + s/2],
		i: i,
		id: 'clip-' + i,
		clipId: 'url(#clip-' + i + ')',
		name: randString(10),
		date: 'May 2014'
	}
})

var svg = d3.select('body')
	.append('svg')
		.attr({width: width, height: height})

svg.append('defs').dataAppend(boxes, 'clipPath')
		.attr('id', ƒ('id'))
	.append('rect')
		.attr({width: s, height: s})
		.attr({x: -s/2, y: -s/2})
		.each(function(d){ d.clip = d3.select(this) })

var boxGs = svg.dataAppend(boxes, 'g')
		.translate(ƒ('pos'))
		.attr('clip-path', ƒ('clipId'))
		.on('mousemove', function(d){
			this.parentNode.appendChild(this)
			sizeSquare(d, _.max(d3.mouse(this).map(Math.abs))/(s/2))
		})
		.on('mouseout', function(d){
			sizeSquare(d, 1)
		})

boxGs.append('rect')
		.attr({width: s*2, height: s*2})
		.attr({x: -s, y: -s})
		.attr('fill', function(){ return randColor() })
		.each(function(d){ d.rect = d3.select(this) })

boxGs.append('rect.border')
		.attr({width: s, height: s})
		.attr({x: -s/2, y: -s/2})
		.each(function(d){ d.border = d3.select(this) })

boxGs.append('rect.border')
		.attr({width: s, height: 0})
		.attr({x: -s/2, y: -s/2})
		.each(function(d){ d.bot = d3.select(this) })

boxGs.append('text').attr({dx: '1em', dy: '-1.0em'})
		.text(ƒ('name'))
		.style('font-size', '0px')
		.attr('text-anchor', 'start')
		.each(function(d){ d.name = d3.select(this) })

boxGs.append('text').attr({dx: '-1em', dy: '-1.0em'})
		.text(ƒ('date'))
		.style('font-size', '0px')
		.attr('text-anchor', 'end')
		.each(function(d){ d.date = d3.select(this) })

function sizeSquare(d, t){
	t = clamp(0, t, 1)
	t = Math.pow(t, 2)

var l = (2 - t)*s

var rectAttr = {width: l, height: l, x: -l/2, y: -l/2}

d.clip.attr(rectAttr)
	d.border.attr(rectAttr)
			.style('stroke-width', (20*(1 - t) + 1))

d.bot.attr(rectAttr)
			.attr({y: l/2, height: .1})
			.style('stroke-width', (120*(1 - t) + 1))

d.name.style('font-size', 23*(1 - t) + 'px')
			.attr({x: -l/2, y: l/2})

d.date.style('font-size', 23*(1 - t) + 'px')
			.attr({x: l/2, y: l/2})
}

d3.select(self.frameElement).style("height", d3.select('svg').attr('height') + "px");

</script>