My question is very similar to D3 V4 Properly placing a bubble in the US Map, but the map I'm using is a map of Scotland's local authority districts instead so I can't quite see how to apply either of the solutions.
I'm creating a bubble map on top of a choropleth map of Scotland, with circles at specified locations which I'm providing as latitude/longitude coordinates.
However, the locations of the circles are completely out - the circle for Aberdeen is in the sea!
Based on D3 V4 Properly placing a bubble in the US Map, I think perhaps the GeoJSON is pre-projected so I'm using two different projections, one for the map and one for the circles. Ideally I think I would find a different GeoJSON that didn't cause this problem, but I think the one I'm using from https://martinjc.github.io/UK-GeoJSON/ is the only one available.
So my question is, is there a sensible method for figuring out what projection this map is, in order that I can use the same projection for the circles?
var year = 2015;
var measurement = "tonnage";
drawMap(year, measurement)
function drawMap(year, measurement) {
// Convert the year and measurement to a concatenated string
var yearString = year.toString();
var measurementString = measurement.toString();
var option = measurementString.concat(yearString);
// The svg
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Map and projection
var path = d3.geoPath();
var projection = d3.geoMercator()
.center([-4.1826, 56.8169])
.scale(1400)
.translate([width / 2, height / 2])
// .scale(20*width / Math.PI)
// .translate([width / 2 + 150, height / 2 +2670]);
// Data and color scale
var data = {};
if (measurement === "tonnage") {
var colorScale = d3.scaleThreshold()
.domain([0, 50, 100, 1000, 2000, 3000, 20000])
.range(d3.schemeBlues[7]);
} else {
var colorScale = d3.scaleThreshold()
.domain([0, 1000, 3000, 5000, 7000, 9000, 10000])
.range(d3.schemeReds[7]);
}
// Load external data and boot
d3.queue()
.defer(d3.json, "https://raw.githubusercontent.com/squirrel-star/scotland/main/geojsonscotlandladjson.geojson")
.defer(d3.csv, "https://raw.githubusercontent.com/squirrel-star/scotland/main/fishperLA.csv", function(d) {
data[d.code] = +d[option];
})
.await(ready);
svg.selectAll("*").remove();
function ready(error, topo) {
// Adding the bubbles in
var markers = [{
long: 2.0943,
lat: 57.1497
}, // Aberdeen
{
long: 2.7005,
lat: 56.2230
}, // Anstruther
{
long: 4.6292,
lat: 55.4586
}, // Ayr
];
// Draw the map
svg.append("g")
.selectAll("path")
.data(topo.features)
.enter()
.append("path")
// draw each country
.attr("d", d3.geoPath()
.projection(projection)
)
// set the color of each country
.attr("fill", function(d) {
d.total = data[d.properties.LAD13NM] || 0;
return colorScale(d.total);
})
<!-- // Add circles: -->
svg
.selectAll("myCircles")
.data(markers)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([d.long, d.lat])[0]
})
.attr("cy", function(d) {
return projection([d.long, d.lat])[1]
})
.attr("r", 8)
.style("fill", "69b3a2")
.attr("stroke", "#69b3a2")
.attr("stroke-width", 3)
.attr("fill-opacity", .4);
}
}<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<!-- Create an element where the map will take place -->
<svg id="myMap" width="400" height="400"></svg>Many thanks in advance.
I have some bad news for you, the actual reason the points are wrong is that you're missing a minus sign in front of the latitude. Ayr has a latitude of -4.6, not 4.6. Just adding a - in front of the points fixed it for me.
var year = 2015;
var measurement = "tonnage";
drawMap(year, measurement)
function drawMap(year, measurement) {
// Convert the year and measurement to a concatenated string
var yearString = year.toString();
var measurementString = measurement.toString();
var option = measurementString.concat(yearString);
// The svg
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Map and projection
var path = d3.geoPath();
var projection = d3.geoMercator()
.center([-4.1826, 56.8169])
.scale(1400)
.translate([width / 2, height / 2])
// .scale(20*width / Math.PI)
// .translate([width / 2 + 150, height / 2 +2670]);
// Data and color scale
var data = {};
if (measurement === "tonnage") {
var colorScale = d3.scaleThreshold()
.domain([0, 50, 100, 1000, 2000, 3000, 20000])
.range(d3.schemeBlues[7]);
} else {
var colorScale = d3.scaleThreshold()
.domain([0, 1000, 3000, 5000, 7000, 9000, 10000])
.range(d3.schemeReds[7]);
}
// Load external data and boot
d3.queue()
.defer(d3.json, "https://raw.githubusercontent.com/squirrel-star/scotland/main/geojsonscotlandladjson.geojson")
.defer(d3.csv, "https://raw.githubusercontent.com/squirrel-star/scotland/main/fishperLA.csv", function(d) {
data[d.code] = +d[option];
})
.await(ready);
svg.selectAll("*").remove();
function ready(error, topo) {
// Adding the bubbles in
var markers = [{
long: -2.0943,
lat: 57.1497
}, // Aberdeen
{
long: -2.7005,
lat: 56.2230
}, // Anstruther
{
long: -4.6292,
lat: 55.4586
}, // Ayr
];
// Draw the map
svg.append("g")
.selectAll("path")
.data(topo.features)
.enter()
.append("path")
// draw each country
.attr("d", d3.geoPath()
.projection(projection)
)
// set the color of each country
.attr("fill", function(d) {
d.total = data[d.properties.LAD13NM] || 0;
return colorScale(d.total);
})
<!-- // Add circles: -->
svg
.selectAll("myCircles")
.data(markers)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([d.long, d.lat])[0]
})
.attr("cy", function(d) {
return projection([d.long, d.lat])[1]
})
.attr("r", 8)
.style("fill", "69b3a2")
.attr("stroke", "#69b3a2")
.attr("stroke-width", 3)
.attr("fill-opacity", .4);
}
}<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<!-- Create an element where the map will take place -->
<svg id="myMap" width="400" height="400"></svg>