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?
Related
I'm currently using a Polar Area chart from the chart.js lib, and I'm looking to style the scale numbers via CSS.
Below are two examples:
What it currently looks like:
What I want it to look like:
I'm not sure how to access those elements and apply CSS to them.
Some help to understand that process would be much appreciated.
Thanks! 😀
Charts.js produces a bit mapped image of a chart on a canvas element. Canvas elements are not subdivided into component elements that can individually styled using CSS (which is used for styling document elements in the DOM).
Styling of chart elements is actually achieved using canvas drawing options when the element is painted. Charts.js allows you to specify these.
A quick tour of documentation suggests you can specify the appearance of legend text using legend configuration options.
Worth looing into, the HTML legend call back may provide the means of making painted legends respond to CSS styling. See this related question Custom Legend with ChartJS v2.0
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.
I'd have a few different visualizations (containing primarily nodes, links and paths), which I would like to enlarge by a factor 3 without having to change the width and length of every single class. Is there a simple way in D3 to make the whole visualization bigger? I'm currently zooming in using the browser, but that is not a good solution as it requires other users to do so as well.
I am creating a grid pattern (as per this solution) on the whole viewport.
The grid is generated from the top-left of the viewport, however, I want to generate it from the middle of the screen so that it consumes the whole screen yet is aligned from the centre. How can I achieve this?
You need to change the x and y attributes of your SVG pattern. This website explains how you can various alignments for your SVG pattern:
http://tutorials.jenkov.com/svg/fill-patterns.html
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.