Web-based Data Visualization with Rust and WebAssembly

by Yosuke Onoue

Slide 1

Slide 1 text

:PTVLF0OPVF !@MJLS 8FCCBTFE%BUB7JTVBMJ[BUJPO  XJUI3VTUBOE8FC"TTFNCMZ 3VTU5PLZP

Slide 2

Slide 2 text

"CPVU.F w ඌ্༸հ :PTVLF0OPVF w ೔ຊେֶจཧֶ෦৘ใՊֶՊ।ڭत  "TTPDJBUF1SPGFTTPS   %FQBSUNFOUPG*OGPSNBUJPO4DJFODF   $PMMFHFPG)VNBOJUJFTBOE4DJFODFT   /JIPO6OJWFSTJUZ w גࣜձࣾఇࠃσʔλόϯΫ٬һݚڀһ  7JTJUJOH3FTFBSDIFS   5FJLPLV%BUBCBOL -5% w *OUFSFTUT*OGPSNBUJPO7JTVBMJ[BUJPO 8FC5FDIOPMPHJFT IUUQTUXJUUFSDPN@MJLS 'PMMPX.F IUUQTWETMBCKQ

Slide 3

Slide 3 text

5PQJDT w 8IZEJE*DIPPTF3VTUBOE8FC"TTFNCMZGPS WJTVBMJ[BUJPOTUVEJFT w )PXUPEFWFMPQ8FC"TTFNCMZBQQMJDBUJPOXJUI3VTU w )PXXJMM8FC"TTFNCMZDIBOHF8FCQFSGPSNBODFJO GVUVSF

Slide 4

Slide 4 text

8FCCBTFE%BUB7JTVBMJ[BUJPO 3VTUBOE8FC"TTFNCMZ XBTNCJOEHFOBOEXBTNQBDL5JQT 4VNNBSZBOE'VUVSF1SPTQFDUT

Slide 5

Slide 5 text

8FCCBTFE%BUB7JTVBMJ[BUJPO 3VTUBOE8FC"TTFNCMZ XBTNCJOEHFOBOEXBTNQBDL5JQT 4VNNBSZBOE'VUVSF1SPTQFDUT

Slide 6

Slide 6 text

7JTVBMJ[BUJPO3FTFBSDI w %FWFMPQJOHOPWFMWJTVBMEFTJHOTBOEBMHPSJUINT w %FTJHOJOHVTFSJOUFSBDUJPOTGPSEBUBBOBMZTJT w %FWFMPQJOHWJTVBMJ[BUJPOBQQMJDBUJPOT w 6OEFSTUBOEJOHIVNBOQFSDFQUJPOPGEBUBWJTVBMJ[BUJPO w FUD

Slide 7

Slide 7 text

w %FWFMPQNFOUPG8FCCBTFE7JTVBM"OBMZUJDT4ZTUFNT .Z8PSL $BVTBM/FU &(SJE IUUQTFHSJEKQ 4&"-7 POHPJOHQSPKFDU

Slide 8

Slide 8 text

7JTVBM"OBMZUJDT 7" &SB w 4UBUJDWJTVBMJ[BUJPO JOBOBSSPXTFOTF w 4UBUJDBMMZXSJUFTJNBHFTPSWJEFPpMFT w 0GUFOUBLFTBMPOHUJNF

Slide 9

Slide 9 text

7JTVBM"OBMZUJDT 7" &SB w 4UBUJDWJTVBMJ[BUJPO JOBOBSSPXTFOTF w 4UBUJDBMMZXSJUFTJNBHFTPSWJEFPpMFT w 0GUFOUBLFTBMPOHUJNF w 7JTVBM"OBMZTJT w )VNBODFOUFSFE w 7JTVBMBOEJOUFSBDUJWFBOBMZUJDBMSFBTPOJOH w 8JEFSBOHFVTFSTGSPNOPOFYQFSUUPFYQFSU

Slide 10

Slide 10 text

8FCBTB7JTVBM"OBMZUJDT1MBUGPSN w 0QFO4UBOEBSE1MBUGPSN w 5FDIOJDBMTPVOEOFTTBOEDPPQFSBUJWFHSPXUI w 'BNJMJBS6*BOE69 w &BTZQBSUJDJQBUJPOPGOPOFYQFSUVTFST w &BTZUPTIBSFBOEQVCMJTI w "DUJWFDPMMBCPSBUJPOXJUICVTZEPNBJOFYQFSUT

Slide 11

Slide 11 text

3FRVJSFNFOUTGPS8FCCBTFE7" w 3FOEFSJOH1FSGPSNBODF w '14 NTQFSGSBNF w $PNQVUBUJPOBM1FSGPSNBODF w $PNQVUBUJPOBMMZFYQFOTJWFBMHPSJUINT  FH%JNFOTJPOBMSFEVDUJPO DPNQVUBUJPOBMHFPNFUSZ w 3FBMUJNFSFTQPOTFUPVTFSPQFSBUJPOT NT w #BDLHSPVOEFYFDVUJPOGPSMPOHSVOOJOHSPVUJOF

Slide 12

Slide 12 text

3FDFOU8PSL1IF(F/FU )/BUTVLBXB 4*TIJOP :0OPVF ,,ZPEB 40OBNJ BOE,,PZBNBEB l&YQMPSBUJWF7JTVBMJ[BUJPOGPS1IFOPUZQJD(FOPUZQJD /FUXPSL zJO*O1SPDPG*&&&7*4 1PTUFS 4VQQPSUFECZ+45$3&45(SBOU/VNCFS+1.+$3

Slide 13

Slide 13 text

)/BUTVLBXB 4*TIJOP :0OPVF ,,ZPEB 40OBNJ BOE,,PZBNBEB l&YQMPSBUJWF7JTVBMJ[BUJPOGPS1IFOPUZQJD(FOPUZQJD /FUXPSL zJO*O1SPDPG*&&&7*4 1PTUFS 4VQQPSUFECZ+45$3&45(SBOU/VNCFS+1.+$3 *NQMFNFOUBUJPOPG1IF(F/FU w 'SBNFXPSL7VFKT w 3FOEFSJOH8FC(- w /FUXPSL-BZPVU  3VTUBOE8FC"TTFNCMZ

Slide 14

Slide 14 text

8FCCBTFE%BUB7JTVBMJ[BUJPO 3VTUBOE8FC"TTFNCMZ XBTNCJOEHFOBOEXBTNQBDL5JQT 4VNNBSZBOE'VUVSF1SPTQFDUT

Slide 15

Slide 15 text

8FC"TTFNCMZ XBTN w #JOBSZGPSNBUMBOHVBHFSVOOJOHPOXFCCSPXTFST w 4NBMMTJ[FBOETIPSUMPBEJOHUJNF w $PNQJMFEGSPNWBSJPVTQSPHSBNNJOHMBOHVBHFT IUUQTXFCBTTFNCMZPSH

Slide 16

Slide 16 text

8IZ3VTUBOE8FC"TTFNCMZ w 3VTUJTXPOEFSGVM w -FTTPWFSIFBE w /BUJWFTVQQPSUGPSNVMUJUISFBEJOHBOE4*.% w 'JSTUDMBTTTVQQPSUGPS8FC"TTFNCMZ

Slide 17

Slide 17 text

8FC"TTFNCMZ4VQQPSUPG3VTU w XBTNVOLOPXOFNTDSJQUFO w 6TF&NTDSJQUFO w &NTDSJQUFOSVOUJNF w XBTNVOLOPXOVOLOPXO w -JHIUXFJHIU w /PSVOUJNF

Slide 18

Slide 18 text

8BZUP8SJUF"QQMJDBUJPOT w &NTDSJQUFO"1* w 6TJOH&NTDSJQUFO"1*WJB$''* w 8SJUJOHDEZMJC w %FWFMPQFSTTIPVMEXSJUF+BWB4DSJQUDPEF w XBTNCJOEHFO w .JOJNBMSVOUJNFBOE+BWB4DSJQUDPEFHFOFSBUJPO

Slide 19

Slide 19 text

XBTNCJOEHFO'FBUVSFT w *OUFSPQFSBCJMJUZXJUI+BWB4DSJQU w +BWB4DSJQUGSJFOEMZXSBQQFSHFOFSBUJPO w $BMMJOH+BWB4DSJQUGVODUJPOT w KTTZT w 3VTU+BWB4DSJQUUZQFDPOWFSTJPO w XFCTZT w $BMMJOHCSPXTFSGVODUJPOT

Slide 20

Slide 20 text

(FUUJOH4UBSUFEXJUIXBTNCJOEHFO w "UUSJCVUFT w SFBEPOMZ DPOTUSVDUPS   KT@OBNF HFUUFSTFUUFS FUD w &YQPSUJOHGVODUJPOTBOE DMBTTFTUP+BWB4DSJQU 1 use wasm_bindgen::prelude::*; 2 3 #[wasm_bindgen] 4 pub fn twice(x: f64) -> f64 { 5 2. * x 6 } 7 8 #[wasm_bindgen] 9 pub struct Counter { 10 #[wasm_bindgen(readonly)] 11 pub value: usize, 12 } 13 14 #[wasm_bindgen] 15 impl Counter { 16 #[wasm_bindgen(constructor)] 17 pub fn new() -> Counter { 18 Counter { value: 0 } 19 } 20 21 pub fn increment(&mut self) { 22 self.value += 1; 23 } 24 } 1 import { twice, Counter } from 'examples' 2 3 console.log(twice(1.23)) 4 5 const counter = new Counter() 6 console.log(counter.value) 7 counter.increment() 8 console.log(counter.value) *O+BWB4DSJQU

Slide 21

Slide 21 text

#VJMEBOE1VCMJTI w #VJMEXJUIXBTNQBDL w 1VCMJTIOQNQBDLBHFT w %FWFMPQBQQMJDBUJPOTXJUIXFCQBDL w 'JSTUDMBTTTVQQPSUGPS8FC"TTFNCMZ w DSFBUFXBTNBQQGPS+BWB4DSJQUCFHJOOFST  IUUQTHJUIVCDPNSVTUXBTNDSFBUFXBTNBQQ $ wasm-pack build $ wasm-pack publish

Slide 22

Slide 22 text

8FCCBTFE%BUB7JTVBMJ[BUJPO 3VTUBOE8FC"TTFNCMZ XBTNCJOEHFOBOEXBTNQBDL5JQT 4VNNBSZBOE'VUVSF1SPTQFDUT

Slide 23

Slide 23 text

&SSPS)BOEMJOH w &SSXJMMCFDPOWFSUFEBTB+BWB4DSJQUFYDFQUJPO 1 import { causeError } from 'examples' 2 3 causeError() *O+BWB4DSJQU 1 use wasm_bindgen::prelude::*; 2 3 #[wasm_bindgen(js_name=causeError)] 4 pub fn cause_error() -> Result<(), JsValue> { 5 Err("some error occured!".into()) 6 } *O3VTU

Slide 24

Slide 24 text

5FTUJOH w 5FTUBTOBUJWF3VTUDPEF DBOOPUUFTUXBTNTQFDJpDMPHJD w 3VOOJOHUFTUTPOCSPXTFSTVTJOHXBTNQBDL w )FBEMFTTTVQQPSU $ wasm-pack test --chrome 1 #![cfg(target_arch = "wasm32")] 2 3 extern crate wasm_bindgen_test; 4 use examples::*; 5 use wasm_bindgen_test::*; 6 7 wasm_bindgen_test_configure!(run_in_browser); 8 9 #[wasm_bindgen_test] 10 fn test_twice() { 11 assert_eq!(twice(1.), 2.); 12 }

Slide 25

Slide 25 text

8JUIPVUXFCQBDL w 8JUIPVUJNQPSUJOHXBTNpMF w 4VQQPSUFEUBSHFUT  CVOEMFS EFGBVMU OPEFKT XFC OPNPEVMFT w .BOVBMJOJUJBMJ[BUJPO w %FNPIUUQTDPEFQFOJPMJLSQFOP+1KX3 $ wasm-pack build --target web

Slide 26

Slide 26 text

$SPTTJOHUIF#PVOEBSZJT&YQFOTJWF 3VTU XBTN 8PSME +BWB4DSJQU8PSME DGIFUFSPHFOFPVTDPNQVUJOHMJLF(1(16 3VTU XBTN 8PSME +BWB4DSJQU8PSME )JHIPWFSIFBE

Slide 27

Slide 27 text

0UIFS/PUBCMF'FBUVSFT w 4FSJBMJ[BUJPOBOEEFTFSJBMJ[BUJPOPG+4PCKFDUTXJUI4FSEF w "TZODTVQQPSUVTJOHXBTNCJOEHFOGVUVSFT w 'VUVSFBOE1SPNJTFDPOWFSTJPO w &YUFOET+BWB4DSJQUDMBTTFT POHPJOH w &OBCMFUPXSJUF$VTUPN&MFNFOUTJO3VTU

Slide 28

Slide 28 text

8FCCBTFE%BUB7JTVBMJ[BUJPO 3VTUBOE8FC"TTFNCMZ XBTNCJOEHFOBOEXBTNQBDL5JQT 4VNNBSZBOE'VUVSF1SPTQFDUT

Slide 29

Slide 29 text

*T8FC"TTFNCMZ3FBMMZ'BTU w 8FMMUVOFE+BWB4DSJQUDPEFJTGBTUFOPVHI w *UEFQFOETPOBQQMJDBUJPO w -FTTPCKFDUDPOWFSTJPO w &⒏DJFODZPGNFNPSZBDDFTT w %J⒏DVMUUP TBGFMZ UVOF+BWB4DSJQU

Slide 30

Slide 30 text

1FBL1FSGPSNBODFPG$16 w $16'-014 qPBUJOHPQFSBUJPOTQFSTFDPOET   4JOHMFDPSF'-014ºOVNCFSPGDPSFT w 4JOHMFDPSF'-0144*.%XJEUIº$MPDLSBUF  WFSZSPVHIEJTDVTTJPO w +BWB4DSJQUVTFTPOMZBQBSUPG$16QPXFS  ‎8FC"TTFNCMZJTBLFZUFDIOPMPHZ  ɹUPFYDFFEUIFMJNJUPG8FCBQQT

Slide 31

Slide 31 text

'VUVSF4QFDGPS1BSBMMFM$PNQVUBUJPO w 5ISFBET w 1UISFBETMJLF w 4IBSFENFNPSZ w "UPNJDPQFSBUJPOT w 'JYFEXJEUIBOE-POH4*.% w 'JYFEXJEUI4*.%CJU4*.%PQFSBUJPOT w -POH4*.%CJU4*.%PQFSBUJPOT

Slide 32

Slide 32 text

8IZ8FC1FSGPSNBODFJT*NQPSUBOU 1FSGPSNBODF3FRVJSFNFOUT "⒎FDUFE6TFST 8IBUZPVDBOEP POOBUJWFBOEEFTLUPQBQQT )BSEXBSF*NQSPWFNFOUTBOE 5IFPSFUJDBM#SFBLUISPVHIT

Slide 33

Slide 33 text

8IZ8FC1FSGPSNBODFJT*NQPSUBOU 1FSGPSNBODF3FRVJSFNFOUT "⒎FDUFE6TFST 8IBUZPVDBOEP POOBUJWFBOEEFTLUPQBQQT )BSEXBSF*NQSPWFNFOUTBOE 5IFPSFUJDBM#SFBLUISPVHIT 8IBUZPVDBOEP  POUIF8FC

Slide 34

Slide 34 text

8IZ8FC1FSGPSNBODFJT*NQPSUBOU 1FSGPSNBODF3FRVJSFNFOUT "⒎FDUFE6TFST 8IBUZPVDBOEP POOBUJWFBOEEFTLUPQBQQT )BSEXBSF*NQSPWFNFOUTBOE 5IFPSFUJDBM#SFBLUISPVHIT 8IBUZPVDBOEP  POUIF8FC ".1 18"

Slide 35

Slide 35 text

8IZ8FC1FSGPSNBODFJT*NQPSUBOU 1FSGPSNBODF3FRVJSFNFOUT "⒎FDUFE6TFST 8IBUZPVDBOEP POOBUJWFBOEEFTLUPQBQQT )BSEXBSF*NQSPWFNFOUTBOE 5IFPSFUJDBM#SFBLUISPVHIT 8IBUZPVDBOEP  POUIF8FC -B[Z-PBEJOH 0⒎UIFNBJOUISFBE ".1 18"

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

4VNNBSZ w 8FC"TTFNCMZJTVTFGVMGPSTQFFEVQPGDPNQVUBUJPOBMMZ FYQFOTJWFQSPDFTTFTPOUIFpFMEPGXFCCBTFE WJTVBMJ[BUJPO w 3VTUJTBTVJUBCMFDIPJDFUPEFWFMPQ8FC"TTFNCMZ BQQMJDBUJPOT w XBTNQBDLJTBOFBTZXBZUPTUBSUSVTUXBTN w 1MFBTFDIFDLP⒏DJBMEPDT  IUUQTSVTUXBTNHJUIVCJPEPDTCPPL w -FUTUSZBOEFOKPZ3VTUBOE8FC"TTFNCMZ