Dynamic svg height according to the amount of data - javascript

I have created an svg chart using d3.js that visualizes data from a database.
For each entry in my database a chart is drawn, but the problem is that the amount of data for each entry is different.
Some entries have hundreds of data that need to be visualized, so my chart needs to have dynamic height in order to fit them all.
Any help would be highly appreciated.
(While searching around I found questions about how to adjust the chart height on window resize, that is NOT my case.)

Related

D3.js animated grouped bar chart with variable number of groups

I am trying to adapt the animated grouped bar chart example from
https://bl.ocks.org/aholachek/fb0c1cd7ea9707bc8ff55a82402c54b1
for my own purposes. One modification that I am stuck at right now is that my data will have a variable number of groups and the xAxes and blocks have to resize accordingly.
I have already added the resizing of the domains with
x0.domain(data[Object.keys(data)[0]].map(obj =>obj.name))
x1.domain(valueKeys).rangeRound([0, x0.bandwidth()])
in the update function, but this does not seem to be enough. While the width of the bars is resized correctly, the x values are not spaced out evenly and instead get pushed into the far right corner of the graph when adding more elements after the initial creation for example.
For now I only care about the grouped version, not the stacked one.
I would appeciate any pointers
Problem could be solved by clearing out the barContainer before the update. This of course prevents transitions on the already existing bars, but that is good enough for me

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?

D3 Sankey diagram with dynamic height\width

I am trying to implement this Sankey diagram
http://bl.ocks.org/Neilos/584b9a5d44d5fe00f779
For large volumes of data chart goes out of the UI view.
I am looking for an implementation like this
http://bl.ocks.org/robschmuecker/7880033
A chart that dynamically adjust the height width properties.
I am new to D3, dont know how to proceed. Any help is appreciated.
When the d3.js sankey is built, it is based on the initial width and height that you supply. If you have many nodes/bands you will also need to adjust the nodeWidth and nodePadding to space the bands. Typically you would setup an input box for height and width, allowing the user to enter the desired chart size (which you could default to screen.width/height) and then reload the sankey so that the diagram can be reinitialized to fit the new dimensions. The flow example you linked to still requires a manual position of the elements...ie you need to click and scroll. In short there is no automated way to resize the diagram to fit an unknown number of data elements. Hope that helps.

D3.js: Tree layout with variable distance between branches

I'm developing a complex horizontal tree graph with d3 and the d3.layout.tree() function. Now I'm in a point where I need to display a list in each node with a fixed depth (e.g. 4), and these lists have variable height.
One way to manage this is to set a chart height so no nodes get overlapped, but I have to consider the case that all the nodes have the longest list. This makes the chart extremely long and visually ugly, so I wonder if it is a way to set the vertical distance between the horizontal branches dynamically.
I've tried the nodeSize property but again, it has to be the same for all the nodes. If there is no possible way to do this, how would you tackle this problem? I've already set a modal to show all the information, but these lists are mandatory and have to be in the tree chart.
Thanks

how to dynamically adjust height in chartjs

I am using chartjs for my web application currently. I am having an issue when initializing the chart with a large amount of data. I am using a rotated bar chart, and it is removing some of my arguments fields when re sizing the chart. this results in the arguments not lining up with the correct bars. I cannot seem to find an option that allows for the height of the chart to dynamically adjust.
is there a way to achieve this so that I am able to see all of my arguments?

Categories