Joymap UK by jeremycflin

index.html

<!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);

    var tx = projection.translate()[0],
        ty = projection.translate()[1],
        k = projection.scale(),
        x = function(d) { return (d * k) + tx; },
        y = function(d) { return (d * -k) + ty; };
    
    var dy = d3.scaleLinear()
        .domain([0, d3.max(data, function(d) { return d.population; })])
        .range([0, -height * yOffset / 15]);
    
    var curve = d3.curveCardinal.tension(0);

    var line = d3.line()
        .x(function(d) { return x(d.x); })
        .y(function(d) { return dy(d.population); })
        .curve(curve);
    
    var area = d3.area()
        .x(function(d) { return x(d.x); })
        .y0(dy(0))
        .y1(function(d) { return dy(d.population); })
        .curve(curve);
    
    var lineData = d3.nest()
        .key(function(d) { return d.y; })
        .entries(data);
    
    var lump = svg.append('g').attr('class', 'lumps')
            .attr('clip-path', 'url(#gb-border)')
            .selectAll('.lump').data(lineData)
        .enter().append('g')
            .attr('class', 'lump')
            .attr('transform', function(d) { return 'translate(0,' + y(+d.key) + ')'})
            .datum(function(d) { return d.values; });
        
    lump.append('path')
        .attr('class', 'area')
        .attr('d', area);
    
    lump.append('path')
        .attr('class', 'line')
        .attr('d', line);
}

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