Trying to visualize 3d graphs using D3.js. All nodes & arcs are fixed (eg X,Y,Z coordinates are known), no need for Dynamic Force-Directed positioning.
This example, from a commercial library, is great for nodes visualization:
https://www.highcharts.com/demo/3d-scatter-draggable
(rotation, different colors, more info shown on hover...).
How can one
do exactly the same in D3.js ?
add arcs? (having a list of arcs between nodes). Ideally, it would show the arc strength too, with a wider line when set to stronger.
Closest examples found:
https://bl.ocks.org/Niekes/d8007a5f71f45ab80a2977a8eb7ab3c9 - doesn't allow 3D rotation, no info on hover, no arcs
https://medium.com/ninjaconcept/interactive-dynamic-force-directed-graphs-with-d3-da720c6d7811 - no need for dynamic force, not 3D.
Related
Issue Here
Currently I am having an issue where when I generate my venn diagram layout, I get a venn diagram without intersections and instead circles that become enclosed. I want to generate my venn diagram with clear intersections such as the above example labeled C but instead some of the venn diagram intersections are getting enclosed in the root circle.
EDIT : Found the issue. venn.js presets the size of the venn diagrams so certain venn diagrams with 1 node will end up becoming enclosed. I had to manually set the size of my sets within venn.js and that helped fixed the solution.
I'm working on a D3 version 4 donut graph to represent dynamic data with animation transitions. Some of the labels are large enough to be two lines and can be a very small percentage piece of the the overall graph. This results in overlapping labels.
During the transition / animation, how can I keep the labels from overlapping with one another?
* The demo/example I'm working from: http://bl.ocks.org/dbuezas/9572040
* The current working code based off of the example ^ above: Code Gist
In my research, I found solutions that would adjust the label's translate style after they have landed on their destination but the resulted in non-fluid transitions.
I'm trying to make an interactive donut chart using d3 and am running in to an issue with certain datasets where the donut chart arc slices are too small reliably click on them for interactivity.
Example:
According some UX things I've read 44px is the desired "normal" touch size for most elements on a mobile device.
Is there any way to pad the data scale with d3 in order to ensure my slices start at a given minimum width so they are big enough to click?
I quite like this graphic by NYtimes. This one I think is created with illustrator but would it be possible to create something like this with d3.js? Is there a working example of this somewhere?
It looks like a voronoi treemap. It is created by recursively subdivide the area with a weighted voronoi diagram:https://www.jasondavies.com/voronoi-treemap/. For instance you can substract the weight from the euclidian distance and skipping overlapping points.
I am building an arc graph where the start and end points of the arcs are times in one day. I have a d3 scale that converts date objects into radians, but I need a scale with four ticks applied around the outside of the graph. I did it with jQuery, and you can see how it's supposed to look below
The problem I'm having is that the jQuery (and myself) is doing a poor job keeping those ticks at equal distances from the graph. Different screen sizes are making this a pain.
Does anyone have any idea how do create d3 time axis that is a circle? I've googled with no results.
Here is a link to the live site