Interactive graphics in the browser using Stata2D3 & Stata SVG - - PowerPoint PPT Presentation

▶
interactive graphics in the browser using stata2d3 stata
SMART_READER_LITE
LIVE PREVIEW

Interactive graphics in the browser using Stata2D3 & Stata SVG - - PowerPoint PPT Presentation

Jul 29, 2023 265 likes •402 views

BayesCamp Interactive graphics in the browser using Stata2D3 & Stata SVG graphs Robert Grant Tim P . Morris tim.morris@ucl.ac.uk BayesCamp MRC Clinical Trials Unit, robert@bayescamp.com University College London deja vu Yes, this

slide-1
SLIDE 1

Interactive graphics in the browser using Stata2D3 & Stata SVG graphs

Robert Grant BayesCamp robert@bayescamp.com

BayesCamp

Tim P . Morris tim.morris@ucl.ac.uk MRC Clinical Trials Unit, University College London

slide-2
SLIDE 2

deja vu

  • Yes, this appeared at 2014 Stata Users Group.
  • But now we can use Stata's SVG graph export.
slide-3
SLIDE 3

what does it do?

  • Take a standard graph command, plus interaction
  • Make the graph and export to SVG
  • Edit the SVG to identify objects such as markers as axes
  • Wrap the SVG code inside HTML, and add JavaScript to

do basic interaction

slide-4
SLIDE 4

example

sysuse auto, clear gen hoverfacts = strofreal(mpg) + " MPG, $" + strofreal(price) d3, htmlfile("d3_html_test.html") clickright(make) /// hovertip(hoverfacts) mgroups(foreign) replace: /// scatter price mpg, scheme(s1mono)

slide-5
SLIDE 5

example

slide-6
SLIDE 6

example

slide-7
SLIDE 7

example

slide-8
SLIDE 8

example

slide-9
SLIDE 9

example

slide-10
SLIDE 10

example

slide-11
SLIDE 11

principles

  • Keep the styling simple, so you can elaborate in CSS.
  • Keep interaction simple, so you can elaborate in JavaScript
  • "It's educational"
slide-12
SLIDE 12

work in progress

  • circles now, paths next
  • click -> text below or right
  • hover -> text below or right
  • hover -> tooltip
  • buttons to highlight groups of markers
  • you can contribute at github.com/robertgrant/stata2d3