We wish to use a d3 brush to select neighobrs in a scatter plot. For this, a circle is more natural than a rectangle. I imagine a sequence of actions:
1) set the circle's center with a mouse click
2) adjust the radius with mouse motion, the x & y components of the current mouse position perhaps even implying an ellipse
In all the examples my web search finds, the brushed region is a rectangle.
Any advice, or working examples?
Thanks!
Puaul
Related
I have two colored rectangles, both being represented by a 2D array that directly corresponds to their coordinates(ex. [0][0] is the same as (0,0)). Things such as the width, height, and origin of each rectangle are known.
As of now, I want their colors to "blend" in the area they intersect. Detecting if a point is within both rectangles is easy enough, and I have the point's coordinates relative to the origin of my first rectangle as it is the one I am iterating through for color blend checking.
My problem is getting the point's coordinates relative to the second rectangle so I may get that rectangle's color at that point. Here is a visual example of what I mean.
Visual representation of the problem. The black dot is a point on both Rect 1 and 2.
Note that relative to the canvas, the top left corner of Rect 1 is always considered (0,0), and Rect 2 will always appear "on top" of Rect 1.
My idea is to do a simple math equation to get the X and Y coordinates of the point on Rect 2, but so far it has not worked out.
I have a bounded area (x, y, width, height), and set of convex polygons [[[p1x1, p1y1], [p1x2, p1y2],...], [[p2x1, p2y1], [p2x2, p2y2],...]]
The polygons can be outside of the bounded area.
Then I have another convex polygon with a set of vertexes ([[Px1, Py1], [Px2, Py2],...]), I need to translate this polygon to maximizing the distance among all other polygons, but keeping this polygon inside the bonded area that I defined before.
The distance is assumed from the borders of polygon that I am placing, to the borders of other polygons (P1, P2, P3, .... PN)
I calculated the minimal distance among all polygons with Gilbert–Johnson–Keerthi distance algorithm. I need to maximize this value.
If there is no an easy solution, for now I can assume that all polygons are rotated rectangles.
I just need to find the correct algorithm, any suggestion is appreciated, but if you can provide a solution in javascript is better.
EDIT:
I draw a diagram to show the situation:
I need to move the red rectangle to maximize the minimal distance among all blue rectangles.
The red rectangle can be moved inside the black rectangle area.
The green line are all the minimum distances, and the red line is the minimum
among all.
I want end up in a situation like the second image.
If one examines this block:
https://bl.ocks.org/mbostock/8d2112a115ad95f4a6848001389182fb
The gridlines are in increments of 20. However the radius of each gridline does not appear to be equal as it scales up:
I'm guessing there is some geometric justification for this, but that's not what I'm after for my chart. I only want aesthetics, I need the gridline circles to be equidistant from each other.
Question
Using Bostock's radial scale script as seen in the above block, is there any way to adjust the scaling of the radii? I want the scaling to be equidistant.
The only thing you need is to change this...
var y = d3.scaleRadial()
... for this:
var y = d3.scaleLinear()
Here is the bl.ocks with that change only: https://bl.ocks.org/GerardoFurtado/0a0b22d15c4e715e4c748335e37330fb/1670bbcdfdcbed6b6a0ae2a56d5f153570d969d1
PS: There is indeed a geometrical explanation for this: a circle with radius 2r has an area four times bigger than a circle with a radius r. That's why we always (at least in truthful charts) scale the circle's radius to the square root of the encoded datum. Well, you mentioned that "I only want aesthetics". As a data visualisation specialist/enthusiast who happens to be a D3 programmer, not the other way around, I suggest you reconsider your approach and keep the radial scale. Charts that prioritise aesthetics over information are normally bad charts, and charts that impose aesthetics ignoring information are simply untruthful charts.
I am using highchairs 3.0 to create a graph that has N Boxes on it. So far so good. However, one of the user desires is to draw a few plotLines (based on values on the Yaxis) for each Box on the graph. The catch is that the information is different for each of the boxes, so they want the plotLine to just extend from the start of the box on the left side (x-axis basis) to the right of the single box.
Highchairs by default draws the y-axis plotLines (and plotBands, looked at those too) all the way from left to right, causing a very chaotic chart indeed!
Is there a way to limit the length (start / end on the x-axis I guess) of a plotLine in a box plot to just the width of the box?? I guess I basically want to overlay lines onto the area of each Box on the graph.
Thanks!
The best way that I have found to do this is by extending the marker symbol types to create a horizontal line.
Use this as the marker symbol type for a scatter series to accomplish what you're looking for.
Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
return ['M',x ,y + height / 2,'L',x+width,y + width / 2];
};
Example:
http://jsfiddle.net/jlbriggs/m85yv3aq/
Required inputs of: radius, lineWidth, color
((also a useful way to build bullet charts:
http://jsfiddle.net/jlbriggs/UGs2E/
))
I'm implementing some basic annotation draw features, such as arrows. Now I'm a little bit stuck with ellipse.
The methods to draw an ellipse usually address using it's two diameters and eventually a rotation:
However I want to display the ellipse between the point user clicked and the one he's hovering, therefore I need a function that calculates diameters and rotation based on two points:
How would I do that? Can it be achieved with sufficient performance (as it renders during mouse-hovering)?
the steps you shoul follow:
get the angle of the line (from this post: get angle of a line from horizon)
rotate the canvas or at least the part you currently drawing (live demo here: http://www.html5canvastutorials.com/advanced/html5-canvas-transform-rotate-tutorial)
draw an ellipse in canvas (http://www.scienceprimer.com/draw-oval-html5-canvas)
the resulted ellipse will be transformed as described
It can be done in the same way that it is normally done, just using different math to calculate the shape. Without writing the entire code for you, you can start by having an event trigger when the user clicks the mouse button down. The function will copy the users x and y position based on the screen. Then there is a second function which will handle mouse movement. This function will keep track of the x and y coords of the mouse while it is in motion. The final function will be a mouse up event, when a user lifts their finger from the mouse button (assuming this is when the event should be finished). Using the initial and final position of the x and y coordinates, you can calculate the length of the line the user created. That line is the long diameter of the ellipse. Half this number for the large radius. Then use whatever ratio you are using to calculate the smaller radius from the larger one. Then create an ellipse based on these numbers.
For the math: Suppose your first point is x1,y1 and the end point is x2,y2
I'm also assuming that we have a line going from bottom-left to top-right
Distance between two points = sqrt((x2-x1)^2 + (y2-y1)^2) ---> (we will call this d1)
half of this is the length of the large radius ---> (we will call this r1)
Midpoint formula = ((x1+x2)/2 , (y1+y2)/2) ---> axis of rotation (we will call it (m1, m2))
distance from midpoint to end is just the radius
radius is now the hypotenuse of constructed plane, y2-m2 is height of right triangle.
Find the angles between midpoint and one end of larger radius - sin((y2-m2)/r1).
Angle of smaller radius is this angle + pi/4 radians.
calculate length of smaller radius based on ratio.