Joymap UK

An early attempt at Population Lines of UK. Some problems with the map clipping and the way the data lines are formed at the moment

forked from armollica's block: Joymap

<!DOCTYPE html>
<html>
<head>
<style>

svg {
     background-color: #ddd; 
}

.line {
    fill: none;
    stroke: #666;
    stroke-width: 0.25;
}

.area {
    fill: #ddd;
}

.outline {
    fill: none;
    stroke: black;
}

</style>
</head>
<body>
<svg width="960" height="800"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<script>

var yOffset = 0.33;

function row(d) { 
    return {
        x: +d.x,
        y: +d.y,
        population: +d.population
    };
}

d3.queue()
    .defer(d3.csv, 'population.csv', row)
    .defer(d3.json, 'osg36converted.json')
    .await(ready);

function ready(error, data, gb) {
    if (error) throw error;
    
  	var merged = topojson.merge(gb, gb.objects.osg36converted.geometries);

var svg = d3.select('svg'),
        width = +svg.attr('width'),
        height = +svg.attr('height'),
        extent = [[0, 20],[width, height - 20]];
    
    var projection = d3.geoIdentity()
        .reflectY(true)
        .fitExtent(extent, merged);

var path = d3.geoPath()
        .projection(projection);
    
    svg.append('defs').append('clipPath').attr('id', 'gb-border')
        .append('path').datum(merged)
        .attr('d', path);

</script>
</body>
</html>

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

https://unpkg.com/topojson@3