Manipulation of SVG graphs with Stata Tim Morris , MRC Clinical - - PowerPoint PPT Presentation

▶
manipulation of svg graphs with
SMART_READER_LITE
LIVE PREVIEW

Manipulation of SVG graphs with Stata Tim Morris , MRC Clinical - - PowerPoint PPT Presentation

Jul 02, 2023 403 likes •906 views

Manipulation of SVG graphs with Stata Tim Morris , MRC Clinical Trials Unit at UCL Robert Grant , BayesCamp 16 Nov 2017 Best feature in Stata 14? On upgrading Stata, one of the things I do first is to change bits with graph set . For example: .

slide-1
SLIDE 1

Manipulation of SVG graphs with Stata

Tim Morris, MRC Clinical Trials Unit at UCL Robert Grant, BayesCamp 16 Nov 2017

slide-2
SLIDE 2

Best feature in Stata 14?

On upgrading Stata, one of the things I do first is to change bits with graph set. For example: . graph set print logo off With version 14, I submitted graph set and spotted something unfamiliar…

slide-3
SLIDE 3
slide-4
SLIDE 4

Best feature in Stata 14?

slide-5
SLIDE 5

Creating an SVG file

. sysuse auto . twoway scatter price length [pw=weight] . graph export mygraph.svg, replace

slide-6
SLIDE 6

Result (using mrc graph scheme)

5,000 10,000 15,000 Price 140 160 180 200 220 240 Length (in.)

slide-7
SLIDE 7

What is SVG?

Scalable So Vector Very Graphics Good

slide-8
SLIDE 8

Raster graphics (23kb .png)

slide-9
SLIDE 9

Vector graphics (10kb .svg)

slide-10
SLIDE 10

Read it

slide-11
SLIDE 11

Read it

slide-12
SLIDE 12

Edit it

Let’s take a look at the file we created: auto.svg

slide-13
SLIDE 13
slide-14
SLIDE 14

Edit it (from)

slide-15
SLIDE 15

Edit it (to)

slide-16
SLIDE 16
slide-17
SLIDE 17
slide-18
SLIDE 18

Edit it

You don’t have to edit the text as I showed You can edit using software like Inkscape or Illustrator

slide-19
SLIDE 19

Manipulating SVG: principle

  • Produce an SVG file with Stata (14+)
  • Open it up and edit to make it even better
  • Receive praise and accolades from peers
slide-20
SLIDE 20

What can I manipulate?

A lot, actually:

  • Add transparency to graph elements (ooh)
  • Embed images behind your graph (aah)
  • Create shapes Stata doesn’t allow (phwoar)
  • Introduce interactive elements
slide-21
SLIDE 21

Why use Stata at all?

Stata creates great SVG files. They are well

  • rganised (consistent order) and small.

See: SVG from stats software: the good, the bad and the ugly goo.gl/q6no1L

slide-22
SLIDE 22
slide-23
SLIDE 23
  • paque

adjective not able to be seen through; not transparent.

translucent

adjective (of a substance) allowing light, but not detailed shapes, to pass through; semi-transparent.

‘Opacity’

slide-24
SLIDE 24

Translucency

  • Add to the style of objects
  • E.g stroke-opacity or fill-opacity
  • All done
slide-25
SLIDE 25

Translucency

  • As of Stata 15, you can do this within Stata.
slide-26
SLIDE 26

Translucency in action (1)

slide-27
SLIDE 27

Translucency in action (2)

slide-28
SLIDE 28

Add gradient to background

slide-29
SLIDE 29

Add gradient to background

slide-30
SLIDE 30

Embed an image/images

  • Hexagons are cool right now.
  • Putting a picture in a hexagon makes the

picture cooler by association.

slide-31
SLIDE 31

Embed an image/images

  • Take an SVG file
  • Include a line referring to image:

<image href=“tim.jpg” … />

  • Include more such lines if you want
  • The image can be JPG, PNG, another SVG…

probably GIF and more

slide-32
SLIDE 32

tim.jpg

slide-33
SLIDE 33

tim.jpg in an SVG hexagon

slide-34
SLIDE 34

tim.jpg in an SVG hexagon

in same directory as the hexagon .svg file.

slide-35
SLIDE 35

Hexagonal binning

  • A ‘hexbin’ plot is a sort of bivariate histogram
  • Hexagons form a regular tessellating grid (and

look better than triangles/rectangles)

  • Number of points covered by each hexagon is

counted

  • Hexagon coloured/sized by count
slide-36
SLIDE 36
slide-37
SLIDE 37

Hexbin using Stata

Here, we are producing a plot that Stata does not

  • Set up a grid of hexagons in Stata and count

the number of points in each hexagon’s territory

  • Output a scatterplot with points on the grid
  • Define a hexagon in SVG and replace each

point output by Stata

slide-38
SLIDE 38

xkcd.com/1050/

To do hexagon counting, we will use some high-school algebra

slide-39
SLIDE 39

Hexbin

30° 60° 60° 1 2 ½ √3 √3/2

slide-40
SLIDE 40

Bivariate normal

slide-41
SLIDE 41

Better with translucency…

slide-42
SLIDE 42

Stata’s grid of hex centres

slide-43
SLIDE 43

Hexagons from SVG

slide-44
SLIDE 44

Waffle charts (similar concept)

slide-45
SLIDE 45

Maps

We now have the tools to produce hexbin maps

  • Create hexbin using latitude and longitude
  • Find (or draw) a map and embed as an image

behind your hexbin

  • Ensure they line up. This is hard:

– Start with a scatterplot with a few key points and check that you can make these line up with map – Produce hexbin with same axis ranges, xsize, ysize, aspect etc.

slide-46
SLIDE 46

Interactivity

  • Add basic HTML before & after the SVG
  • Now you have a web page
  • Connect objects to controls like sliders, buttons,
  • etc. with JavaScript
slide-47
SLIDE 47
slide-48
SLIDE 48

Much more is possible!

See:

  • Nadieh Bremer’s magic

https://www.visualcinnamon.com/2016/04/svg- beyond-mere-shapes.html

  • Sarah Drasner’s animations

What are your ideas?

slide-49
SLIDE 49

Thanks for listening