I am trying to create a graph based on Mike Bostock's Heirarchical Edge Bundling(here is the gist). I need to make my JSON look as readme-flare-imports.json looks, but I can't figure out what "size" is. I read the API and it didn't seem to help me. Also, it will be a dynamic JSON file based on a mySQL database, so I won't be able to set the size myself. Is anybody able to clear things up for me as to what it is or how I may be able to determine what the size should be? Thank you in advance!
cluster.size determines how large of an area the cluster will take up. You pass values to it like so
// The angle
var x = 360;
// The radius
var y = window.height / 2;
cluster.size([x, y])
x will determine how much of a circle the cluster will use to branch out children. A value of 360 will use the entire circle to display all values. A value of 180 will only use half the circle to branch out values.
y will determine how wide the circle will become in any single direction, i.e., the radius of the circle.
In the Heirarchical Edge Bundling example, I believe the size attribute in the json file is ignored as I could not find anything in the code that cared about it.
Related
With latitude and longitude, there is the possbility to create a bounding box based on xmax/ymax and xmin/ymin.
Having coordinates, I can perform a range search to check, if these coordinates are withing the bounding box. Something like
xmax >= longitude && xmin <= longitude && ymax >= latitude && ymin <= latitude
If all of this is true, I know, my point falls within the bounding box.
I wonder if there is similar possibility, using the index of h3.
If I define the xmax/ymax and xmin/ymin with the index of the corresponding cell:
topLeftCorner: 8b2d55c256acfff
bottomRightCorner: 8b2d024758b1fff
Could I then use the way the cell index is constructed to perform a similar range search, like with real coordinates?
Something like (pseudo code):
point = 8b2d11c1599bfff
if(point[0:4] === topLeftCorner[0:4] && ....
Answered separately here: https://github.com/uber/h3/issues/722
The order of the indexes does not support this directly. You might be able to do this using local IJ coordinates - see cellToLocalIJ. Note that there are areas of the world (around pentagons) where this may not work well, but in local areas this should be possible.
In general, though, I think the simpler option when you want to check for inclusion in a large region is to have a reverse index - e.g. a table, map, or set of the indexes in the region. Determining if a point is in the area is then just a set inclusion check. It might also be simpler or more efficient to actually check a lat/lng bounding box (based on the cell center lat/lng) and then have a second, more expensive check to determine whether the index is in the region.
I'm using DC.JS scatterplots to let users select points of interest. If you use elastic axis you cannot select the highest value point. Look at the DC.JS example (https://dc-js.github.io/dc.js/examples/scatter-brushing.html). You cannot select the highest point in the left or right plot.
In several cases, the highest or lowest point(s) is exactly what people need to be able to select because those are the outliers we care about. If you disable elastic axis and make sure you specify a range that is higher than the max value, you can select the point.
Is there another solution besides setting the axis domain based on current min/max and expanding them little bit? This is sometimes ugly when the minimum=0 and now your domain needs to include some small negative number.
--Nico
Always when I face this issue, I increase the y domain by 5% manually.
For instance:
var balanceDomain = d3.scale.linear().domain([0, s.balanceDimension.top(1)[0].balance + (s.balanceDimension.top(1)[0].balance*0.05)]);
s.amountOverallScore
.width(400)
.height(400)
.x(someDomain)
.y(balanceDomain)
...
Maybe this is not the best solution, but always work for me.
Hope it helps (=.
In my application the values were always positive and I used the following to get correct behavior:
// using reductio on the all_grp to get easy access to filtered min,max,avg,etc.
totalTimeMinValue = all_grp.top(1)[0].value.min;
totalTimeMaxValue = all_grp.top(1)[0].value.max;
// now use it to scale the charts we want
detail1_chart.y(d3.scale.linear().domain([totalTimeMinValue-1, totalTimeMaxValue+1]));
detail3_chart.y(d3.scale.linear().domain([totalTimeMinValue-1, totalTimeMaxValue+1]));
This keeps both charts in sink. An additional benefit was that my rather large dots (symbolsize=15) are no longer being clipped.
Thanks Roger.
On a shape from a logical image, I am trying to extract the field of view from any point inside the shape on matlab :
I tried something involving to test each line going through the point but it is really really long.(I hope to do it for each points of the shape or at least each point of it's contour wich is quite a few times)
I think a faster method would be working iteratively by the expansion of a disk from the considered point but I am not sure how to do it.
How can I find this field of view in an efficient way?
Any ideas or solution would be appreciated, thanks.
Here is a possible approach (the principle behind the function I wrote, available on Matlab Central):
I created this test image and an arbitrary point of view:
testscene=zeros(500);
testscene(80:120,80:120)=1;
testscene(200:250,400:450)=1;
testscene(380:450,200:270)=1;
viewpoint=[250, 300];
imsize=size(testscene); % checks the size of the image
It looks like this (the circle marks the view point I chose):
The next line computes the longest distance to the edge of the image from the viewpoint:
maxdist=max([norm(viewpoint), norm(viewpoint-[1 imsize(2)]), norm(viewpoint-[imsize(1) 1]), norm(viewpoint-imsize)]);
angles=1:360; % use smaller increment to increase resolution
Then generate a set of points uniformly distributed around the viewpoint.:
endpoints=bsxfun(#plus, maxdist*[cosd(angles)' sind(angles)'], viewpoint);
for k=1:numel(angles)
[CX,CY,C] = improfile(testscene,[viewpoint(1), endpoints(k,1)],[viewpoint(2), endpoints(k,2)]);
idx=find(C);
intersec(k,:)=[CX(idx(1)), CY(idx(1))];
end
What this does is drawing lines from the view point to each directions specified in the array angles and look for the position of the intersection with an obstacle or the edge of the image.
This should help visualizing the process:
Finally, let's use the built-in roipoly function to create a binary mask from a set of coordinates:
FieldofView = roipoly(testscene,intersec(:,1),intersec(:,2));
Here is how it looks like (obstacles in white, visible field in gray, viewpoint in red):
Trying to implement EKG style "heartbeat" chart from a design and I'm having a hard time getting D3 to draw a path like I need.
The design spec states that the graph needs to return to nuetral/zero point between each and every data point, and that the curved path from the zero point should be close to the data point itself and rise sharply. See the attached images below
Here is the design....
And here is my attempt to match the curve with dummy data (black circle data points)...
The graph has a time scale X axis and a linear Y axis that ranges from 0 to 2 (my data points are 0,1, or 2 respectively). The line is using 'monotone' interpolation which is the least terrible looking.
Question:
Is there a better way to get this appearance without dummy data points?
Question-behind-the-question:
What is the best way to get D3 draw a custom paths (e.g. from a function)?
Sub-question:
Why does the monotone interpolation curve the path inward so sharply between the last 2 data points?
Any help is appreciated! The designers and client won't budge on this one, so I have to get it as close possible :(
Apologies if this is painfully simple, I have tried searching for a solution.
In D3, I can perform an arc by defining this:
var ringBannerCcwArc = d3.svg.arc()
.innerRadius(420)
.outerRadius(470)
.startAngle(0)
.endAngle(function(t) {return t * -1 * 2 * Math.PI / 6; });
and then defining it in the DOM here:
labels.append("path")
.attr("id", "ring-banner");
And then at the appropriate time I can do:
labels.transition.select("#ring-banner").style("fill", "red")
.attrTween("d", function() { return ringBannerCcwArc });
And that will produce a red coloured arcing "label" starting at 0 and stopping at whatever
t * -1 * 2 * Math.PI / 6
produces as an angle (yes, 60 degress, but I intend for it to be a variable result).
What I would like to do is simply create a line that extends outward from this banner on the radius of the "endAngle" (so that I can build a dynamically driven display).
Something like this image:
My goal is to dynamically attach data to this and employ the amazingness of D3 to it. So once I understand how to draw the above solution, I would then like to know the resulting coordinates of the end line (x2,y2). The line itself can be a set length (say, 50) but how would I determine it's position so that I could attach a final area to it?
Something like this image:
Again, I apologize if this seems obvious. Thanks for any help.
EDIT:
The original question was regarding my use of D3 - creating a ringBannerArc - and then wanting to tap into the coordinate system. So, as the two respondents state, it is a basic trig problem but that's not really the question.
In the end, the answer is that d3 does not do what I was asking. But it can easily perform the solution. If, like me, you are struggling with implementing d3 and understanding it's very unique (and extremely powerful) approach to data visualization then you might find these links helpful. Thanks to the guys over at the d3 Google Group.
Helpful contributors:
Ian Johnson:
First you want to know how to draw a line from one point to another. That's the end result you want and if you can't do it for arbitrary lines you can't do it for the line you want. so lets start there:
http://tributary.io/inlet/4229462/ The second part is calculating the point on the circle you want to draw. But before you do that, you should set things up so you can verify easily where that point is. so lets draw the overall circle, and then draw a point we can use:
http://tributary.io/inlet/4229477/ Now lets try to place that point at some point on the circle based on an input radius using trig:
http://tributary.io/inlet/4229496/ once we can control that point, we come full circle ;) and move the line http://tributary.io/inlet/4229500/
Chris Viau: Wrapped it up in a nice helper function: http://jsfiddle.net/christopheviau/YPAYz/ Suggested a great book for beginners written by Scott Murray: http://ofps.oreilly.com/titles/9781449339739/index.html
Scott Murray: Makes a wonderful reference to a white paper written by the d3 authors - for those of us who like to understand the nuts and bolts: http://vis.stanford.edu/files/2011-D3-InfoVis.pdf
This is essentially a basic trigonometry question.
For a circle, if the angles start from vertical and go clockwise, and your coordinates are normal screen coordinates,
x = cx + sin(angle) * r
y = cy + cos(angle) * r
From these, you can then compute either line simply.
First you want to know how to draw a line from one point to another. That's the end result you want and if you can't do it for arbitrary lines you can't do it for the line you want.
The second part is calculating the point on the circle you want to draw. But before you do that, you should set things up so you can verify easily where that point is. so lets draw the overall circle, and then draw a point we can use:
http://tributary.io/inlet/4229477/
Now lets try to place that point at some point on the circle based on an input radius using trig, once we can control that point, we come full circle ;) and move the line
http://tributary.io/inlet/4229500/