Screensize vs Browser size

<html>
<head>
	<title>Screen Resolution &ne; Browser Window</title>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="https://www.toffeemilkshake.co.uk/tgp-ui-styles/ui-style.css">
	<style type="text/css">
		.view{
			fill:none;
			stroke:#000;
			stroke-width:3px;
			stroke-opacity:0.01;
			shape-rendering:crispEdges;
		}

.view.popular{
			stroke:#F00;
		}

.selected{
			border: solid 5px #F00;
		}

button{
			margin-left:0; 
		}
	</style>
</head>
<body>
<p><h2 class="reading">Screen Resolution &ne; Browser&nbsp;Window</h2>
<p class="reading">
	Screen resolution may not be the best metric for determining the size of the users view on a web page. Whilst the recent proliferation of device sizes is usually given as a reason to adopt responsive design approaches in reality users have always had different viewports on the web depending on how they've chosen to scale their browser window.</p>
<p class="reading">
	Click on the buttons below to see the difference.
</p>
2011 <a href="screensize.csv">Data</a> from <strong>3390</strong> users collected by <a href="https://css-tricks.com/screen-resolution-notequalto-browser-window/" class="source">CSS Tricks</a>
<hr>
<button id="screen" class="selected">Screen size</button> <button id="browser">Browser window size</button>
<p>
<div id="view"></div>

<hr><a href="https://www.toffeemilkshake.co.uk">Tom Pearson 2014</a>
</body>
<script type="text/javascript">
'use strict';
var w = window.innerWidth, h = window.innerWidth/2;

var prop = "screen";

d3.csv('screensize.csv', function(data){
	var maxDim = d3.max(data, function(d){ 
		return Math.max( d["screen width"], d["screen height"] );
	});

var s = d3.scale.linear()
		.domain( [0, maxDim] )
		.range( [0, w] );

var dataJoin = d3.select('#view').append('svg').attr('width',w).attr('height',h)
		.append('g')
		.attr('transform','translate(1.5, 1.5)')
		.selectAll('rect').data(data)
			
	dataJoin.enter()
		.append('rect')
		.attr({
			"x":0,
			"y":0,
			"width":function(d){ return s(d[prop + " width"]) },
			"height":function(d){ return s(d[prop + " height"]) },
			"class":"view"
		});

function switchView(p){
		dataJoin.transition()
			.duration(2000)
			.attr({
				"x":0,
				"y":0, //function(d){ height - s(d[prop + " height"]) },
				"width":function(d){ return s(d[p + " width"]) },
				"height":function(d){ return s(d[p + " height"]) },
				"class":"view"
			});
	}

d3.selectAll('button').on('click', function(){
		var id = d3.select(this).attr('id');
		switchView( id );
		d3.selectAll('button').attr('class',function(){
			if( id == d3.select(this).attr('id') ){
				return 'selected';
			}else{
				return '';
			}
		})
	})

});

</script>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js