Vector export?

[toomim]

Mike, do you think it will be easy to build a file export function to
get perhaps a scalable .svg or .pdf file that one could embed in a
paper?

I'm building a data visualization toolchain, and I'm wondering if I
use protovis now, can I expect that perhaps some time in the future
I'll be able to embed these guys into a pdf?

[Mike Bostock]

Great question.

The trick I've been using on Mac OS X is to print to a PDF file
(Print... > Save as PDF...). Because Protovis uses SVG, this preserves
the vector graphics and you can embed it in a paper without losing
quality. You may need to use another program to crop the PDF, and be
sure to turn off the extra headers and footers.

Another option is to extract the SVG source from the generated
visualization. Unfortunately, you can't just right-click on an SVG
image and save it, which would be a great browser feature. But you can
get the source of a visualization `vis` as:

vis.scene[0].canvas.innerHTML

You could alert this, or use console.log, or set the value of a
textarea to it. Then you can copy-and-paste this into a .svg text
file, which should let you import it into another program.

Mike

[Michael Toomim]

Oh awesome! Both of these tricks are more than good enough for me!
Thanks!

[jmcmichael]

Use Firefox with Firebug installed, and try this:

1) View one of the Protovis examples like this one
http://vis.stanford.edu/protovis/ex/antibiotics-burtin.html.

2) Click on the Firebug icon to view its interface.

3) Click on the Inspect tool (second icon from the left in the
toolbar, looks like a box with an arrow over it)

4) Move the mouse over the chart until you get a square that contains
the chart and nothing else. When you have just the SVG part of the
chart highlighted, you'll see in the HTML view below an <svg ...>
element highlighted as well. Click once to freeze the inspection area
on the chart.

5) Right-click on the highlighted <svg ...> element in the HTML view,
and select Copy HTML.

6) Switch to your favorite editor, open a new file, and paste in the
HTML.

7) Save the file with a nice name and .svg extension.

You now have a proper SVG file that can be opened up in any editor
that can load SVG!