I have a set of polygons where the position of their vertices (corners) are defined as latitude/longitude values.
I want to use D3 to draw these. I don't want anything fancy (like a background containing the world map, etc). The only thing I want to do is to draw the polygons.
I have looked up on Google for a solution, but what I find is things like http://datamaps.github.io or https://github.com/mbostock/d3/wiki/Geo-Paths and they all show a background of the world map or the like which is what I don't want to do.
Suggestions are welcome.
In your particular case, using the geo functionality of D3 seems like overkill -- all you need to do is use the D3 scales to convert the coordinates to screen coordinates, i.e.
var scale = d3.scale.linear().domain([minCoord, maxCoord]).range([minScreen, maxScreen]);
Demo (based on provided fiddle) here.
Related
I've been asked to build something similar to this so that customers can draw basics shapes of kitchen tops. Similar to that in the image below but also have dimensions.
It looks like konva has support for basic shapes like rectangle and circle etc and it also includes a transformer which allows for resizing. However, I think if I want to build a custom shape like the one in green and have individual sizing i.e. resize each individual line. I am going to have to build something myself.
I was hoping someone could point me in the right direction. I have seen an example where someone has used a "line" class which takes a series of points and then sets the attribute to closed which fills in the shape. Obviously I would need to extend this to allow the custom resizing. However, Im not sure this is the correct path to head down?
Any suggestions?
.
How about using rectangles and having an option to snap them together. It should be fairly simple to do the edge detection and snapping. Then show the result as a Konva.Line around the perimeter.
Then you can show all the control handles for the rectangles except those on the sides where another Rect has joined.
Is it possible to change the scatter plot point from the usual circle to something else. And more specifically can this be linked to a Dimension?
I know I can change the colour but we are already using a Master Item colour, and need to and another dimension.
We are also using the marker size for a measure so we cant co-opt that either
We are using Qlik Sense (SaaS).
From experience, no, you can't, I have ended up creating my own extension to create my own scatter plots to have donuts instead of dots using chart.js
Thanks,
Now I want train a path loss model, and I have a map picture, and I want to convert this map into different views by the test location(x,y)
I need a conversion algorithm to produce a lot different map views by the test location.Now I can show a example of this(I am sorry this hard to describe)
in the left up is the map with 4 column,in the right bottom is the convert-new-map:
I want to use some "light resource"(the location A) to project onto the building in the map, then some light will be blocked, then we will get the shadow in this test location.
so the shadow from the AP location and test location can present the environment information in this area.
If you have some idea to solve this, please let me know.
Thanks in advance
Cheng Hong
After discussing and googling, I find out that I should using some ray tracing technology for a 2D map.
In my research, I have two point, location A and location P in a map.
And now I want to use ray tracing to convert the map combining the two locations into a new map view.
In this new map view, the location A point is in the center, then some shadow will be added resulting from the building(call it black column) in the origin map. Then this new map is a kind of presentation or describer for the map and two location point. That is what I want to do.
you need to add more specs like the map is an raster image or vector? This has nothing to do with conversion (hence the retag) you just want to render your 2D map as 3D scene or its 2D slice (single horizontal line) this can be done really easily.
raster map
google Wolfenstein ray casting rendering techniques like:
Algorithm for 2D Raytracer
vector map
construct mesh from your map and render by any 3D gfx api like OpenGL. To get started with this approach you need to grasp this:
Understanding 4x4 homogenous transform matrices
see also the sub-links in there ...
To implement the lighting condition you can implement any kind of shading. The easiest is normal shading. For more info see:
Normal shading this may enlight thing or two (for beginners)
Normal/Bump mapping see fragment shader and search the dot
mirrored light see for slightly more complex lighting scheme
simple complete GL+VAO/VBO+GLSL+shaders example in C++
Curved Frosted Glass Shader? for sub surface scattering
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 am using Dimple.js to plot several data series and I need to add a candlestick or hi/lo series on to my existing chart. After some analysis, I have found two possible approaches to do this:
1) Use the floating bar option in Dimple.js. Since the "widths" (heights on the chart, but widths for the floating bar) would be all different, I would need a different data series for each candlestick. This feels like a hack, but the one advantage is that this would be using Dimple to do all the rendering. I would probably not go this route unless some had a thought on how to make this less of a hack.
2) Drop down to D3 to draw lines between the points. I can use Dimple.js to graph both the top and bottom elements of the candlestick, then use D3 to draw the line between the points. I would do a selectAll() on one of the series, and then draw a path to the related point in the other series.
If there are other suggestions on an approach, please let me know. Thanks!
You can use this example to build candlestick charts using d3.js