D3 Examples - Screensize vs Browser size

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