how to set cell height/width with graphviz dot template?

Community Help
1

I love playing with Graphviz in Observable! It’s a really fast way to build out a model. I’ve had a couple graphs, however, that get really out of hand, like the last one in this notebook:

Is there a way to change the way the cell computes its width using Mike’s graphviz dot` template? I imagine these big graphs might look better if, say, constraining the image with down to 80% of the original.

It looks like there are graphviz attributes for this, like ratio=“compress” and unflatten. I haven’t had much luck in getting these to work when I try adding them into a dot` cell.

2

I’m not sure whether you can change the height / width more in viz.js, but you can change the attributes of the generated SVG afterwards, like this:

phase_subphase_detail_chart = {
  const svg = dot`${phase_subphase_detail}`;
  const w = svg.getAttribute("width").match(/\d+/)[0];
  const h = svg.getAttribute("height").match(/\d+/)[0];
  const r = 0.4; // size ratio
  svg.setAttribute("width", `${r*w}pt`);
  svg.setAttribute("height", `${r*h}pt`);
  return svg;
}
1 Like
3

Try this:

phases_chart = Object.assign(dot`${phases}`, {
  style: "max-width:80%;height:auto;"
})
2 Likes
4

Awesome. Thanks to you both! It’s a bit of a rush job, but it’s Easter so why not? Here’s a notebook using Mike’s solution:

Lots of graphviz charts! Thank you!!

(Now I have to quickly finish up by adding in more description of what’s going on. I also have to gather more data attributes from across IAMs to build out my comparative framework).