I'm trying to make a menu for a website, and the client has provided me the final view of the menu: three circles, one in another, divided into segments. And each segment is a link, which will load content with AJAX.
So, I'm playing with Elycharts, and managed to make the three circles and divide them into segments. The main difference between the current version and the desired result is that the three circles must be different in thickness ... but can't find a way to control this ...
What is the way to achieve this? Thanks in advance ;)
I managed to do it with d3.js, much simpler ... and generates simpler code too ;)
Related
I'm trying to create a layout in this sketch
I want to have a vertical slider in the center, one SpanLabel on the left and another on the right.
I've tried using BorderLayout, but the SpanLabels overlap the slider if their texts are long. Is there a Layout that I could use to achieve a similar style or something I could do to fix BorderLayout?
CenterAbsolute and CenterCenter don't help in fixing this.
I'd use a TableLayout with percentages for each column to achieve this sort of layout.
BorderLayout assumes the preferred size of the elements on the sides/top/bottom isn't too big to cover everything so it's a bit problematic in some use cases.
I want to make such kind of bubble chart:
But only i can do is here - http://jsfiddle.net/zeleniy/h646uopc/6/.
jsfiddle code mock
How i can move them apart to escape overlapping. I understand that in some cases bubbles will be shifted along the x axis because of chart height limit. But in any case i do not know how to do it? And i am not sure that want to use force layout to scatter bubbles. I want do draw it at once.
Finally i do it - http://zeleniy.me/stretched-bubble-chart.html.
You should use force layout with specific gravity implementation. Read this article for details - http://vallandingham.me/building_a_bubble_cloud.html
I'm trying to make 3 different circles to my website. I don't want to insert it as a graphic/image file. So I've been trying to achieve it using CSS3, but I can't really work my fingers around it.
What will it look like?
I have uploaded a picture of what I'm trying to achieve at: www.sp34k.com/etc/circles.jpg
I can't really show the code I've been trying to use to achieve this, as it all looks totally weird and nothing floats currectly.
What I've tried
What I've tried is to make 3 circles with position absolute and then use % (percentage) to determine the width of the colored parts, but I can't twist my mind around how it should be set up.
Any suggestions is appreciated,
Mike
Here is a simple try of me to achieve the effect you want:
DEMO
edit: css-only solution
It can be easily animated with javascript or keyframes. Arbitrary content would go into the inner div. To change the percentage, simply adjust the angle of the pseudo-elements.
With a little more effort this could be easily refined I guess;)
Note: the transform has the webkit-prefix, so it works only in chrome/safari - to see it in firefox or other browsers, you need to change the prefix.
P.S. I will animate it when I'm home from work.
Good one by Christoph but he is using SASS/SCSS which are comparatively slow then normal CSS because they have to be converted to CSS before browser render it so I have have a different Solution for you
try this fiddle
I am working on a SVG application and now want to let a user resize an object using draggable corners, very much like in SVG-edit (http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html).
The functionality should work as follows: The user selects an SVG object, drags it to the main ‘canvas’ and once on the ‘canvas’, four corners on the outside of the object appear, the user can drag on each of the corner points & drag to enlarge the object. The objects will be rectangular in shape and created using paths, not using the SVG ‘rect’ function.
Would anyone have any suggestions as to how this should be implemented?
Thanks in Advance
You could take a look at some existing open source implementations. svg-edit is one which you already mentioned.
To showcase a tool that I developed, I wrote a demo which implements this functionality. This which may serve as a simpler and more restrictive example than svg-edit, as it doesn't do too much other than allow you to draw rects and circles, and rotate/translate/scale them.
I have edited jquery to make rect draggable, recently put them in a g and lost this functionality. The g doesn't contain the position data.
Might be possible to bubble down to the children elements.
I essentially want to have the tick labels sitting inside the graph in their own column. Similar to how Campaign Monitor graphs are. But I can't find a way to do this. Is it possible?
In current versions of flot, the only thing you can control about the ticks is the contents and the label class (all ticks have the class "tickLabel").
I think with those two abilities, you cannot do what you're looking for.
Check out this flot bug for some code modifications that might get you to what you want: http://code.google.com/p/flot/issues/detail?id=191
How is this question different than this one?
jQuery Flot data/axis labels on top of graph
For that one, someone suggests negative labelMargins