People who sought asylum in Denmark in 2014

(This chart is a part of the d3-charts collection available here.)

A map of the 14,815 people who sought asylum in Denmark in 2014.

This chart is based on the data here.

The chart is by me, ndarville, @pessimism.

Not included:

1,265 stateless
1,047 in the so-called "Other" category

<!--
    - Scale SVG dynamically/responsively

- Implement threshold.js - use inline or import as function
    - d3.tip
    - Convert geojson to topojson: https://github.com/mbostock/world-atlas
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            svg {
                margin-left: auto; margin-right: auto;
                display: block;
            }

line,
            rect {
                shape-rendering: crispEdges;
            }

.states {
                fill: none;  /** Hides TopoJSON artifacts */
                stroke: #000;
            }

.counties {}

path.country,
            path.state {
                stroke-width: .5;
                stroke: #FFF;
            }

path.country:hover,
            path.state:hover {
                fill: pink !important;
            }

/** State chart threshold BEGIN */
                text {
                    font: 10px sans-serif;
                }

.caption {
                    font-weight: bold;
                }

.key path {
                    display: none;
                }

.key line {
                    stroke: #000;
                    /** shape-rendering: crispEdges; */
                }
            /** State chart threshold END */

/** Bar chart BEGIN */
            body {
                font: 10px sans-serif;
            }

.axis path,
            .axis line {
                fill: none;
                stroke: #000;
                shape-rendering: crispEdges;
            }

.x.axis path {
                display: none;
            }

rect.bar:hover {
                fill: orange !important;
            }
            /** Bar chart END */

.divider {
                stroke: #FFF;
                opacity: 0.7;
            }

/** Grid lines BEGIN */
            /** https://www.d3noob.org/2013/01/adding-grid-lines-to-d3js-graph.html */
                .grid .tick {
                    stroke: lightgrey;
                    opacity: 0.7;
                }
                .grid path {
                     stroke-width: 0;
                }
            /** Grid lines END */
        </style>
        <script src="d3.min.js?v=3.2.8"
            type="text/javascript" charset="utf-8"></script>
        <script src="d3.geo.projection.v0.min.js"
            type="text/javascript" charset="utf-8"></script>
    
    </head>
    <body>
        <script type="text/javascript" charset="utf-8">
            var width = 800,
                height = 520,
                padding = 30;

// Local settings
            var dataset = "data.csv",
                countryValue = "Country",
                colors = ["#2b83ba", "#d7191c"],

// Config only for multicolour chart
                multiColor = true,
                dataValue = "Asylum-seekers",
                min = 0,
                max = 7185,
                useLogScale = false;

var showLegend = multiColor === true ? true : false,
                spacing = showLegend === true ? 30 : 0,
                margin = {
                top: spacing,
                bottom: 0,
                left: spacing,
                right: spacing
            };

margin.hor = margin.left + margin.right;
            margin.ver = margin.top + margin.bottom;

var color = d3.scale.linear()
                .range(colors)
                .clamp(useLogScale)
                .interpolate(d3.interpolateHcl);

var projection = d3.geo.kavrayskiy7()
                .translate([width/2, height/2])
                .scale(150); // Revise so it isn't a magic number

var path = d3.geo.path()
                .projection(projection);

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

// Load the data values
            d3.csv(dataset, function(error, data) {
                var countryList = data.map(function(d) { return d[countryValue]; }),
                    errorList = {};

data.map(function(d) { errorList[d[countryValue]] = d[dataValue] ? d[dataValue] : ""; });

if (multiColor === true) {
                    if (useLogScale === true) {
                        min = min === 0 ? 0 : Math.log(min),
                        max = max === 0 ? 0 : Math.log(max);
                    }
                    color.domain([min, max]);
                }

// Geodata loaded into the csv scope
                d3.json("ne_110m_admin_0_countries_lakes.geojson", function(json) {
                    var dataLength = data.length,
                        jsonLength = json.features.length;

// Data (values) forloop
                    for (var i = 0; i < dataLength; i++) {
                        var countryName = data[i][countryValue],
                            countryData = useLogScale !== true ? data[i][dataValue] : Math.log(data[i][dataValue]);

// JSON (geodata) forloop
                        for (var j = 0; j < jsonLength; j++) {
                            if (countryName === json.features[j].properties.name_long) {
                                json.features[j].properties.value = dataValue === "" ? true : countryData;
                                delete errorList[countryName];
                                break;
                            }
                        }
                    }

svg.selectAll("path")
                        .data(json.features)
                        .enter()
                        .append("path")
                        .attr({
                            "d": path,
                            "class": "country",
                            "transform": "translate(" + 0 + "," + margin.top + ")"
                        })
                        .style("fill", function(d) {
                            if (multiColor === true) {
                                return d.properties.value ? color(d.properties.value) : "#DDD";
                            } else {
                                return d.properties.value ? color.range()[1] : "#DDD";
                            }
                        });

// Error log
                    errorList = Object.keys(errorList);
                    if (errorList.length !== 0) {
                        console.log("An error occured trying to plot the following countries:");
                        console.log(errorList);
                    }
                });

// TODO: Make threshold a gradient for non-discrete values
                // TODO: Orient at the bottom instead

// ISSUES: With book shape file, Alabama disappears
                // ISSUES: With official shape file, Minnesota disappears
                if (showLegend === true) {
                    var thresholdSuffix = "",
                        // Find a better title
                        thresholdTitle = "No. of asylum-seekers",
                        thresholdIsDiscrete = true;

var threshold = d3.scale.threshold()
                        .domain(color.domain()) // doesn't work
                        .range(color.range());

var keyX = d3.scale.linear()
                        .domain(d3.extent(threshold.domain()))
                        .range([0, (width - margin.hor)/2]); // total key width

var keyXAxis = d3.svg.axis()
                        .scale(keyX)
                        .orient("bottom")
                        .tickSize((thresholdIsDiscrete === true) ? 13 : 0)
                        .tickValues(threshold.domain())
                        .tickFormat(function(d) { return thresholdIsDiscrete ? d + thresholdSuffix : ""; });

var g = svg.append("g")
                        .attr({
                            "class": "key", // Rename
                            "transform": "translate(" + margin.left + "," + margin.top + ")"
                        });

// Threshold bars
                    g.selectAll("rect")
                        // Iterate over the threshold range to pass values later
                        .data(threshold.range().map(function(d, i) {
                            return {
                                // Calculate horizontal starting point, i.e. x coordinate
                                x0: i ? keyX(threshold.domain()[i - 1]) : keyX.range()[0],
                                // Calculate horizontal endpoint
                                x1: i < threshold.domain().length ? keyX(threshold.domain()[i]) : keyX.range()[1],
                                // Return colour
                                z: d
                            };
                        }))
                        .enter()
                            .append("rect")
                            .attr({
                                "height": 8,
                                "x": function(d) { return d.x0; },
                                "width": function(d) { return d.x1 - d.x0; }
                            })
                            .style("fill", function(d) { return d.z; });

// Threshold title
                    g.call(keyXAxis)
                        .append("text")
                        .attr({
                            "class": "caption", // Rename
                            "y": -6
                        })
                        .text(thresholdTitle);
                }
            });
        </script>
    </body>
</html>