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?
Related
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.
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 am using d3 to achieve this chart.
First I thought it is an area chart but the ux said it is a customized / curved chart. So far I am stuck on using corner-radius which is not enough curved. The image is created from sketch then invision so there is no css available on the inspect mode.
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
I am trying to use webgl-surface-plot to give a 3D surface plot of data. At several orientations, the axes labels get clipped. At other orientations, part of the graph gets clipped. Is there a way to expand the canvas size and/or move the axes labels closer to the axes?
You can change the default scale/zoom in the code and then just increase the canvas dimensions via the input options. I plan to add the starting zoom as an option to the chart, when I get a chance. I want to fix the axis labels as well. Currently they are at a fixed distance from the axes. They should, instead, be at a distance dictated by the length of the tick labels. Fixing this will be quite tricky, though.