How can I define map extent based on points displayed? - javascript

I have the following map I've made, by overlaying points on a mapbox map using d3.js.
I'm trying to get the map to zoom so that the map extent just includes the d3 markers (points).
I think the pseudocode would look something like this:
//find the northernmost, easternmost, southernmost, westernmost points in the data
//get some sort of bounding box?
//make map extent the bounding box?
Existing code:
<div id="map"></div>
<script>
mapboxgl.accessToken = "YOUR_TOKEN";
var map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v9",
center: [-74.5, 40.0],
zoom: 9
});
var container = map.getCanvasContainer();
var svg = d3
.select(container)
.append("svg")
.attr("width", "100%")
.attr("height", "500")
.style("position", "absolute")
.style("z-index", 2);
function project(d) {
return map.project(new mapboxgl.LngLat(d[0], d[1]));
}
#Lat, long, and value
var data = [
[-74.5, 40.05, 23],
[-74.45, 40.0, 56],
[-74.55, 40.0, 1],
[-74.85, 40.0, 500],
];
var dots = svg
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", 20)
.style("fill", "#ff0000");
function render() {
dots
.attr("cx", function (d) {
return project(d).x;
})
.attr("cy", function (d) {
return project(d).y;
});
}
map.on("viewreset", render);
map.on("move", render);
map.on("moveend", render);
render(); // Call once to render
</script>
Update
I found this code for reference, linked here at https://data-map-d3.readthedocs.io/en/latest/steps/step_03.html:
function calculateScaleCenter(features) {
// Get the bounding box of the paths (in pixels!) and calculate a
// scale factor based on the size of the bounding box and the map
// size.
var bbox_path = path.bounds(features),
scale = 0.95 / Math.max(
(bbox_path[1][0] - bbox_path[0][0]) / width,
(bbox_path[1][1] - bbox_path[0][1]) / height
);
// Get the bounding box of the features (in map units!) and use it
// to calculate the center of the features.
var bbox_feature = d3.geo.bounds(features),
center = [
(bbox_feature[1][0] + bbox_feature[0][0]) / 2,
(bbox_feature[1][1] + bbox_feature[0][1]) / 2];
return {
'scale': scale,
'center': center
};
}
However, when I run the function:
var scaleCenter = calculateScaleCenter(data);
console.log("scalecenter is", scaleCenter)
I get the error:
path is not defined
Furthermore, it seems like I would need to dynamically adjust the center and zoom parameters of the mapbox map. Would I just set these values dynamically with the values produced by the calculateScaleCenter function?

The readthedocs example code is erroneously missing a bit of code
Your javascript code is reporting that you have not defined the variable path before using it. You have copied it correctly from readthedocs, but the code you are copying contains an omission.
Fortunately, on the readthedocs version of the code snippet, there is a mention of a Stack Overflow answer http://stackoverflow.com/a/17067379/841644
that gives more information.
Does adding this information, or something similar corresponding to your situation, help fix your problem?
var projection = d3.geo.mercator()
.scale(1);
var path = d3.geo.path()
.projection(projection);

Related

Error displaying geotiff raster data on leaflet map

I hope someone can help me. I am trying to place isolines with labels from a geotiff file onto a leaflet map. The webpage https://geoexamples.com/d3-raster-tools-docs/plot/isolines.html is the example I am looking at, but the problem is that they perform this task on a non-moving leaflet map (no zoom feature). I have found the page https://bost.ocks.org/mike/leaflet/ where he places JSON data over a leaflet map, but does not cover how to transform geotiff data.
I can get the leaflet map to work and zoomable the JSON data remaps correctly but the geotiff data, while it displays, is not remapping correctly in my code and I don't quite understand how to make the isolines resize correctly. I thought it was taken care of with the svg.insert command but it doesn't. I know I am missing a step somewhere but I'm not sure where.
It seems like I am trying to do two things that are not quite explained anywhere combined. I eventually want to use the streamline code, too, which is why I am not using the XML code in the simple isolines code (and I need the labels). I got that version to work fine. I have also tried adding a canvas layer but that didn't work either, but perhaps I did something wrong with that.
I would greatly appreciate any suggestions on this. I think I have provided the necessary code and links to the files.
https://geoexamples.com/d3-raster-tools-docs/code_samples/tz850.tiff
https://geoexamples.com/d3-raster-tools-docs/code_samples/world-110m.json
var map = L.map('map').setView([-0.2858, 60.7868], 3);
mapLink =
'OpenStreetMap';
// Add an SVG element to Leaflet’s overlay pane
var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g").attr("class", "leaflet-zoom-hide");
d3.request("http://geoexamples.com/d3-raster-tools-docs/code_samples/tz850.tiff")
.responseType('arraybuffer')
.get(function(tiffData) {
d3.json("https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson", function(geoShape) {
// create a d3.geo.path to convert GeoJSON to SVG
var transform = d3.geo.transform({
point: projectPoint
}),
path = d3.geo.path().projection(transform);
// create path elements for each of the features
d3_features = g.selectAll("path")
.data(geoShape.features)
.enter().append("path");
map.on("viewreset", reset);
reset();
// fit the SVG element to leaflet's map layer
function reset() {
bounds = path.bounds(geoShape);
var topLeft = bounds[0],
bottomRight = bounds[1];
svg.attr("width", bottomRight[0] - topLeft[0])
.attr("height", bottomRight[1] - topLeft[1])
.style("left", topLeft[0] + "px")
.style("top", topLeft[1] + "px");
g.attr("transform", "translate(" + -topLeft[0] + "," +
-topLeft[1] + ")");
// initialize the path data
d3_features.attr("d", path)
.style("fill-opacity", 0.7)
.attr('fill', 'blue');
}
// Use Leaflet to implement a D3 geometric transformation.
function projectPoint(x, y) {
var point = map.latLngToLayerPoint(new L.LatLng(y, x));
this.stream.point(point.x, point.y);
}
var tiff = GeoTIFF.parse(tiffData.response);
var image = tiff.getImage();
var rasters = image.readRasters();
var tiepoint = image.getTiePoints()[0];
var pixelScale = image.getFileDirectory().ModelPixelScale;
var geoTransform = [tiepoint.x, pixelScale[0], 0, tiepoint.y, 0, -1 * pixelScale[1]];
var zData = new Array(image.getHeight());
for (var j = 0; j < image.getHeight(); j++) {
zData[j] = new Array(image.getWidth());
for (var i = 0; i < image.getWidth(); i++) {
zData[j][i] = rasters[0][i + j * image.getWidth()];
}
}
var invGeoTransform = [-geoTransform[0] / geoTransform[1], 1 / geoTransform[1], 0, -geoTransform[3] / geoTransform[5], 0, 1 / geoTransform[5]];
var intervalsZ = [1400, 1420, 1440, 1460, 1480, 1500, 1520, 1540];
var linesZ = rastertools.isolines(zData, invGeoTransform, intervalsZ);
var colorScale = d3.scaleSequential(d3.interpolateYlOrRd)
.domain([1400, 1540]);
linesZ.features.forEach(function(d, i) {
svg.insert("path", ".streamline")
.datum(d)
.attr("d", path)
.style("stroke", colorScale(intervalsZ[i]))
.style("stroke-width", "2px")
.style("fill", "None");
});
})
})
<link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.css" />
<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://bl.ocks.org/rveciana/raw/bef48021e38a77a520109d2088bff9eb/98a0b74b01109afae76d28bc27c4d1dbc7a87da8/geotiff.min.js"></script>
<script src="http://bl.ocks.org/rveciana/raw/bef48021e38a77a520109d2088bff9eb/98a0b74b01109afae76d28bc27c4d1dbc7a87da8/d3-marching-squares.min.js"></script>
<script src="http://bl.ocks.org/rveciana/raw/bef48021e38a77a520109d2088bff9eb/98a0b74b01109afae76d28bc27c4d1dbc7a87da8/path-properties.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.js">
</script>

Create artificial zoom transform event

I have a timeline in D3 with a highly modified drag/scroll pan/zoom. The zoom callbacks use the d3.event.transform objects generated by the zoom behavior.
I need to add a programmatic zoom that uses my existing callbacks. I have tried and tried to do this without doing so, but I haven't gotten it to work and it would be radically easier and faster to reuse the existing structure.
So the input is a new domain, i.e. [new Date(1800,0), new Date(2000,0)], and the output should be a new d3.event.transform that acts exactly like the output of a, say, mousewheel event.
Some example existing code:
this.xScale = d3.scaleTime()
.domain(this.initialDateRange)
.range([0, this.w]);
this.xScaleShadow = d3.scaleTime()
.domain(this.xScale.domain())
.range([0, this.w]);
this.zoomBehavior = d3.zoom()
.extent([[0, 0], [this.w, this.h]])
.on('zoom', this.zoomHandler.bind(this));
this.timelineSVG
.call(zoomBehavior);
...
function zoomHandler(transformEvent) {
this.xScale.domain(transformEvent.rescaleX(this.xScaleShadow).domain());
// update UI
this.timeAxis.transformHandler(transformEvent);
this.updateGraphics();
}
Example goal:
function zoomTo(extents){
var newTransform = ?????(extents);
zoomHandler(newTransform);
}
(Please don't mark as duplicate of this question, my question is more specific and refers to a much newer d3 API)
Assuming I understand the problem:
Simply based on the title of your question, we can assign a zoom transform and trigger a zoom event programatically in d3v4 and d3v5 using zoom.transform, as below:
selection.call(zoom.transform, newTransform)
Where selection is the selection that the zoom was called on, zoom is the name of the zoom behavior object, zoom.transform is a function of the zoom object that sets a zoom transform that is applied on a selection (and emits start, zoom, and end events), while newTransform is a transformation that is provided to zoom.transform as a parameter (see selection.call() in the docs for more info on this pattern, but it is the same as zoom.transform(selection,newTransform)).
Below you can set a zoom on the rectangle by clicking the button: The zoom is applied not spatially but with color, but the principles are the same when zooming on data semantically or geometrically.
var scale = d3.scaleSqrt()
.range(["red","blue","yellow"])
.domain([1,40,1600]);
var zoom = d3.zoom()
.on("zoom", zoomed)
.scaleExtent([1,1600])
var rect = d3.select("svg")
.append("rect")
.attr("width", 400)
.attr("height", 200)
.attr("fill","red")
.call(zoom);
// Call zoom.transform initially to trigger zoom (otherwise current zoom isn't shown to start).
rect.call(zoom.transform, d3.zoomIdentity);
// Call zoom.transform to set k to 100 on button push:
d3.select("button").on("click", function() {
var newTransform = d3.zoomIdentity.scale(100);
rect.call(zoom.transform, newTransform);
})
// Zoom function:
function zoomed(){
var k = d3.event.transform.k;
rect.attr("fill", scale(k));
d3.select("#currentZoom").text(k);
}
rect {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<button>Trigger Zoom</button> <br />
<span> Current Zoom: </span><span id="currentZoom"></span><br />
<svg></svg>
If applying a zoom transform to a scale, we need to rescale based on the new extent. This is similar to the brush and zoom examples that exist, but I'll break it out in a bare bones example using only a scale and an axis (you can zoom on the scale itself with the mouse too):
var width = 400;
var height = 200;
var svg = d3.select("svg")
.attr("width",width)
.attr("height",height);
// The scale used to display the axis.
var scale = d3.scaleLinear()
.range([0,width])
.domain([0,100]);
// The reference scale
var shadowScale = scale.copy();
var axis = d3.axisBottom()
.scale(scale);
var g = svg.append("g")
.attr("transform","translate(0,50)")
.call(axis);
// Standard zoom behavior:
var zoom = d3.zoom()
.scaleExtent([1,10])
.translateExtent([[0, 0], [width, height]])
.on("zoom", zoomed);
// Rect to interface with mouse for zoom events.
var rect = svg.append("rect")
.attr("width",width)
.attr("height",height)
.attr("fill","none")
.call(zoom);
d3.select("#extent")
.on("click", function() {
// Redfine the scale based on extent
var extent = [10,20];
// Build a new zoom transform:
var transform = d3.zoomIdentity
.scale( width/ ( scale(extent[1]) - scale(extent[0]) ) ) // how wide is the full domain relative to the shown domain?
.translate(-scale(extent[0]), 0); // Shift the transform to account for starting value
// Apply the new zoom transform:
rect.call(zoom.transform, transform);
})
d3.select("#reset")
.on("click", function() {
// Create an identity transform
var transform = d3.zoomIdentity;
// Apply the transform:
rect.call(zoom.transform, transform);
})
// Handle both regular and artificial zooms:
function zoomed() {
var t = d3.event.transform;
scale.domain(t.rescaleX(shadowScale).domain());
g.call(axis);
}
rect {
pointer-events: all;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<button id="extent">Zoom to extent 10-20</button><button id="reset">Reset</button><br />
<svg></svg>
Taking a look at the key part, when we want to zoom to a certain extent we can use something along the following lines:
d3.select("something")
.on("click", function() {
// Redfine the scale based on scaled extent we want to show
var extent = [10,20];
// Build a new zoom transform (using d3.zoomIdentity as a base)
var transform = d3.zoomIdentity
// how wide is the full domain relative to the shown domain?
.scale( width/(scale(extent[1]) - scale(extent[0])) )
// Shift the transform to account for starting value
.translate(-scale(extent[0]), 0);
// Apply the new zoom transform:
rect.call(zoom.transform, transform);
})
Note that by using d3.zoomIdentity, we can take advantage of the identity transform (with its built in methods for rescaling) and modify its scale and transform to meet our needs.

Trouble appending d3 vectors to leaflet map

I'm trying to get points to overlay on a leaflet map.
I create the Map element in html, build the leaflet map, read in the data.
Here's where I'm getting tripped up. I'd like to display points on the map - I've already successfully displayed these points on a d3 map, but I want to re-display them on the above leaflet map. Rather then extract lat/longs, as I've seen in d3 + leaflet examples, I thought I'd just use the path generator function which I've used successfully before, in order to append points to leaflet.
Code sequence here:
<div id="map" class="sf" style="width: 600px; height: 400px"></div>
function ready(error) {
//Build Leaflet map
L.mapbox.accessToken =
'pk.eyJ1Ijoic3RhcnJtb3NzMSIsImEiOiJjaXFheXZ6ejkwMzdyZmxtNmUzcWFlbnNjIn0.IoKwNIJXoLuMHPuUXsXeug';
var mapboxUrl = 'https://api.mapbox.com/styles/v1/mapbox/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}';
//var accessToken = 'pk.eyJ1Ijoic3RhcnJtb3NzMSIsImEiOiJjam13ZHlxbXgwdncwM3FvMnJjeGVubjI5In0.-ridMV6bkkyNhbPfMJhVzw';
var map = L.map('map').setView([37.7701177, -122.40], 13);
mapLink =
'OpenStreetMap';
L.tileLayer(
'https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/{z}/{x}/{y}?access_token=' + L.mapbox.accessToken, {
tileSize: 512,
zoomOffset: -1,
attribution: '© Mapbox © OpenStreetMap'
}).addTo(map);
// Read in the json data
d3.json("data/SanFrancisco_CoWorkingTenants.json",
function(SFData) {
var SFData = SFCoworking.features
console.log(SFData) // this prints successfully
})
var mapSVG = d3.select( "#map").select("svg")
mapG = mapSVG.append("g");
// Define d3 projection
var albersProjectionBay = d3.geoAlbers()
.scale( 282000)
.rotate ( [122.4077441,] )
.center( [0, 37.7701177] )
// Define d3 path
var geoPathBayArea = d3.geoPath()
.projection( albersProjectionBay );
var SFData = SFCoworking.features
console.log(SFData)
// draw points on map with d3 path generator
var feature = mapG.selectAll("path")
.data(SFCoworking.features)
.enter().append("path")
.style("stroke", "black")
.style("opacity", .6)
.style("fill", "red")
.attr("r", 20)
.attr( "d", geoPathBayArea )
console.log(feature) // nothing prints!
}
While the SFdata appears in the console, the features, when printed to the console, just appear as an empty array. This leads me to believe there might be an issue in how I'm appending the svg element to the map?
Thanks all - this seemed to work.
var svgLayer = L.svg();
svgLayer.addTo(map);
var svgMap = d3.select("#map").select("svg");
var g = svgMap.select('g');
d3.json("data/SanFrancisco_CoWorkingTenants.json", function(SFData) {
var SFData = SFCoworking.features
console.log(SFData)
})
SFData.forEach(function(d) {
d.latLong = new L.LatLng(d.properties.Latitude,
d.properties.Longitude);
//console.log(d.LatLng)
})
var feature = g.selectAll("circle")
.data(SFData)
.enter().append("circle")
.style("stroke", "black")
.style("opacity", .4)
.style("fill", "red")
.attr("r", 20)
.attr("class", 'features')

Updating several d3.js cartograms in the same container

I'm trying to update 4 cartograms in the same div.
First I create 4 original maps, each in its own svg, like this:
function makeMaps(data){
var mapsWrapper = d3.select('#maps');
data.forEach(function(topoJSON,i){
var quantize = d3.scale.quantize()
.domain([0, 1600000])
.range(d3.range(5).map(function(i) { return "q" + i; }));
var layer = Object.keys(topoJSON.objects)[0]
var svg = mapsWrapper.append('svg')
.attr("class","mapa")
.attr({
width: "350px",
height: "350px"
});
var muns = svg.append("g")
.attr("class", "muns")
.attr("id",layer)
.selectAll("path");
var geometry = topoJSON.objects[layer].geometries;
var carto = cartos[i]
var features = carto.features(topoJSON, geometry),
path = d3.geo.path()
.projection(projections[i]);
muns.data(features)
.enter()
.append("path")
.attr("class", function(d) {
return quantize(d.properties['POB1']);
})
.attr("d", path);
});
}
This part works well and creates 4 maps. After this, I want to update the paths in each map with the paths calculated by cartogram.js. The problem is that I can't get to the path data in each of the maps, here's what I'm trying to do:
...some code to calculate cartogram values
var cartograms = d3.selectAll(".mapa").selectAll("g").selectAll("path")
cartograms.forEach(function(region,i){
region.data(carto_features[i])
.select("title")
.text(function (d) {
return d.properties.nom_mun+ ': '+d.properties[year];
});
In cartograms I'm getting a nested selection: an array of paths for each map, which is what I though I needed, but inside the forEach I get the error region.data() is not a function. Each region is an array of paths each of which has a data property. I've tried with several ways of selecting the paths to no avail and I'm a little lost now. Thanks for your help

Drawing path from 2 dataset

I have been trying to use loop in order to prepare dataset for visualization with d3 but I got some problem when getting data back from loop.
Let's say I have 2 data set,
setX = [1,2 ,3, 4, 5] and setY = [10, 20, 30, 40, 50]
and I create for loop to get array of coordinate x and y from 2 dataset.
var point = new Object();
var coordinate = new Array();
for(var i=0; i < setX.length;i++){
point.x = setX[i];
point.y = setY[i];
coordinate.push(point);
}
and pulling back data from array to draw with
var d3line = d3.svg.line()
.x(function(d){return d.x;})
.y(function(d){return d.y;})
.interpolate("linear");
But the value of x and y data of d3line(coordinate) are always 5 and 50.
Is there a correct way to fix this?
Here is example of code
<div id="path"></div>
<script>
var divElem = d3.select("#path");
canvas = divElem.append("svg:svg")
.attr("width", 200)
.attr("height", 200)
var setX = [1,2 ,3, 4, 5];
var setY = [10, 20, 30, 40, 50];
var point = new Object();
var coordinate = new Array();
for(var i=0; i < setX.length;i++){
point.x = setX[i];
point.y = setY[i];
coordinate.push(point);
}
var d3line = d3.svg.line()
.x(function(d){return d.x;})
.y(function(d){return d.y;})
.interpolate("linear");
canvas.append("svg:path")
.attr("d", d3line(coordinate))
.style("stroke-width", 2)
.style("stroke", "steelblue")
.style("fill", "none");
</script>
You also see my example of this code on http://jsfiddle.net/agadoo/JDtqf/
There are two problems with your code. First (and this causes the behaviour you see), you're overwriting the same object in the loop that creates the points. So you end up with exactly the same object several times in your array and each iteration of the loop changes it. The output you're producing inside the loop prints the correct values because you're printing before the next iteration overwrites the object. This is fixed easily by moving the declaration of point inside the loop.
The second problem isn't really a problem but more of a style issue. You can certainly use d3 in the way that you're using it by simply passing the data in where you need it. A better way is to use d3s selections however where you pass in the data and then tell it what to do with it.
I've updated your js fiddle here with those changes made.

Categories