tomgp · January 23, 2024 07:04
diff --git a/index.html b/index.html
 <html>
 <head>
 	<title>Screen Resolution &ne; Browser Window</title>
 	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 	<link rel="stylesheet" type="text/css" href="http://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="http://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="http://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>
diff --git a/screensize.csv b/screensize.csv
diff --git a/thumbnail.png b/thumbnail.png
	<html>
	<head>
	<title>Screen Resolution ≠ Browser Window</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="http://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 ≠ Browser 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="http://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="http://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>