Update Venn using jvenn, after deleting sets in random order - javascript

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.

Related

Chart.js / react-chart-js-2 add aura to bubble

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.

How to Create waterfall chart in dc.js

I am trying to create a waterfall chart using dc.js it seems there are not many examples for waterfall chart. How do I achive waterfall chart similar to this one from http://bl.ocks.org/chucklam/f3c7b3e3709a0afd5d57 ?
PS: Will update the answer with a proper solution once I get a hint of the chart. I am trying to create more advanced charts which can be extended as part of dc.js examples.
This might be a late reply to the thread. I'm adding an answer in case anyone else (in addition to the original poster) hits the same question. The code representing my answer is on GitHub. I will give an explanation here as my git repo still lacks a proper readme file (apologies).
The trick is to create two (crossfilter) groups, one containing your real data and the other a dummy data. This dummy data is supposed to serve as support for your columns in the waterfall chart (you can also think of them as the shadow of each column of your data). The values for this dummy data follows this formulation:
Dummy value of current column = previous dummy value + previous real data value
The formula above doesn't account for the first and last columns though. They should be set manually (before and after the loop respectively) if the formula is used within a loop. The first column's dummy value should be 0 and the last one equal to the last value from your real data. Also, some decoration must be done on the chart to render the dummy columns invisible (even when selected/deselected). This feature too is available in the git code.

Making SVG file interactive in D3.js

I have created a layout algorithm for graph visualization so that y position of each node corresponds to time and the graph starts from the top (t=0) and grows dawnwards. I also draw edges with bazier forms I made. Also the color of the edges vary throughout the edge. I need the layout/look to remain the same. Currently, I am using pycairo for drawing the graph that generates a CSV file (potentially, I can create other formats such as PDF,PNG too). My goal is to make the visualization interactive, for example to be able to click on specific nodes and get the data related to that node back. I couldn't figure out how to do this in python. Now, I want to do this in JavaScript and D3.js.
My question is how can I make the CSV output interactive? For example, when clicking on a node, it should return its y position (which represents time), and some other attributes. I also want to be able to jump to a certain y position in a graph given user's input.
It would also be helpful to give me some clues on how to think about this problem.
This is a screenshot of what the final result looks like. The horizontal lines are really not important

Dygraph how to always show values in the legend

Is it possible to always show the values of the signals in the legend even when the mouse is not over the figure?
I think values appearing and disappearing when the mouse is not over the figure are a bit annoying and I would like to come up with a solution which:
Until the user goes over the figure with the mouse, the legend shows signal names and their values at x = 0
While the user moves the mouse on the figure the legend should work as usual (i.e. being interactive)
When the mouse is no longer over the figure the legend shows last values pointed
Would it be possible to get something like this? If yes, how?
EDIT: I found out there are callbacks sensitive to mouse events. In particular, highlightCallback and unhighlightCallback may be used to obtain what I want. Unfortunately, I do not find any example that shows how to change what's shown in the legend, I've only found examples which add HTML below the figure, like in this callback example.
The numbers in the legend reflect the current selection. If there's no selection, there will be no numbers. So try calling setSelection in unhighlightCallback.
Alternatively, use the new legendFormatter option. (Until v2 is released, this will require you to build dygraphs from HEAD.)

How can I show data equal to zero on a log scale?

What I'm working with
I have data that I want to chart showing the intensity of rainfall over a period of time. The API documentation that I'm getting this data from says the following:
A very rough guide is that a value of 0 in./hr. corresponds to no precipitation, 0.002 in./hr. corresponds to very light precipitation, 0.017 in./hr. corresponds to light precipitation, 0.1 in./hr. corresponds to moderate precipitation, and 0.4 in./hr. corresponds to heavy precipitation.
Therefore, it seems logical to use a log scale for most of the data (otherwise everything less than moderate rain would be imperceptible), but this obviously causes a problem for when there is no rain predicted.
Possible Solution
The answer to this question suggested adding a small amount to the data and modifying the tooltip to match the original data.
Problem
This would work very nicely, but I don't know how to modify just the data that the tooltip of a Google Chart (the charting tool I'm using) references.
The Google Chart help documents here and here describe several possible roles columns from the chart's data table can play, and one of them is to be the HTML that is rendered in the tooltip. However, I was really hoping to not have to rewrite the HTML for that. Is there anyone here that knows an easy way to just modify the data shown in the tooltip?
The second link you provide gives you the easiest way to modify your tooltip content, Link. Just add another column like dataTable.addColumn({type: 'string', role: 'tooltip'});and then provide your own tooltip, like looping through all your rows and checking for zero values and replacing the tooltips where needed.

Categories

Resources