I'm currently building a bubble chart that renders correctly with the data points - https://react-chartjs-2.js.org/examples/bubble-chart/
My next step is to conditionally render an "aura" around some of those bubbles (there's no interaction but the aura has a meaning). The "aura" has a single color and is always of the same size.
The only solution I could think of was passing another option to the "dataset" that renders duplicate bubble that's just bigger and behind the original one.
I'm struggling to derive based on documentation if there's a better way of adding it to the graph. Any pointers would be very helpful.
Related
I'm using plotly.js to plot real time data. I'm using the extendTraces method to do so. As can be seen, as new data comes in, the number of points on screen increases, and the graph condenses. I'd like to have the graph pan automatically to the right at a certain point (say 20 points). I was looking at the possible events for this in the documentation, it would seem after_plot would be my best bet though I don't know if extendTraces creates an after_plot event. Either way, is there a function to automatically pan the chart? I can't seem to find this information anywhere.
It was not intuitive for me to find this so I can see why you had trouble finding the answer. But it appears that zoom and pan are controlled by the range attribute of one of the axes attributes. If you want to zoom or pan on the x axis, you need to change the range attribute on the xaxis attribute of the layout.
I want to create an editable tree graph using Vega. What's the best way to do this?
So far, my approach is to create an overlay layer with inputs for nodes titles (Figure 1). I see the same approach being used in tools like Miro or Whimsical.
The way I do this is I grab vegaView, get nodes layout coordinates (vegaView.data('tree')) and draw my inputs overlay based on it.
Is there a better approach to do this? I'm new to Vega, and I don't know a lot of things about it. Perhaps, I could use triggers or event streams for this somehow. Although, from what I saw so far – Vega can only draw inputs outside of its main drawing area (those bound to signals).
We're working on developing a database wherein we are using Jvenn.
"http://jvenn.toulouse.inra.fr/app/example.html"
However, we're facing an issue regarding random deletion of sets. The text area gets emptied when any random set is deleted, but the venn diagram does not. When we tried to do the same in reverse order, the venn diagram changes along with the set.
For ex., when there are 6 sets and the fourth is deleted, the number of terms in the fourth set get emptied in set 4 from the text area as well as from the venn diagram. But there still are 6 sets being shown in the diagram. But, when we go in the reverse order deleting entry 6th>5th>4th>3th the venn diagram also changes.
Can anyone help us with understanding how we could implement such a change in our code, so as to add a random deletion option.
I am trying to make a visualization using d3 which is basically a scatter plot with links between the points. (I have attached a .gif of the existing java based visualization)
The points can be added by double clicking other points. On hovering over a point, I wish to have links drawn between the point and all its partners on screen.
I have the part where on double clicking a node, its partners are added. What I need help with is drawing the links (primarily I am not able to understand how can I get the x1,y1,x2,y2 values required to draw the links).
This is what my DOM looks like:
I have seen a lot of examples online but somehow not able to figure the solution - if anyone could link me to a similar visualization or share a fiddle/ give some pointers on how this can be achieved I would be really grateful.
First the simple stuff: here are 2 mechanisms for drawing the lines.
Next, in terms of the data representation of the lines, check out how links are typically drawn when working with the force directed layout.
Important: Do not get distracted by the existence of the force layout in this example and by the fact that the force layout works with these links (which are passed into it by calling force.links(links)). That aspect of the example probably doesn't have an equivalent in what you're trying to achieve.
However, do notice how the links array is constructed —— with each element of the array being an object with pointers to source and target datums. In your case, you'll want to work with a similar links array, where source is the node under the mouse and target is a node that's connected to it. So you'll end up with an array of links who all have the same source datum but unique target datums.
You can then bind the links array (via the usual .data() method) to a d3 selection of line or path elements. Once you bind, you can use the usual enter, update, exit pattern to append, update and remove (on mouse out) the drawn lines.
Given a source and target datums, you can calculate the x and y of the endpoints in the same way you currently calculate the translation of each <g> element, presumably using a d3 scale.
I am not sure if there is a way to implement this feature. I am looking in for something like zoomable treemaps but to load a few child levels on first go, then no node click add more child nodes and append them to the tree.
Say in http://bost.ocks.org/mike/treemap/ after i reach the leaf node, I make an ajax call if child exists, and if it does, I add them as a child to the graph. I dont want to redraw the graph from scratch, but rather make it more of a visualication on click. This is challenging to me, as i am not aware of how will the accumulate function will work.
This would ensure also, that if i click on grandparent it will help to go back to the previous parent.
This I am planning to achive:
1. Load on click
2. Make it more dynamic
3. Implement it for a very large dataset within browsers cache-able range though
Could someone please suggest something on this front?
I would move the algorithm of calculating the dx, dy, x and y on the server side by accepting the size of the div where you would want to place the treemap on and on a single call I'd return objects upto depth 3 or 4. The challenge could be with the animation transition.