I intend to draw maps using d3.js and geoJson.
I need to plot circles on this map.These circles when hovered should get bigger and display some data inside that.
Also,i need to create a time line scale which will increase and decrease the circles in the map based on the data for that particular time frame.
I am able to draw map with the help of geo JSON file but the problem is how to plot the circles such that when map is moved in the canvass the circle remains at same position inside the map.I mean the circles should be relative to map not relative to canvass.
Secondly I am not able to understand how the coordinate system of maps work.
Any help Please..
Related
I am using MATLAB 2018b and using rlocus function to plot some function. In the figure I have to select some data points based on specific values. But When I zoom in and select a data point it remains in the exact position. But when I try to move the figure with pan option or zoom out the selected point moves relatively. I want these data points to remain in that specific position. But I can't stop this relative scaling of axis. My code is:
clear all
close all
clc
Gs=zpk([-8],[-3 -6 -10],1)
rlocus(Gs)
I have been trying to make a d3 map by cobbling together code from others. See my attempt here on Github: https://gist.github.com/gailzdesign/018f3eabcabad64f3836727748a9a552
I've read through several entries on Stack Overflow, including this one: Plotting points on a map with D3
And another one that had points plotted in San Fran, California, USA.
But I still can't figure out what I'm doing wrong. I can see the points in the DOM but the scale is way off. The circles are not even a part of the svg.
Any help would be appreciated.
The points are where they should be, the eastern edge of your geojson is about 67.59 degrees West, but your points (rocks) are further east at about 67.33 degrees West, so they aren't appended visibly within the SVG - as you note. For example, if you set your projection scale to 50000 rather than your scale variable, you'll see the points and the lake:
The points aren't visible because your auto scaling and bounding function doesn't include the points. But I'm assuming the rocks are supposed to be in the lake, so you'll need to update your locations.
If you are unable to get alignment between the lake and the points, you may have conflicting datums.
If the points are intended to be away from the lake, you might find it easier to set the scale manually, as the autoscaling only takes into account the geojson features. Alternatively you could add the points to the geojson.
I am trying to replicate the image below using OpenLayers and D3.js.
I have tried to add triangles along the path using getPointAtLength() and just adding them as SVG elements, but that does not take care of the orientation of the line. To get this working I would need to find the slope and rotate each triangle.
I have also taken a look at this StackOverflow answer:
How to place arrow head triangles on SVG lines?
This looks great but unfortunately it only works for polylines. However, since I am using D3.js together with OpenLayers it seems like I have to use paths and not polylines since I need the d3.geo.path function to transform all features on the map.
As for now it seems like I have the following options:
Add triangles along the path by calculating the slope at every point. Is there an easy way to calculate slope along a path?
Somehow combine D3.js og and OpenLayers and use polylines instead of paths. Is this possible?
Somehow convert my path to a polyline and draw that one instead of the path. Is there a function for doing this?
Are there other options that I can test out?
You could call getPointAtLength at two points separated by a delta. The slope of the two points would be the slope of the path if the delta is small enough.
I have a scatterplot created with d3. The circles/points are all the same size. The grid goes from 1-10 on both x and y axes. All points have x and y values of whole numbers (no decimals).
My problem is that I frequently have multiple data points with the same coordinates. Because the points are all the same size I can't tell how many points are at a single spot.
My points have tooltips, one for each data point. So, I was thinking that it's OK to show only a single point/circle if I can show a tooltip that contains information about all points with the same x/y coordinate. I can't think of a way to do that though because the tooltips seem to be generated for a single point, not "for all points at the same coordinate", or generated dynamically.
How can I do this?
As #LarsKotthoff mentioned, aggregating my data before rendering and adding a key function to identify each aggregate were the two steps needed to get everything working properly.
I'm trying to add some dots representing the locations of various features onto some of D3.js's geographic projections. I would like the dots to rotate and get clipped the same as the country paths, but I'm having some difficulty getting this to work.
For a given projection, I can obtain the updated coordinates by updating the projection according to the drag as in the demo, then calling projection() on the coordinates that I want to update, but this does not clip the circles correctly (you can see the circles on the opposite side of the globe). Would it be possible to get an example of this? To recap, I'd like to draw a circle around, say, New York city, then be able to rotate the globe and have the circle "set".
Thanks!
Lauren