I need your help!
I have to show a tooltip on the curve using d3, I already have that functionality and it does work, but now I have to show two separated tooltips on one curve.
Let me explain, I used to use this curve appearance, it is a simple d3 curve, and the tooltip works perfectly. And now need to use this curve appearance -
https://github.com/d3/d3-shape#curveLinearClosed
And I'd like to know how to show one tooltip on the bottom of the curve and a second on the top.
So far my implementation of the tooltip works only on the top, I think that happens because d3 draws the bottom line on its own.
So did anybody have a similar problem?
This is a picture how it should look like:
I do not need the code, I'd like to hear any thoughts or ideas about that.
Related
I am discovering the Nivo lib for data visualization and I am blocking on a feature that I would like to achieve.
Here is an example of what I would like to do : https://nivo.rocks/line/
I would like to make a component with an almost similar rendering except that: the curves should appear without the points.
Then, hover the mouse over the curve only the point that you hover should appear
and when we move the mouse elsewhere the previous point disappears to make room for the next one
Apparently the lib does not manage natively, we can make the points disappear / appear but only all or none and not manage them individually.
If you have any suggestions I'm interested, thank you in advance for your help!
Please first take a look on this picture : https://docs.google.com/file/d/0By25CEM_KEOiYzdYaWVicnp6Zm8/edit?usp=sharing
Now i want to make something like that but i want to put d3.js elements on a slider like that instead of images like a rectange, circle, square, triangle so that user can move them with arrow buttons shown in the image.
I just wanted to know if it is possible with d3.js and if Yes, please tell me how or from where to start?
You could make something like that using D3.
One way you could do it is to draw the tiles as rectangles using SVG and then have a clip path that hides the tiles that are outside of the frame of what you want to see. The left and right arrows would update the xScale domain which would slide the tiles left and right. And, you can register click events on the rect elements to create links on the tiles.
See this for some ideas on how to start: http://bl.ocks.org/mbostock/1667367
If you aren't already somewhat familiar with d3, you should probably start with a basic tutorial like: http://mbostock.github.io/d3/tutorial/bar-1.html before you dive into the deep end.
I am using jqplot to generate several line plots, and would like to add the highlight feature to it. In detail, once your mouse is over this line, it will highlight itself (change color). I have see this feature in bar plot (example). Is there a way to introduce this to line plot?
Here is the demo of my code.
This feature, at least to my knowledge, is not provided out of the box by the jqPlot. For this reason the 'easiest' is to add it yourself. I did something of this sort a while back. My approach was to use the jqplotMouseMove event and add the appropriate functionality there.
The idea of my approach is simple:
Get the distance of the mouse point from a line segment.
Then if it is smaller than the line's width - you found your line.
Draw the line in different colour on the highlighter's canvas (.jqplot-highlight-canvas), thus creating the highlight effect - for this canvas we need the highlighter plugin.
The working sample of the aforementioned idea is here.
PS: Thanks to Jonas Raoni Soares Silva, for the point to line distance function which saved lots of my time, and works great.
Can someone please let me know how should I implement this kind of chart? I need to use a javascript library for implementing a chart which has a big circle (100%) inside which there are small semi-circles which divide the bigger circle. Its kind of pie chart but not exaclty pie chart. I want semicircles inside a big circle It looks like a bubble chart to me but it is enclosed within a circle. I am not quite sure which library should I use for this?
Any help would be appreciated!
write your own.
you can make divs into circles with css(border-radius), even into triangles(3d transform within div dat gives no overflow) if you try hard.
then you could utilise absolute positioning to place them where you want them.
That way you dont even need javascript or a library.
By request:
http://jsfiddle.net/h6su5/
Just a small example what you can do with google and some inventive thinking ;-)
I'd like to add a vertical line which will display a tooltip when hovering on it. I'd like to flag a company event this way however I can't really find a way to that with JqPlot.
Thanks in advance,
Lashus.
I think for this one you might use the approach I used to provide a line highlight option in jqPlot, details of which are in this answer. There you have the algorithm for detection when the mouse is over a line.
When you detect that the mouse just entered a line and the tooltip is not visible then build it and show it. Also do not forget to hide the tooltip when mouse moves out of the line. When implementing this part you will certainly find useful the code from this answer.
It shows how to add a custom tooltip on a stacked bar chart, but the code could be easily adopted to your needs.
PS: I assumed that the vertical line will be at some point drawn on some canvas by you (your code). If it is something else that you had on your mind saying vertical line then please explain. Otherwise good luck. :)