We Keep Coding

Add Buttons to ThreeForceGraph nodes (Sprite, NodeThreeObject, Three.js)?

It is possible to customise nodes on a ThreeForceGraph, using APIs provided at https://github.com/vasturiano/three-forcegraph, using the method ThreeForceGraph.nodeThreeObject(...). The ... here can be a THREE.Sprite instance, and we can render any svg picture to THREE.Sprite.
However, I wish to have something more than a picture. I wish to add two clickable buttons to each node of the graph. I can do Sprite.addEventListener(...) to detect mouse click, but this is not quite the same as a button. It would be really nice if I can make each node on the graph into a React component (that would be the ideal situation).
After looking around, I haven't found any ways to implement this. Is there any ways to achieve what I described? (Of course, it does not need to be a method of Three.js.) Any examples/references are greatly appreciated.

How to manipulate SVG paths onclick with React?

I'm aiming to create an interactive SVG like the following:
https://codepen.io/iamandrea/pen/rNjPemO
Basically, I want to load an SVG and allow the user to click and modify the paths.
This example uses Two.Js, however, and I'm having trouble translating this to React. After doing some research, I'm not sure if it's the best library to combine for this task.
I was wondering if anyone knew a library that could do something similar? Otherwise, if there's a technique to gather onClick data from an SVG anchor point, that way I can make my own. All I can find so far is how to click an entire SVG rather than the anchors.
jQuery(function($){
$('path').click(function(){
this.style.fill = "#"+colors[i++%colors.length];
});
Sorry that I don't have any other code to show, I've been searching for answers all day and haven't found anything.
Appreciate any help in advance :)

Where do I make a circular charts like Chartbeat.com in jQuery?

I am planning on making an analytics dashboard and would like to implement circular charts like the image attached to this question:
and I would like to do it using jQuery. Do you guys have any usefull links to resources or to other SO questions? Would be awesome!
Thanks!

You can also take a look at :
http://bernii.github.com/gauge.js/
http://www.justgage.com/
Both of them look really good and seems pretty easy to use.

The easiest way would probably be to create an SVG that mimics the appearance you want, and then use JavaScript/jQuery to modify the source of the SVG. The design you're requesting could probably be acheived by simply placing two arcs on top of one another.
Deriving from this excellent answer on calculating arcs, creating two overlapping ones could look something like this, which also demonstrates updating the arc dynamically.

lethargicpanda's suggestions are cool. Check out jQuery Knob too. It also allows user input.

Converting html to svg using javascript/jquery

Is there a way to convert an html snippet to svg?
for example:
<b>This is bolded</b>
I want to make an svg document with the html snippet above... is this possible?

I would suggest that you should edit your question to describe the actual use case and goal you are trying to achieve, as directly implementing what you seem to ask for is hard (see below). Some combination of SVG-in-XHTML or XHTML-in-SVG (for example, this) are far more likely to give you want you want.
We can only help you achieve your goals if you tell us your goals instead of asking us help you to solve a particular implementation you thought of to achieve them.
As I mentioned above, There is not an easy way to do what you suggest. In particular, HTML has automatic line wrapping, floating and general positioning concepts, as well as explicit z-indexing, that are not present in SVG.
The following madness would mostly work, however:
Create an iframe or div on your page and set the HTML to your snippet.
Loop through every element and convert wrap a margin:0;padding:0;border:0 span around every word in the text.
Loop through every element (including your created spans) and calculate the absolute position on the page. (jQuery has a method to do this, or you could use the combination of offsetLeft/offsetTop and offsetParent to walk up the positioned tree and calculate it yourself.)
Calculate the equivalent z-index for each element by walking up the tree and using the getComputedStyle() and creating a chain of the local z-index.
For each of these elements, create the equivalent element in SVG with absolute positioning.
Re-sort the SVG elements you created by the hierarchy of z-indices.

Check this html to SVG demo, (using HiQPDF, a commercial product). You can find there code samples for C# and VB.NET. You can convert an URL or a HTML code snippet as you requested.

There are JS libs, that convert html to canvas:
http://html2canvas.hertzen.com/
But until now, I did not found something similar for svg.

What's the principle inside this js tree?

http://jsbin.com/idala
How is it implemented?

The creator used javascript prototype feature (not the popular Prototype framework) to create a Christmas Tree class named chrisTree.
There are methods implemented to perform the 'drawing' of the tree as well as the animation by:
Dynamically creating DOM elements to represent the trees
Manipulation of CSS styles
Using setTimeout method for animation effect triggering
etc. etc.
Nice work!

Javascript making use of x, y coordinates, arrays and bit of css. You got to analyze it closely to get an idea of how it works. Of course you should have good understanding of javascript. :)

Creating div elements which are absolutely positioned so that it appears as a tree.
Settimeout used to light up divs
Colors are stored in an array
You can view the code using the following link and understand what is being done
http://jsbin.com/idala/edit