Giters

martinjc / UK-GeoJSON

GeoJSON versions of UK Boundary Data

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hartlepool and Middlesborough not appearing

richard-muir opened this issue · comments

commented

Hey Martin,

First of all, this is a great resource, thank-you for creating and maintaining it!

I'm having trouble in getting Hartlepool and Middlesborough to display at all on a d3 map.

I've tried with the topojson and with geojson data you've created, but it seems to beonly these two regions which aren't showing. I've tried diagnosing the problem myself, but my knowledge of these formats is not sufficient.

Both of these two areas are showing when I load the data into geojson.io, and I've manually checked that I haven't done something silly and deleted them somehow.

I've attached the document I'm using to create these maps.

Is this something you can shed any light on, or do you think it's a problem with the way D3 is reading the file in?

Thanks,

Rich

Code I'm using is below:

`<!DOCTYPE html>
<meta charset="utf-8">
<style>

/*.subunit.ENG { display: none;}*/

.subunit.E:hover{fill:blue;}

.subunit.S {fill:lightgrey;}
.subunit.W {fill:lightgrey;}

.subunit.NIR {fill : lightgrey;}
.subunit.IRL {fill : lightgrey;}


</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 860, height = 1160;
var svg1 = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

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

var projection = d3.geo.albers()
    .center([0, 55.4])
    .rotate([4.4, 0])
    .parallels([50, 60])
    .scale(6000)
    .translate([width / 2, height / 2]);

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



d3.json("uk.json", function(error, uk) {
    console.log(uk);
  svg1.selectAll(".subunit")
    .data(topojson.feature(uk, uk.objects.subunits).features.filter(function(d) {return d.id === 'IRL' || d.id === 'NIR';}))
    .enter().append("path")
    .attr("class", function(d) {return "subunit " + d.id;})
    .attr("d", path);

console.log(topojson.feature(uk, uk.objects.places))
});

// LOADS THE BASIC GEOJSON FILE
d3.json("lad.json", function(error, uk) {
    console.log(uk)
  if (error) return console.error(error);
  svg1.selectAll(".subunit")
    .data(uk.features)
  .enter().append("path")
    .attr("d", path);
});


//LOADS THE TOPOJSON FILE

d3.json("topo_lad.json", function(error, uk) {
    console.log(uk)
  if (error) return console.error(error);
  svg1.selectAll(".subunit")
    .data(topojson.feature(uk, uk.objects.lad).features)
  .enter().append("path")
    .attr("class", function(d) { console.log(d.id); return "subunit " + d.id[0];})
    .attr("d", path);

console.log(topojson.feature(uk, uk.objects.lad))
});

`
image