Export parallel coordinates plot as high-res image

[tbadams45]

Parallel coordinates plots shine with interactivity. Occasionally, however, there exists a need to generate a static image of a parallel coordinates plot, e.g. for use in a paper.

Is there a way to create a high-resolution image of a parallel coordinates plot made using this library? My current understanding is limited to making the plot as large as possible and then using print screen, but I would hope there's a better way.

[syntagmatic]

There's not a library method to do so, but since the library's been updated with retina support you can get a decent screenshot on a high resolution device.

Some alternate ways to do it with more effort:

1) Implement your chart on the SVG Parallel Coordinates example. Then you can just copy the SVG document and get a vector version of the chart http://bl.ocks.org/mbostock/1341021 2) Use a headless browser like PhantomJS to create a screenshot larger than your display

[tbadams45]

Thanks @syntagmatic, this is helpful. I used PhantomJS and was able to produce a high res photo fairly easily by adjusting the width/height of the plot. Main issue is that the text labels etc. are very small at that size, but that can be fairly easily adjusted.

Is there a way to modify the stroke width of the lines in the parallel coordinates plot? As I understand they're implemented in canvas, and there doesn't seem a way to do this in CSS. (This is all very new for me.)

[syntagmatic]

The canvas context is exposed as .ctx: https://github.com/syntagmatic/parallel-coordinates#parcoords_ctx

You should be able to do something like parcoords.ctx.lineWidth = 3 after the chart's been initialized, but before you render the data.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth

[tbadams45]

Thanks @syntagmatic. Much appreciated.

[syntagmatic]

Added by @dehli in https://github.com/syntagmatic/parallel-coordinates/pull/312

Thanks!