SVGdatashapes examples:   Example 7

1f 2f 1m 2m 0 100 200 300 400 500 600 glucose [mg/dL] Outlier: 16 ID: nnnnnn Outlier: 21 ID: nnnnnn Outlier: 22 ID: nnnnnn Outlier: 25 ID: nnnnnn Outlier: 29 ID: nnnnnn Outlier: 32 ID: nnnnnn Outlier: 32 ID: nnnnnn Outlier: 33 ID: nnnnnn Outlier: 190 ID: nnnnnn Outlier: 206 ID: nnnnnn Outlier: 207 ID: nnnnnn Outlier: 216 ID: nnnnnn Outlier: 261 ID: nnnnnn Outlier: 349 ID: nnnnnn Outlier: 430 ID: nnnnnn Outlier: 495 ID: nnnnnn Outlier: 35 ID: nnnnnn Outlier: 47 ID: nnnnnn Outlier: 51 ID: nnnnnn Outlier: 51 ID: nnnnnn Outlier: 52 ID: nnnnnn Outlier: 52 ID: nnnnnn Outlier: 56 ID: nnnnnn Outlier: 59 ID: nnnnnn Outlier: 188 ID: nnnnnn Outlier: 189 ID: nnnnnn Outlier: 189 ID: nnnnnn Outlier: 190 ID: nnnnnn Outlier: 193 ID: nnnnnn Outlier: 223 ID: nnnnnn Outlier: 234 ID: nnnnnn Outlier: 260 ID: nnnnnn Outlier: 9 ID: nnnnnn Outlier: 15 ID: nnnnnn Outlier: 27 ID: nnnnnn Outlier: 28 ID: nnnnnn Outlier: 36 ID: nnnnnn Outlier: 38 ID: nnnnnn Outlier: 40 ID: nnnnnn Outlier: 41 ID: nnnnnn Outlier: 242 ID: nnnnnn Outlier: 254 ID: nnnnnn Outlier: 264 ID: nnnnnn Outlier: 282 ID: nnnnnn Outlier: 299 ID: nnnnnn Outlier: 313 ID: nnnnnn Outlier: 539 ID: nnnnnn Outlier: 556 ID: nnnnnn Outlier: 33 ID: nnnnnn Outlier: 36 ID: nnnnnn Outlier: 39 ID: nnnnnn Outlier: 41 ID: nnnnnn Outlier: 41 ID: nnnnnn Outlier: 49 ID: nnnnnn Outlier: 53 ID: nnnnnn Outlier: 58 ID: nnnnnn Outlier: 61 ID: nnnnnn Outlier: 197 ID: nnnnnn Outlier: 199 ID: nnnnnn Outlier: 199 ID: nnnnnn Outlier: 207 ID: nnnnnn Outlier: 234 ID: nnnnnn Outlier: 265 ID: nnnnnn Outlier: 293 ID: nnnnnn Outlier: 309 ID: nnnnnn Outlier: 525 ID: nnnnnn N = 162 N = 178 N = 167 N = 196

Hover over outlier datapoints for tooltips



This example loads sample data using sampledata2.py

# beeswarm and boxplot display; tooltips on outlier data points
# option: ylog .... if True use a log Y axis; otherwise use linear

import svgdatashapes as s
import sampledata2 

def example7( ylog=False ):


    # get several 1-D example arrays of numbers sorted on magnitude, and put them into a dict
    plotdata = {}
    plotdata['1f'] = sampledata2.vectors( 'set1' )   # eg. [ 33, 36, 39, 41, 41, 49,.. ]
    plotdata['2f'] = sampledata2.vectors( 'set2' )
    plotdata['1m'] = sampledata2.vectors( 'set3' )
    plotdata['2m'] = sampledata2.vectors( 'set4' )

    # set our text and line properties...
    textstyle = 'font-family: sans-serif; font-weight: bold;'
    s.settext( color='#777', style=textstyle )
    s.setline( color='#aaa' )

    # begin building our svg...
    s.svgbegin( width=550, height=350 )

    # set up X space (categorical)...
    s.xspace( svgrange=(100,500), catlist=[ '1f', '2f', '1m', '2m' ] )

    # find overall data range in Y (examine all 4 datasets) and set Y space
    for key in plotdata:
        for val in plotdata[key]:
            s.findrange( testval=val )
    yrange = s.findrange( finish=True )
    
    s.yspace( svgrange=(60,340), datarange=yrange, log=ylog )

    # render axes and plotting area
    s.xaxis( axisline=False, loc='min-8' )
    if ylog == False: s.yaxis( tics=8, loc='min-8', grid=True )
    else: s.yaxis( tics=8, loc='min-8', grid=True, inc=5, stubcull=20 )   
    s.plotdeco( ylabel='glucose [mg/dL]' )

    # compute percentiles and other summary info for each 1-D array
    info = {}
    for key in plotdata:
        info[key] = s.columninfo( datarows=s.vec2d( plotdata[key] ), column=0, percentiles=True )

    # render the beeswarms assisted by datapoints clustering
    s.setclustering( mode='left+right', tolerance=1.0 )
    diameter = 6; color = '#88c'; leftward = -8
    for key in plotdata:
        for val in plotdata[key]:
            if key in ['1f', '2f']: color = '#88c'
            else: color = '#db8'
            pctiles = info[key].percentiles
            if val < pctiles.p5 or val > pctiles.p95:   
                s.tooltip( 'Outlier: ' + str(val) + '    ID: nnnnnn' )    # tooltip for outliers 
            s.datapoint( x=key, y=val, diameter=diameter, color=color, xadjust=leftward )

    # render box plots and the 'N = nnn' annotation
    s.setline( color='#777' )
    s.settext( ptsize=8, color='#777', anchor='middle' )
    rightward = 8
    for key in plotdata:
        if key in ['1f', '2f']: color = '#ddf'
        else: color = '#fed'
        pctiles = info[key].percentiles
        s.errorbar( x=key, ymin=pctiles.p5, ymax=pctiles.p95, adjust=rightward )
        s.bar( x=key, ybase=pctiles.p25, y=pctiles.p75, width=16, outline=True, adjust=rightward, color=color )
        s.datapoint( x=key, y=pctiles.median, diameter=6, color='#777', xadjust=rightward )
        s.label( text='N = '+str(info[key].nvals), x=key, y=None, yadjust=20, anchor='middle' )   # display N = nnn

    # return the svg.  The caller could then add it in to the rendered HTML.
    return  s.svgresult()