Hide HTML outside of canvas element in the JavaScript tool InfoVis - javascript

I'm currently creating a visualization of some objects on my project and I'm using the InfoVis toolkit to handle the graph visualization part. So far I have the nodes plotted correctly and relating to each other correctly, but there is a graphical error that is bothering me. When a node is partly off of the canvas, the background of the node is hidden (as it should be) because it is a canvas element itself. However, the contents (which are HTML) are shown completely and they hang off of the canvas element.
You can see the visualization here: Link
Drag around the graph until one of the nodes is partly off the screen and you'll see it. It is more obvious on the right/bottom sides.
Here is a picture of the problem: The black border is the canvas border.
How can I stop this from happening?

Try setting overflow: hidden on the div with the ID infovis-canvaswidget. It looks like the Canvas element is injected into it.

Related

Create HTML grid from output of rectangle packing algorithm

I'm using the rectpack python library to obtain the optimal rectangle packing positions for div elements that contain d3 charts. I have the height, width, bottom-left corner x coordinate, bottom-left corner y coordinate for the div elements on a 1200px wide canvas that looks like the plot below.
Note: Due to the nature of the project I have to iframe the d3 chart HTML in my grid. I only have the width and height info for the charts and they may also be later replaced by another kind of charts like bokeh chart HTML outputs for example. So, positioning the divs is my only options for this.
I need to translate this into a HTML grid but since I'm not a web developer I'm kind of stuck as to how to create such a grid with the information above. I'm using the jinja2 templating engine to create this. However, I'm stuck trying to position the divs exactly since there doesn't seem to be an obvious place to add the position information outside css. But since each element is unique, dynamically creating css for each element doesn't seem to be optimal.
What would be the best approach in this scenario?

Searchable label text Chartjs

I'm trying to get the label text within my Chartjs Bar chart's to be discoverable via a normal ctrl+F or cmd+F search. I'm not really sure how to approach this, as it seems that the text generated within the canvas isn't rendered as text within HTML elements.
Chartjs uses HTML5 canvas to create it's graphics. The HTML 5 canvas, by design, is a drawing board, so any text inside the canvas is considered a drawing, therefore, not searchable, unfortunately.

Zoomable background for cytoscape js

We're making a graph for a project right now. This graph should show all crossways of a city. And most ways between them. We started of using cytoscape.js for drawing the graph. Now we want a background behind the graph. This background will be the map of that city, so it has to be scrollable and at the right position.
Our first idea was to make a rectangle node and give it a background. Than we added the map and put in the right coördinates. Now the map is scrollable and is always at the right position. This gave us two problems. First the graph can't be panned anymore, cause when you try to pan you will try to select the underlying node. We fixed this by using the cytograh-panzoom plug-in.
The seccond problem is, that the edges aren't clickable anymore, because the background-node is now covering them and it seems impossible to get the edges on top.
The questions:
Is there a better library to draw such a graph?
If not, is it possible to draw edges on top of the nodes with cytoscape?
Is there another way with cytoscape to do this?
Kind regards
You could listen to viewport events and update the background-position and background-size properties of a background image set in the CSS for your cy div.
Or in lieu of a background image, you could have a separate div with an image that uses CSS transforms instead of background-* properties.

Flattening layers of DIVs and SVG into a single image

I'm working on a ball customizer for a client. It allows the viewer to change the colors of the ball, change the text, etc. The ball itself is just many layers of divs stacked on top of each other with their background image changing to predefined colors. The SVG comes in when they want to change the text of the ball (I use SVG because the text needs to curve).
The problem arises when I try to use toDataURL. I guess the SVG in the canvas basically ruins it from ever being able to pass through toDataURL without the browser throwing a security warning.
What are my other options? The backend is ColdFusion.
you can render svg to image by putting it in blob, you can also render html to svg using xhtml namespace - security error is caused by svg namespace property (xmlns) in tag as www.w3.org/2000/svg is "cross origin" (for me its just Chrome bug). If you really need do get pixel data from client side generated svg - you may be in trouble i'm not sure if it's possible at all to make it works in chrome. I'd rather try to render curved text directly on canvas, not svg

How to add onscroll event to a JavaScript InfoVis StackArea Chart

I seem to be having trouble arising from adding a scrollbar to my JavaScript Chart. The problem is my chart
infovis is 2400px, while the frame is 800. However, whenever I scroll right, the cursor becomes misaligned and trails (as though the x and y coordinates have become confused).
To give you a better idea, here is a link to the chart.
http://philogb.github.com/jit/static/v20/Jit/Examples/AreaChart/example1.html
My question is: how can I best rectify this problem? Should onscroll be called in the html div or css or .js file? Also, what do i use for the selected div? Would it be the center container holding the visualization, the overall window, or #vis (the visualization itself). I have attached a screenshot below for clarification.
Due to the animation and drilling down capabilities of the graph, this issue renders the graph unusable. Any help or guidance would be appreciated.
Also, here is a link to the open source API this is based on: http://philogb.github.com/jit/demos.html
Unfortunately the site will not allow me to post a screenshot.

Categories