Porting D3JS to kotlin multiplaform Gatan Zoritchak Pierre Mariac - - PowerPoint PPT Presentation

▶
porting d3js to kotlin multiplaform
SMART_READER_LITE
LIVE PREVIEW

Porting D3JS to kotlin multiplaform Gatan Zoritchak Pierre Mariac - - PowerPoint PPT Presentation

Jun 20, 2023 33 likes •629 views

KotlinConf_2018 Porting D3JS to kotlin multiplaform Gatan Zoritchak Pierre Mariac @gz_k @imtam5 KotlinConf_2018 The idea 2 The idea KotlinConf_2018 D3.js shape force data2viz JS JFx Android isomorphic, open source 3

slide-1
SLIDE 1

KotlinConf_2018

Porting D3JS to kotlin multiplaform

@imtam5 Pierre Mariac @gz_k Gaëtan Zoritchak

slide-2
SLIDE 2

KotlinConf_2018 2

The idea

slide-3
SLIDE 3

KotlinConf_2018

The idea

3

D3.js force shape … data2viz JS JFx Android isomorphic, open source

slide-4
SLIDE 4

KotlinConf_2018

The idea

4

platform code JS Android API Implementation common code interpolate timer JFx

slide-5
SLIDE 5

KotlinConf_2018 5

What is a dataviz library?

slide-6
SLIDE 6
slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9
slide-10
SLIDE 10

KotlinConf_2018

zoom transition drag dispatch brush interpolate ease timer time-format time format array selection collection random voronoi quadtree geo hierarchy force chord contour axis scale-chromatic scale polygon shape path color zoom transition drag dispatch brush interpolate ease timer time-format time format array selection collection random voronoi quadtree geo hierarchy force chord contour axis scale-chromatic scale polygon shape path color

Kotlin
 standard
 library

10

zoom transition drag dispatch brush

slide-11
SLIDE 11

KotlinConf_2018 11

How can Kotlin improve D3 API ?

slide-12
SLIDE 12

KotlinConf_2018

Better code structure

12

viz { temperatures.forEach { group { circle { x = 10.0 radius = radiusScale(it.celsius) style.fill = 0xFFAA00.color } } } } d3.select("#viz") .selectAll("g") .data(temperatures) .enter().append("g") .append("circle") .attr("cx", 10) .attr("r", function(d) { return radiusScale(d.celsius); }) .attr("style", "fill: #FFAA00;")

slide-13
SLIDE 13

KotlinConf_2018

Type everything

13

viz { temperatures.forEach { group { circle { x = 10.0 radius = radiusScale(it.celsius) style.fill = 0xFFAA00.color } } } } d3.select("#viz") .selectAll("g") .data(temperatures) .enter().append("g") .append("circle") .attr("cx", 10) .attr("r", function(d) { return radiusScale(d.celsius); }) .attr("style", "fill: #FFAA00;")

slide-14
SLIDE 14

KotlinConf_2018

DSLs

14

viz { temperatures.forEachIndexed { index, temp -> group { transform { translate(.0, yScale(index)) } circle { x = 10.0 radius = radiusScale(temp.celsius) style.fill = 0xFFAA00.color } } } } d3.select("#viz") .selectAll("g") .data(temperatures) .enter().append("g") .attr("transform", function(d, i) { return "translate(0," + yScale(i) + ")"; }) .append("circle") .attr("cx", 10) .attr("r", function(d) { return radiusScale(d.celsius); }) .attr("style", "fill: #FFAA00;")

slide-15
SLIDE 15

KotlinConf_2018

Bootstrapping

15

fun main(args: Array<String>) { viz { temperatures.forEachIndexed { index, temp -> group { transform { translate(.0, yScale(index)) } circle { x = 10.0 radius = radiusScale(temp.celsius) style.fill = 0xFFAA00.color } } } } }

slide-16
SLIDE 16

KotlinConf_2018

Bootstrapping

16

Pure common code
 available on any platform

fun main(args: Array<String>) { viz { temperatures.forEachIndexed { index, temp -> group { transform { translate(.0, yScale(index)) } circle { x = 10.0 radius = radiusScale(temp.celsius) style.fill = 0xFFAA00.color } } } } }

slide-17
SLIDE 17

KotlinConf_2018

Bootstrapping

17

This extension function is

  • nly available on the

Javascript platform Pure common code
 available on any platform

fun main(args: Array<String>) { viz { temperatures.forEachIndexed { index, temp -> group { transform { translate(.0, yScale(index)) } circle { x = 10.0 radius = radiusScale(temp.celsius) style.fill = 0xFFAA00.color } } } }.bindRendererOn("myCanvas") }

slide-18
SLIDE 18

KotlinConf_2018 18

Multiplatform Development

Architecture

slide-19
SLIDE 19

KotlinConf_2018

Architecture

19

D3JS DOM

document.createElement(“circle”) setAttribute(“r”,50) select(“#viz“) .append(“circle“) .attr(“r“, 50);

slide-20
SLIDE 20

KotlinConf_2018

Architecture

20

Circle CircleDOM DOM

setAttribute(“r“, 50)

Common Platform

radius = 50.0 data2viz data2viz

slide-21
SLIDE 21

KotlinConf_2018

Architecture

21

CircleJFx Circle

setRadius(50f)

CircleDOM DOM JS JFx

setAttribute(“r“, 50)

Platform Common Circle

data2viz data2viz radius = 50.0

slide-22
SLIDE 22

KotlinConf_2018

Architecture

22

CircleJFx Circle CircleDOM DOM JS JFx

state

Platform Common Circle

data2viz data2viz

slide-23
SLIDE 23

KotlinConf_2018

Architecture

23

CircleJFx Circle CircleDOM DOM

android ?

JS JFx

state

Platform Common Circle

data2viz data2viz

slide-24
SLIDE 24

KotlinConf_2018

Architecture

24

CircleJFx Circle CircleDOM DOM CircleSVG Canvas JS JFx Android

state

Platform Common Circle

data2viz data2viz

slide-25
SLIDE 25

KotlinConf_2018

Architecture

25

CircleJFx Circle CircleDOM DOM CircleSVG Canvas

state

JS JFx Android

state

Platform Common Circle

data2viz data2viz

slide-26
SLIDE 26

KotlinConf_2018

Architecture

26

CircleJFx Circle CircleDOM DOM CircleSVG Canvas

state

JFx Renderer Android Renderer JS Renderer Canvas Canvas JS JFx Android Platform Common Circle

data2viz data2viz

slide-27
SLIDE 27

KotlinConf_2018

Architecture

27

Viz Layer Common Platform JFx Renderer Android Renderer JS Renderer Group Circle Rect Path Text

data2viz data2viz

v 0.7

slide-28
SLIDE 28

KotlinConf_2018 28

Multiplatform Development

Aligning platform APIs

slide-29
SLIDE 29

KotlinConf_2018 29

Y X Aligning platform APIs

slide-30
SLIDE 30

KotlinConf_2018 30

Aligning platform APIs

slide-31
SLIDE 31

KotlinConf_2018 31

Aligning platform APIs

slide-32
SLIDE 32

KotlinConf_2018 32

JFx

degrees counterclockwise Y 45° X Aligning platform APIs

slide-33
SLIDE 33

KotlinConf_2018

Android JFx JS

33

Aligning platform APIs

slide-34
SLIDE 34

KotlinConf_2018

Android JFx JS

context.arc(
 x,
 y,
 r,
 startAngle,
 endAngle,
 counterclockwise);

34

Aligning platform APIs ∏ — 4 ∏ — 6

slide-35
SLIDE 35

KotlinConf_2018

Android JFx

gc.arc(
 x,
 y,
 rx,
 ry,
 startAngle,
 sweepAngle)

JS

context.arc(
 x,
 y,
 r,
 startAngle,
 endAngle,
 counterclockwise);

35

Aligning platform APIs ∏ — 4 ∏ — 6

  • 45°

85°

slide-36
SLIDE 36

KotlinConf_2018

Android

gc.arcTo(
 rectF,
 startAngle,
 sweepAngle)

JFx

gc.arc(
 x,
 y,
 rx,
 ry,
 startAngle,
 sweepAngle)

JS

context.arc(
 x,
 y,
 r,
 startAngle,
 endAngle,
 counterclockwise);

36

Aligning platform APIs

  • 45°

∏ — 4 ∏ — 6

  • 85°

45°

  • 85°
slide-37
SLIDE 37

KotlinConf_2018

Aligning platform APIs

37

slide-38
SLIDE 38

KotlinConf_2018 38

Multiplatform Development

Testing

slide-39
SLIDE 39

KotlinConf_2018

Multiplatform tests

39

— common code

slide-40
SLIDE 40

KotlinConf_2018

Multiplatform tests

40

— common code — specific platform code

slide-41
SLIDE 41

KotlinConf_2018

Multiplatform tests

41

Viz image image image JsRenderer JFxRenderer AndroidRenderer

slide-42
SLIDE 42

KotlinConf_2018

Multiplatform tests JS

42

Gradle puppeteer

rendering.html launch select screenshot

rendering.png Viz JsRenderer Canvas

slide-43
SLIDE 43

KotlinConf_2018

Multiplatform tests JFx

43

Gradle rendering.png

JUnitTest snapshot()

Viz JfxRenderer Canvas

slide-44
SLIDE 44

KotlinConf_2018

Multiplatform tests Android

44

Gradle rendering.png

adb pull adb instrument

Viz JfxRenderer Canvas

emulator

rendering.png

slide-45
SLIDE 45

KotlinConf_2018

Multiplatform tests

45

JsRenderer JFxRenderer AndroidRenderer

slide-46
SLIDE 46

KotlinConf_2018

Multiplatform tests

46

slide-47
SLIDE 47

Current status

slide-48
SLIDE 48

KotlinConf_2018

Current status

48

Some statistics

— 14k lines of code — 12k lines of tests — more than 95% of common code

slide-49
SLIDE 49

KotlinConf_2018 49

data2viz V 0.7

— android support — new design with renderers for JS and JFx — 90% of D3 features now available

Current status

slide-50
SLIDE 50

KotlinConf_2018 50

Version v0.8

— events API — more text features (fonts, multiline, …) — tutorials with online editable examples

Roadmap Idea Plugins data2viz-start: bootstrapping

slide-51
SLIDE 51

KotlinConf_2018 51

charts.kt

slide-52
SLIDE 52

charts.kt

KotlinConf_2018 52

slide-53
SLIDE 53

KotlinConf_2018 53

charts.kt

slide-54
SLIDE 54

54 KotlinConf_2018

charts.kt

slide-55
SLIDE 55

55 KotlinConf_2018

charts.kt

slide-56
SLIDE 56

KotlinConf_2018

charts.kt - android demo

56

slide-57
SLIDE 57

charts.kt - early access program

57 KotlinConf_2018

slide-58
SLIDE 58

charts.kt - early access program

58 KotlinConf_2018

slide-59
SLIDE 59

KotlinConf_2018

Thank you!

@imtam5 Pierre Mariac @gz_k Gaëtan Zoritchak data2viz.io charts-kt.io @data2viz_io data2viz data2viz/data2viz Github