Is it possible to give an edge a fixed length? Even if I set the length of individual edges, physic engine changes it.
I am trying to visualize 3 clusters, each with couple hundred of nodes. There is an option to aggregate the cluster into couple of nodes. I want to connect these aggregated nodes with really short edges and give these nodes high mass so they will repulse other clusters like they were doing when they had hundreds of nodes.
It seems like the answer to this question these days is YES! The network/edges visjs.org docs describe a "length" option:
"The physics simulation gives edges a spring length. This value can
override the length of the spring in rest."
So when you're setting up your edges you might do something like this to make an extra long edge:
myEdges.push({from:'nodeid1', to:'nodeid2', length:300});
The length by default is about 95 I think, so a length of 300 would be about three times the normal.
If you want to change the default edge length (not including any which you've set explicitly on edges) then this is the 'springLength' of the network, so pass an option while making the network:
var network = new vis.Network(container, data,
{"physics": {"barnesHut": {"springLength":100, "springConstant": 0.04}}}
);
The physics engine might constrain things and sort of hide the changes you're trying to see, so you may also need to tweak things like 'springConstant'.
It's not possible to set a fixed length. You can play around though with the default springLength and springConstant though, checkout the docs on physics:
http://visjs.org/docs/network/physics.html
Related
If you have a file which include objects for example for EE like transistors, resistors etc and if you group them into one and then from the corner drag it to zoom in a bigger figure.
How can I make sure that these components are not zoom in only wiring changes?
The problem is that I have like 30 images with different sizes and I'm placing them in a table with many images side by side. However, if I keep the same scale then some images looks small compared to other. So I tried to scale them to get the same size. However, this make the components's sizes are also scaled up with different scale factors.
Here is an example of circuit using the bult-in shapes in Visio. As you can see the components'sizes got bigger when I scaled up the object. This is usually desired. However, in my specific case I want to keep the component's size same.
Here is the Visio file or I think you can also use any available components in Visio.
https://file.io/VRUCR8yVgYxs
I'm trying to use Vega-Lite to do a plot similar to a graph, where nodes are connected to other nodes by edges. The nodes vary in size according to a variable,while the edges width also vary.
The information for the nodes is stored in a different dataset than the information for the edges.
The problem is, once I try to plot everything together ("nodes" + "edges"), Vega-Lite is marking the size of the nodes very small (almost not visible). If I don't use the "size" for my edges plot, everything comes out normal.
Here is an example of what I'm doing (note that the notation is a bit different from native Vega-Lite, because I'm programming on Julia):
v1 = #vlplot(
mark={:circle,opacity=1},
x={μ[:,1],type="quantitative",axis=nothing},
y={μ[:,2],type="quantitative",axis=nothing},
width=600,
height=400,
size={μ_n,legend=nothing,type="q"})
v2 = #vlplot(
mark={"type"=:circle,color="red",opacity=1},
x={ν[:,1],type="quantitative",axis=nothing},
y={ν[:,2],type="quantitative",axis=nothing},
width=600,
height=400,
size={ν_m,legend=nothing,type="q"})
Then, when I create the visualization for the edges, and plot everything together:
v3 = #vlplot(
mark={"type"=:line,color="black",clip=false},
data = df,
encoding={
x={"edges_x:q",axis=nothing},
y={"edges_y:q",axis=nothing},
opacity={"ew:q",legend=nothing},
size={"ew:q",scale={range=[0,2]},legend=nothing},
detail={"pe:o"}},
width=600,
height=400
)
#vlplot(view={stroke=nothing})+v3+v2+v1
Any ideas on why this is happening and how to fix it?
(Note that the "scale" attribute is not the reason. Even if I remove it, the problem persists).
When rendering compound charts, Vega-Lite uses shared scales by default (see https://vega.github.io/vega-lite/docs/resolve.html): it looks like when your size scale is shared between the line and circle plots, it leads to poor results.
I'm not familiar with the VegaLite.jl syntax, but the JSON specification you'll want on the top-level chart is:
"resolve": {"scale": {"size": "independent"}}
In Marks, click Size and there pops a slider where I can adjust the size of a shape. But how to accurately control the size, is there some property with numbers to accurately control it? I have two sheets to show something similar and I want to display exactly the same sized shapes.
If you want to ensure 'sizes' are the same across two worksheets, I'd suggest snapping the 'size' setting to the center on both, as this is the easiest option to select. You can then use a measure to set the size, if this is desirable, and then the difference in size will be relative on both worksheets.
There isn't a numerical value override for the size slider.
Ben is correct, there isn't yet a numerical value override for the slider. You can use parameters with Min/Max/Sum etc. and a variable to somewhat change the sizes but they have to have multiple entries per line. It is unfortunate that Tableau still doesn't get that people want both a 'relative' sizing system that uses numbers from the dataset and a 'static' sizing system that allows for shapes to be set to '11px' or something along those lines. Yes, you can control that kind of in the dashboard with a vertical and fill entire box etc; but that doesn't address the very real scenario where you want a user to be able to re-size on the fly. Just my two cents.
I ran into this today. Very annoying. Need to keep shapes the same size across all worksheets and therefore same on dashboard.
I'm using a single stat panel where the values can either be 0,1,2,3,6,7. Is there a way that I can define the color for each value separately? I see the thresholds but it seems it can only do it off of three values? Can I do this based of more than 3 values and with different colors each?
That is currently not possible. There is a feature request for support for multiple thresholds so hopefully a PR will come for it soon:
https://github.com/grafana/grafana/issues/3608
I am using Rickshaw (based on d3.js) to plot stacked bar charts. The problem is that the first bar is usually way more higher than the others, ruining the visual feedback.
Using logarithmic scale is (I guess) not an option here, because then the proportions between stacks in a bar will get broken. I wanted to introduce a horizontal break like in following image:
However, I cannot find any out-of-the box feature of Rickshaw or d3.js to do something like this. Any suggestions on how to make one?
This would require quite a bit of additional work. Here's an outline of what you would have to do.
Create two scales, one for the lower part and one for the upper. Set domains and ranges accordingly.
Pass values to the lower scale, capping them at the maximum domain value such that bars that are longer will reach the maximum.
Pass values to the upper scale, filtering those that are lower than the minimum.
You basically need to create two graphs that are aligned with each other to give the impression that there's just one. If you keep that in mind, doing it shouldn't be too difficult.
Here's a quick and dirty proof of concept that uses the linear scale's .clamp(true) to prevent the bars from becoming too long for values outside the domain.
The d3fc-discontinuous-scale component adapts any other scale (for example a d3 linear scale) and adding the concept of discontinuities. These discontinuities are determined via a 'discontinuity provider', which can be used to create one or more 'gaps' in a scale.
For example, to remove a range, you can construct a scale as follows:
var scale = scaleDiscontinuous(scaleLinear())
.discontinuityProvider(discontinuityRange([50, 75]))
Here is a complete example that shows how to use this to create a 'break' in a scale in order to render values that have large gaps in their overall range.
https://bl.ocks.org/ColinEberhardt/b60919a17c0b14d745c881f48effe681