SVGdatashapes

API       Examples       GitHub       MIT License

SVGdatashapes.py is a compact set of python functions for creating many types of plots and data displays in SVG for use in web pages. General purpose, useful in areas such as biomedical, scientific, business, process monitoring, report generation. Plenty of control over legends, tooltips, colors, transparency, and many other appearance details. It has no package dependencies, and can work nicely in frameworks such as Flask and Bootstrap. No javascript, CSS, DOM, or SVG knowledge is required.


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)
Compare vs. D3, plotly, numpy, ggplot
SVGdatashapes produces attractive results for many typical straightforward graphing / data display needs, as can be seen in the examples. The approach is procedural and the code is relatively simple and agile (click on examples to see code). It supports some basic 'reactive' things: tooltips, clickthru, hyperlinks, element hide/show with js. It does some basic stat / computational things: data ranges, frequency distributions, mean and SD, quartiles for boxplots.

Projects that require animations or high-end reactivity would need to use D3, Plotly, or similar; projects that require integrated statistics / computational ability should use something like Numpy or R + ggplot instead.

How to use SVG graphics

SVGdatahshapes 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 is a good format for web-based data displays and line art because 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 &Delta; . 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


Bar graphs, error bars

Line plots and curves

Dates and times

Scatterplots
Pie charts
Heatmaps

Please visit the SVGdatashapes github site for full info, API reference, and more examples.