I'm sorry I don't know what to call these kind of chart. I've already made a square grid map, rectangle located on every centroid. (pic 1)
Pic 1
Now I want to make like a percentage map (isotype?), but I don't know how to do it. (pic 2--photoshopped)
Pic 2
This is the code, I modified it from a simple map code
d3.json(url).then(function(dataset){
group = canvas.selectAll("g")
.data(dataset.features)
.enter()
.append("g")
areas = group.append("path")
.attr("d", path)
.attr("class","area")
.style("fill","white")
.style("opacity",0)
;
group.append("rect")
.attr("x",function (d) { return path.centroid(d)[0];})
.attr("y",function (d) { return path.centroid(d)[1];})
.attr("width",10)
.attr("height",10)
.style("fill","orange");
});
I already have an idea, by manually adding the data on the JSON, but I want to know how to do it from dynamic input. I want to google it but don't have any clue or keyword.
Thanks
Related
I really beg about help because I'm trying to do some things for a few days, and I really don't know how. I want to do road manipulate by hold and drag . I think I need to start with adding new point in polyline geometry exaclly in the pointer place (or linestring, linstring points and polyline geometry seems to be almost the same). But it seems to be impossible.
Of course, there is no problem with getting coordinates, but adding this new coordinates to polyline or linestring in appropriate place.
There is no code, because every here map methods (pushPoints, setGeopetry) seems to be usless, and give points in the wrong place.
See please this example: https://demo.support.here.com/examples/v3/fleet - you can drag-n-drop there
and src code of it : https://demo.support.here.com/javascripts/examples/v3/fleet.js
Search there in the code the variable clipedPolyline and func clipPolyline:
var clipPolyline = function(polyline, viewportX, viewportY, bboxSize){
var pleft = viewportX - bboxSize,
pright = viewportX + bboxSize,
ptop = viewportY - bboxSize,
pbottom = viewportY + bboxSize,
coordLeftTop = map.screenToGeo(pleft, ptop),
coordRigthBottom = map.screenToGeo(pright, pbottom),
rect = new H.geo.Rect(coordLeftTop.lat,coordLeftTop.lng,coordRigthBottom.lat,coordRigthBottom.lng),
clipedPolyline = polyline.clip(rect);
return clipedPolyline;
};
Read please documentation for method clip on:
https://developer.here.com/documentation/maps/3.1.31.0/api_reference/H.map.Polyline.html#clip
I don't have any code to share at this point, but I'm trying to figure out how to solve my issue.. I was hoping some of you might have some advice.
I'm building an app where I get the user's lat/long from geolocation and if they are in an predetermined area with a radius they can post data to the server, but not if they aren't in an area that I specified is allowed.. Here is an image for example:
So in this example, the user could post if they are in the radius of one of the circles but not if they aren't.
I would also have to fetch the data based off of which circle they are in..
What I'm wondering is, how would I specify where these radius' exist and does this scale easily? If I needed to add 10-30 new locations would that be easy to do?
You have the user location from the device and as you have the circles; you have the circle centre with their radius. At time of posting, you check the distance from the user location to the circle centre and enumerate thought the circle locations. if the distance is within the radius, they can post if not, not.
var radius = 100 //example
let canPostLocations = [
CLLocation1,
CLLocation2
]
func isInRange() -> Bool {
for canPost in canPostLocations {
let locationDistance = location.distance(from: canPost)
if (locationDistance < radius) {
return true
}
}
return false
}
use as:
var mayPost = false
var userLocation: CLLocation! = nil
if userLocation != nil {
mayPost = InRange(location: userLocation).isInRange()
}
I would like to create nice curved edges in my Cotoscape.js graph using the unbundled-bezier style. According to the database I have to set the control-point-distance(s) automatically, so I came up with following code:
{
selector: 'edge',
css: {
'curve-style': 'unbundled-bezier',
'target-arrow-shape': 'triangle',
'control-point-weights': '0.25 0.75.',
'control-point-distance': function( ele ){
console.log(ele.source().position());
var pos1 = ele.source().position().y;
var pos2 = ele.target().position().y;
var str = '' + Math.abs(pos2-pos1) + 'px -' + Math.abs(pos2-pos1) + 'px';
console.log(pos1, pos2, str);
return str;
}
}
}
My problem is, that the graph is rendered with straight lines ant the curvy line appears only when I click on some. Also, when I move the nodes the curve moves nicely with the node, but the node positions (ele.source().position().y) does not change
A style function ought to be a pure function. Yours is technically not: It depends on state outside of the edge's data.
The only way an arbitrary function could be used to specify style is if the function is continuously polled. That would be hacky and prohibitively expensive.
You must use a pure function if you want to use a custom function. Either rewrite your function to rely on only the edge's data or use a passthrough data() mapping and change the edge's data whenever you want to modify the edge.
I'm trying to update my axis with custom labels because I want my users to be able to use different datasets. The current array of label names i load in have 17 elements in it.
When loading the page the graph only shows 11 elements as it can be seen here: http://servers.binf.ku.dk/hemaexplorerbeta/
How do I update my xScale to be able to all of the elements at once?
Here's the code for my scale:
var xScale = d3.scale.linear()
.domain([-25, genWidth])
.range([0, width-margin.right]);
And for my update function:
function updateAxisX(arr) {
var formatAxis = function(d) {
return arr[d % arr.length];
}
xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(formatAxis);
SVG.select(".x.axis")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("transform", function(d) {
return "rotate(-65)"
});
}
I also have a zoom function where you can drag the graph around as well. As I mentioned the X Axis has 17 element in total, although on my graph they are repeated over and over. Is there any way I can prevent the zoom from letting the user drag the graph out of my "maximum" frame? In other words I'd like to be able to drag ONLY IF there has been zoomed in on the graph and ONLY until you reach the "edges" of the graph and no more.
Here's the code for my zoom function:
var zoom = d3.behavior.zoom()
.x(xScale)
.y(yScale)
.scaleExtent([1, 10])
.on("zoom", zoomTargets);
function zoomTargets() {
SVG.select(".x.axis").call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("transform", function(d) {
return "rotate(-65)"
});
SVG.select(".y.axis").call(yAxis);
SVG.selectAll("circle").attr("cx",function(d){return xScale(d)}).attr("cy",function(d){return yScale(d)});
}
Also don't mind the huge red circles, they are just randomly made for testing something.
I should also mention that my graph is supposed be a scatter plot by the time I get everything done.
One quick question as well. Since I'm not using numbers, but custom labels where I've inserted strings. How do I insert the my circles accordingly to each spot on the x axis?
Thank you very much for your help in advance!
I have an application in Flex 4 with a map, a database of points and a search tool.
When the user types something and does the search it returns name, details and coordinates of the objects in my database.
I have a function that, when i click one of the results of my search, it zooms the selected point of the map.
The question is, i want a function that zooms all the result points at once. For example if i search "tall trees" and it returns 10 points, i want that the map zooms to a position where i can see the 10 points at once.
Below is the code im using to zoom one point at a time, i thought flex would have some kind of function "zoom to group of points", but i cant find anything like this.
private function ResultDG_Click(event:ListEvent):void
{
if (event.rowIndex < 0) return;
var obj:Object = ResultDG.selectedItem;
if (lastIdentifyResultGraphic != null)
{
graphicsLayer.remove(lastIdentifyResultGraphic);
}
if (obj != null)
{
lastIdentifyResultGraphic = obj.graphic as Graphic;
switch (lastIdentifyResultGraphic.geometry.type)
{
case Geometry.MAPPOINT:
lastIdentifyResultGraphic.symbol = objPointSymbol
_map.extent = new Extent((lastIdentifyResultGraphic.geometry as MapPoint).x-0.05,(lastIdentifyResultGraphic.geometry as MapPoint).y-0.05,(lastIdentifyResultGraphic.geometry as MapPoint).x+0.05,(lastIdentifyResultGraphic.geometry as MapPoint).y+0.05,new SpatialReference(29101)).expand(0.001);
break;
case Geometry.POLYLINE:
lastIdentifyResultGraphic.symbol = objPolyLineSymbol;
_map.extent = lastIdentifyResultGraphic.geometry.extent.expand(0.001);
break;
case Geometry.POLYGON:
lastIdentifyResultGraphic.symbol = objPolygonSymbol;
_map.extent = lastIdentifyResultGraphic.geometry.extent.expand(0.001);
break;
}
graphicsLayer.add(lastIdentifyResultGraphic);
}
}
See the GraphicUtil class from com.esri.ags.Utils package. You can use the method "getGraphicsExtent" to generate an extent from an array of Graphics. You then use the extent to set the zoom factor of your map :
var graphics:ArrayCollection = graphicsLayer.graphicProvider as ArrayCollection;
var graphicsArr:Array = graphics.toArray();
// Create an extent from the currently selected graphics
var uExtent:Extent;
uExtent = GraphicUtil.getGraphicsExtent(graphicsArr);
// Zoom to extent created
if (uExtent)
{
map.extent = uExtent;
}
In this case, it would zoom to the full content of your graphics layer. You can always create an array containing only the features you want to zoom to. If you find that the zoom is too close to your data, you can also use map.zoomOut() after setting the extent.
Note: Be careful if you'Ve got TextSymbols in your graphics, it will break the GraphicUtil. In this case you need to filter out the Graphics with TextSymbols
Derp : Did not see the thread was 5 months old... Hope my answer helps other people