[CentralOH] Python Graph Help

Fri Mar 2 01:46:09 EST 2018

I have some thoughts just finishing a charting task at work with D3 after
munging a lot of data with Python and making .json files to drive it.

I think you're going to have to bite the bullet and do this from scratch
unless you can find some kind of other packaged visualization that is to
your liking that isn't quite exactly this from some high level charting
program out there like Bokeh, matplotlib, etc. You're going to be in the
world of drawing rectangles, polygons, and cursing the world of
typesetting. I'd specifically watch out for something like Plotly as they
are sort of unethical in my opinion by making their open source products
tie in heavily with their online product offerings. The latest notebook
style thing from the D3 people is sort of in this SaaS lock-in realm too,
IMHO.

--- 1. What is your target? Print? Web? Static or Animated?

For print I'd recommend things like tikz or R's ggplot ... and I'd also
recommend a format like postscript / pdf or svg. Of course animations are
out unless you're making a flip book, or rasterizing your SVGs or something
into JPGs and then encoding with ffmpeg.

For web, I'd recommend D3. It has a nifty data binding concept that is
slick if not exactly well thought out from a traditional JS developer
viewpoint, and a whole lot of neat things that make interpolation and such
easier.

For video, I'd recommend any of the above or even things like Processing,
GL Shaders, Blender, moviepy, or a game framework, or a compositing tool.

--- 2. Planning

Looking at the sample graph there's a lot of things that I'm sure you can
find in Python a way to come up with:
- Triangle shape and location
- Main bar location
- Dividing the bar up into red / green areas
- Scale
- Tick marks
- Labeling of axis
- Text placement

Text is probably the hardest. HTML has a lot of nice wrapping,
justification, etc and SVG does not (natively) and neither do a lot of
other things. LaTeX is of course the "best" if you have postscript / pdf in
the mix and what really nifty things like automatic typographic ligatures
like where like the TH pairs are done as a single glyph. Or math formula
rendering, although MathJax will do that on the web for ya.

--- 3. Transforms

Things like Processing like to drive home the idea of transforms. In short,
you begin in space at 0,0 for 2D or 0,0,0 for 3D ... some start at bottom
left, some at top left. You have your area like width x height x depth,
plus perhaps some concept of resolution in a raster context. For print 600
or 1200 or whatever is nice DPI but screen is usually 90, but in the mobile
world these days it is all LPS and here be dragons.

If you always do everything from 0,0 or center things around 0,0 then you
can "transform" the whole block of stuff to whatever location in arbitrary
groups. For SVG this is the "g" object... in Processing these are the
"pushMatrix" and "translate".

In 3d, 0,0,0 is "world center" usually, and in print and computer screen,
0,0 is again like top left usually, although I think Inkscape is bottom
left.

--- 4. Interpolation

You could manually place everything in X,Y coordinates but let's take the
tick marks for instance... you really are creating interpolation functions
for all of these things so the Y of the tick marks is something like in
python like range(0,100,10) for a tick mark every 10 steps.

You may consider the "width" and "height" as constants and always be doing
things in relation to those such as center being width/2 and height/2 or
the rule of thirds /3 ...

Of course all of those things can be thought of in an object oriented way
if each thing is only concerned about its local 0,0 when doing stuff
specifically to its function's task, and then you can assemble all those
functions by translating them to their relative locations within the
greater document canvas.

--- 5. Python tips

I've used PySVG... I also looked at "svgwrite" just now and it seems pretty
good. For rather I've done a lot with pycairo ...

SVG is just XML so you could also just sort of string concatenate your way
to success.

Another thought would be to mock up what you want with Inkscape, and use
its "simple svg" output format to create a template you can then manipulate
with ElementTree.

For D3 everything works better IMHO with a nice JSON object to throw at it.
Doing a lot of calculation of coordinates in Python of various data points
where you're more comfortable, and then hacking up some basic examples of
the drawing features of D3 was a template I used with this last project.

.......

So, best of luck, that's about it for some random ramblings on the subject.
In short, If this is for a website and animated, maybe using PyCairo stills
into FFMPEG to make GIFs or use D3 and use SVG and JavaScript. In just for
the website and static, use PySVG, svgwrite, or pycairo.

If you can find something that will get the point across, it will save a
lot of time "drawing" everything to just throw your data at a packaged
visualization tool.

Best of luck,

Thomas

On Thu, Mar 1, 2018 at 10:45 PM, mrehner <mrehner at e-wrench.net> wrote:

> Eric,
>
>
>
> Can't really help on the implementation level. It looks like what you have
> is a 'box plot' or a 'facet grid'.  You can add the triangle with an
> 'annotation', probably as a subplot. Seaborn has al built in function
> 'factorplot' that supposedly simplifies making these kind of plots.
> Unfortunately I don't have any experience in making these kind of plots,
>  only  a book in which I'm trying to learn about data analytics. All I have
> may be some techincal terms that may or may not help your search.
>
>
>
> Cheers,
>
>
>
> Mike
>
>
>
> *From:* CentralOH [mailto:centraloh-bounces+mrehner=e-wrench.net at python.
> org] *On Behalf Of *Eric Floehr
> *Sent:* Thursday, March 1, 2018 5:45 PM
> *To:* Central Ohio Python Users Group
> *Subject:* [CentralOH] Python Graph Help
>
>
>
> All,
>
>
>
> I'm trying to determine which python graphing library would be able to
> make the following graph type. I don't have a name for it, but here is the
> description...
>
>
>
> It's basically a vertical or horizontal line on some scale, with shaded
> rectangles over parts of it indicating certain things, and a triangle with
> a specific number pointing to that spot on the line.
>
>
>
> The closest example is the original Star Trek sick bay charts, and I found
> an example here:
>
>
>
> https://blogs.sas.com/content/sastraining/files/2017/06/
> startrek_med_dashboard_tips.gif
>
>
>
> Any thoughts?
>
>
> Thanks so much!
>
> Eric
>
>
>
> _______________________________________________
> CentralOH mailing list
> CentralOH at python.org
> https://mail.python.org/mailman/listinfo/centraloh
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.python.org/pipermail/centraloh/attachments/20180302/7b6abc24/attachment-0001.html>