I made a linegraph in flot, which looks very nice, but i would like a slight change.
I would like a little whitespace before the line starts, and a little whitespace when the graph ends. The horizontal gridlines need to start already, so that the graph just looks more spacious.
Thanks for your anwsers!
Set an explicit xaxis/yaxis min and max, as described in the Customizing the Axes section of the docs.
Another possibility, for vertical space, is to use autoscaleMargin, as described in this other question.
Related
I have a graph laid out using D3 graphviz. It's laying out in a pretty dense way, and I'd like it to use more of the width of the screen.
I have tried adjusing the ranksep and the ratio, but neither seem to have any effect. I've also tried changing the node border, to no effect. Changing the edge minlength just makes the edges look floppy. I can try giving every node an invisible child, but that seems like a horrible hack.
For clarity, by rank, I mean the horizontal spacing between the columns of nodes. (The graph is laid out left to right.)
Ideally I'd be able to give it an aspect ratio and it'd make the most of that space to lay out the graph in a way that doesn't need too much acrobatics.
Am I missing something obvious?
I may well be using the options incorrectly
or the D3 graphviz implementation may not have those features?
Is there no good way to do this?
I have added :
size = "16.66,8.33!"; // 1200x600 at 72px/in, "!" to force
ratio = "fill"; // see https://graphviz.gitlab.io/_pages/doc/info/attrs.html#d:ratio
at the beginning of the graph declaration (just after digraph G {).
It renders a wider output.
Have a try and tell.
I have some labels arranged along the outside of a series of arcs (generated by pie charts). These labels are positioned along 'copies' of the pie arcs, which works to fit them nicely, but they unfortunately also cut them off prematurely, as seen in the screenshot below (in this case, an 'i' from the beginning and bracket contents at the end).
Is it possible to tell the text to extend beyond the path's limits? Or failing that, to extend the path itself along its existing course?
edit: The code I'm using to make the arcs is pretty much exactly what's found here: https://www.visualcinnamon.com/2015/09/placing-text-on-arcs.html.
I'm sure d3 can do something like matlabs plot3!
Multi-Series Line charts I have somewhat figured out by now, but as my lines tend to not change drastically over time (yes, 3rd axis would be time) multi-series is not of much use there, esp. with 10+ lines, say.
I have more data connected to some points of some lines - which I have right now accessible via tooltips with urls. And I quite like it. But If anyone would has a nicer idea for 2D, I'm all ears.
I already read the api documentation from top to bottom many times already, searching for a solution to make a full dot instead of a half dot when the value is zero. To get the picture right this is my sample. I have been trying many ways to force it to full dot circle, but no luck. Thank you for the help. :D
Using another plugin was no option for me since that will require more time, and time is really really important to me right now cause I am already lacking on it. Well basically my solution was a cheat way or basically a noob way. I actually used two divs, then just combine those two, the first graph only has the bar graph, and the 2nd graph only contains the two line graphs. I basically modified it using css to merge the two graphs, hide some of the unwanted axis, ticks and stuffs from one graph and then I get this result
At the risk of asking a silly question, why is each boxplot in d3.box (code and demo) placed in its own svg element? (more generally, placed in its own container element.) Or to put the question another way, why does d3.box only render one component of a chart, rather than all components of a chart? (given that each boxplot is likely to share a common y axis.)
Thanks in advance for any suggestions. I'm sure there's a sensible rationale for this; it's just not clear to me!
Technically, there is no reason to put everything into its own SVG. I don't know why it was done like this in the example, but usually you would have everything in a single SVG and group elements using svg:g elements.
The reason that most d3 components usually only do one thing is that is makes it easier to combine them. If, for example, d3.box rendered x and y axes (or just one of them), you would have to provide options for people who wanted no axes, or a different axis layout, or anything else that isn't covered by how the implementer designed it.
If you're looking for something more high-level that takes care of everything, check out nvd3.js.