projectmesa / mesa-viz-tornado

Apache License 2.0
2 stars 8 forks source link

SVG Grid Visualization #12

Open ssegrubdivad opened 1 year ago

ssegrubdivad commented 1 year ago

What's the problem this feature will solve?

The current grid visualization uses HTML5 Canvas which rasterizes elements. This means that when using visualizations in publications or presentations there are image resolution and quality limits.

Describe the solution you'd like

A grid visualization based in SVG would permit the creation of vector-based visualizations of models.

Additional context

I have created two working files (SVGGridModule.js and SVGGridVisualization.py) that currently perform well on my system, but I would like additional testing and input/recommendations related to functionality. One feature of my work is a simple shift-click download that permits the user to easily access a complete .svg capture of a current state of the model visualization. This .svg file can be easily converted to PDF (using Inkscape or similar applications) for use in high-resolution publications, printing, and presentations without loss due to rasterizing.

rht commented 1 year ago

I'd need to take a look at the SVGGridModule.js implementation to see if this can replace the current implementation in the library.

ssegrubdivad commented 1 year ago

Understood. I have pushed these within my fork at mesa/visualization/templates/js and mesa/visualization/modules. Any feedback would be greatly appreciated.

ssegrubdivad commented 1 year ago

Also, to be clear, I don't think that I'm asking for a replacement of the current implementation. Just an additional option.

Corvince commented 1 year ago

Also, to be clear, I don't think that I'm asking for a replacement of the current implementation. Just an additional option.

From your motivation to do this it sounds like I see no reason why this should not replace CanvasGrid. I mean in general, I haven't looked into your code, but I think it wouldn't make sense to have two grid implementations. SVG can also be styled through css, which is another advantage.