Square Countries

Countries as Squares

Small experiment of showing each country as a square. The center of each square is computed projecting the centroid of each feature, the (projected) area of each country is computed using the D3 path.area method.

References

<html>
<head>
    <title>Countries as Squares</title>

path.country {
            fill: #333;
        }

rect.country {
            stroke: #5EFFEF;
            stroke-opacity: 0.9;
            stroke-width: 1;
            fill: #5EFFEF;
            fill-opacity: 0.05;
        }

rect.highlighted {
            fill-opacity: 0.6;
            stroke-width: 1;
            stroke: #78fff2;
        }

.country-label {
            pointer-events: none;
            font-family: Arial, sans-serif;
            font-size: 21px;
            fill: #5EFFEF;
        }
    </style>

</head>
<body>
    <div id="map"></div>

var width  = 800,
            height = 400;

// Create the geographic projection
        var projection = d3.geo.equirectangular()
            .scale(width / (2 * Math.PI))
            .translate([width / 2, height / 2]);

// Configure the path generator
        var pathGenerator = d3.geo.path()
            .projection(projection);

var div = d3.select('#map'),
            svg = div.append('svg'),
            grp = svg.append('g');

svg.attr('width', width).attr('height', height + 200);
        grp.attr('transform', 'translate(' + [0, 100] + ')');

d3.json('countries.topojson', function(error, data) {

if (error) {
                console.error(error);
                throw error;
            }

var geojson = topojson.feature(data, data.objects.countries).features;

// Compute the projected centroid, area and length of the side
            // of the squares.
            geojson.forEach(function(d) {
                d.centroid = projection(d3.geo.centroid(d));
                d.area = d3.geo.path().projection(projection).area(d);
                d.side = Math.sqrt(d.area);
            });

// Sort the features by projected area
            geojson.sort(function(a, b) { return b.area - a.area; });

var countries = grp.selectAll('path.country').data(geojson);

countries.enter().append('path').classed('country', true);
            countries.attr('d', pathGenerator);
            countries.exit().remove();

// Squares
            var squares = grp.selectAll('rect.country').data(geojson);
            squares.enter().append('rect').classed('country', true);
            squares
                .attr('x', function(d) { return d.centroid[0] - d.side / 2; })
                .attr('y', function(d) { return d.centroid[1] - d.side / 2; })
                .attr('width', function(d) { return d.side; })
                .attr('height', function(d) { return d.side; });
            squares.on('mouseover', function(d) {

// Highlight on mouse over
                    d3.select(this).classed('highlighted', true);

grp.append('text')
                        .classed('country-label', true)
                        .attr('x', 20)
                        .attr('y', 0)
                        .text(d.properties.admin);
                })
                .on('mouseout', function(d) {
                    d3.select(this).classed('highlighted', false);
                    grp.selectAll('text.country-label').remove();
                });

squares.exit().remove();
        });
    </script>
</body>
</html>

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

Modified http://d3js.org/topojson.v1.min.js to a secure url

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

https://d3js.org/topojson.v1.min.js