2

We have done a visualization, mostly in D3 and we would like to generate a nice pdf of it to benefit from vector rendering rather than doing a mere screenshot. It can be seen at:

http://www.bonneel.com/prot/prot2/

I also saw Sergiy's tutorial on producing pdfs out of D3 visualizations. However, his technique works if there is a single svg element (and I didn't manage to extend it to the multiple views we have), and actually produces a strange output in our case

See below for a screenshot of what it produces : the grey background is outside of the clipping area, and is just shown to illustrate that in addition to the view being incorrectly black (and doesn't show the entire visualization), it also extends outside of the clipping area with strange artifacts.

Screenshot

I understand that some elements might not be possibly converted to vector graphics (e.g., the 3D view), but having a screenshot that is mostly vector graphics would be nice (e.g., all the div elements that contain SVG shall be represented in vector format, and only the 3D view rasterized).

Any idea ?

nbonneel
  • 3,286
  • 4
  • 29
  • 39

1 Answers1

1

Hopefully the SVG Crowbar can help you. I've used it before and it picks up most of the styles, though you have to read the warnings at the bottom.

Once you have your SVG image (with styles!) you should be able to open in Fireworks or Illustrator and export to vector PDF.

bbill
  • 2,264
  • 1
  • 22
  • 28
  • Unfortunately, it doesn't work on the histograms on the top of the visualization. The result is better than the screenshot above (there is no black area), but the bars of the histograms are not showing up, and there are still these strange horizontal lines like in the screenshot above... – nbonneel Jul 19 '13 at 00:24
  • Oh, I didn't see the link to your site above. You've got some interesting markup on the page (inspecting some elements is pretty illuminating as to how it's actually created). The problem for Crowbar is that the styles seem to be applied to the bars having a particular CSS class, which the crowbar can't follow automatically. If changing the code to generate the SVG isn't too difficult, that's probably a better bet than having to write a script to change all of the SVG after downloading. – bbill Jul 19 '13 at 07:19