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
Related
I'm trying to combine a calendar with a chart on one webpage. They need to be on the same timeline (for example to mark the current day with a line). They do not show the same data (So the calendar events are independant from the chart values).
Illustration of how it should look (The final solution would have different views, per week, per month, per year)
My first instinct was to use a HTML table (or <div>s formatted like a table) in combination with a chart library, the only difficulty there is getting both variants onto the same timeline (They need to line up perfectly).
That's why the idea of using SVG came up (which seems to be the prominent idea in the team), but drawing every table cell with <rect>, taking into account position, border width and then also manually positioning texts (and also clipping them if they get too long) seems like a major drawback.
Is there any sane and straightforward way to implement this? I either have to use a third party chart library and try to perfectly line it up, or I draw everything into one SVG, but then everything down to the position of each text element needs to be calculated. I'm afraid if we go the SVG way every little change to the design could suddenly need hours of work (Besides supporting different chart types, combining line and bar charts, possible animations and so on).
I am trying to come up with a way of adding points on top of a one page PDF graph in a webpage. The pdf's all have a similar structure, but the x and y axis do not always land in the same spot with respect to pixels to the left/right or top/bottom. The scale is also not always the same. I can make these into images as well if need be. The end goal is to take data from another application and plot it on top of these existing graphs as a background.
I so far have come up with a user unfriendly solution of putting the graph in a canvas, clicking on the x and y axis and setting the x and y position of the graph, and plotting from there.
I was wondering if you had any suggestions on ways to do this in a more automatic fashion. The reason I dont want to generate new line charts in the webpage is because I am running from a database of thousands of these PDF files and they are very complex. Re-making them from scratch just to put in the webpage would take months.
Please somebody help me.
I need to save visual layout (after nodes of graph was manipulated) and load this visual representation next time.
I tried to save position of each node, and write this positions in input json {data:{id..}, position{x=.y=}.
But new graph was draw incorrect.
There are two types of positions, where it is on screen and where it is on graph. Be sure to save and load the right one. It might not look the same on your screen if you have panned or zoomed the view port. But the graph relative positions should be able to be saved.
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 doing visualization with the JavaScript InfoVis Toolkit, in particular the hypertree. I am loading data dynamically and sometimes the labels around the nodes overlap and clutter. I would like to avoid this clutter by altering the label positions.
Here is an example of cluttering (the top and bottom nodes):
I imagine that I would loop through each x,y coordinate, give it some bounding box and do basic collision detection, and update positions accordingly.
For this library, I see the demo shows a onPlaceLabel() function, but (if I understand correctly) at that moment I wouldn't know the position of every other node's label. So, I am looking at onComplete(), where I see I can access each node as follows:
onComplete: function(){
ht.graph.eachNode(function(n) {
console.log(n);
}
}
But the node information does not include its label positions, only their positions relative to the center node. Is there a way to access the labels in this way and be able to update their positions?