SVGdatashapes

API Examples GitHub PyPi MIT License

Mar 2023: This package is deprecated and superseded by a new package (an complete re-write of this) ... called DataDraw

No further development / support will occur here.

SVGdatashapes.py is a compact library for creating many types of plots and visualizations in SVG, for biomedical and scientific uses, as well as business, process monitoring, report generation and the like.

It's a little bit unusual in that it's a python-based procedural server-side tool, rather than a javascript solution such as D3. Nice-looking results can often be achieved in less time and with less code vs. the javascript-based choices, depending on what you're doing and how you prefer to code. You don't need javascript, CSS, DOM, or deep SVG knowledge to get reasonable results, and it can work nicely within frameworks such as Flask and Bootstrap.

There's plenty of control over legends, tooltips, colors, transparency, and many other appearance details. Numeric, categorical, and datetime datatypes are supported. There's some interactivity / reactivity capability, although certainly not to the degree that the javascript solutions offer. It's been tested on python 2.7 and 3.6.

Download / Install

To install with pip:
pip install svgdatashapes

Or if you prefer, you can just download directly and place into your python source directory:
svgdatashapes.py
svgdatashapes_dt.py (if you need date/time support)

Current version is svgdatashapes 0.3.6

How to use SVG graphics

SVGdatashapes renders its results in SVG. An SVG graphic is simply a block of xml code within an <svg> tag. All modern web browsers support viewing and printing of SVG graphics.

SVG works well for web-based data displays... it's vector-based and has full support for good fonts, text in any direction, transparency, as well as tooltip and hyperlink support. SVG can share CSS styling from the host web page and can use the full range of html special characters to get Greek letters, etc. (SVGdatashapes also supports <sup> and <sub> for superscripts and subscripts).

You can include a chunk of SVG code directly into your html (referred to as an "inline SVG"). Or, you can put the SVG in a separate file and reference it using an <img> tag. (We do it both ways on this web site.) *

There are some differences between "inline" and "<img>":

If you use the "inline" method your SVG can be influenced by the host web page's CSS, you can use tooltips, and you can use HTML special character constructs such as Δ . On the minus side, you'll have a big blob of SVG code within your HTML web page.

If you use the <img> method you can use <img> width= and height= to conveniently adjust the size, and the SVG objects are cacheable. However, tooltips and HTML special characters won't work correctly and your SVG won't have access to the host web page's CSS (although it's possible to embed CSS class and style definitions into an SVG).

What about capturing SVG for import into Powerpoint and similar? Currently, this requires converting SVG to PNG. It's a little convoluted but this can be done using PhantomJS.

* There are some additional ways to incorporate SVG into web pages that we won't discuss here, such as <iframe> or <object>

A 'Hello world' example Click to view code