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

KotlinConf_2018 Porting D3JS to kotlin multiplaform Gaëtan 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

The idea KotlinConf_2018 platform code JS JFx Android timer common code interpolate API Implementation � 4

KotlinConf_2018 What is a dataviz library? � 5

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

KotlinConf_2018 How can Kotlin improve D3 API ? � 11

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

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

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

Bootstrapping KotlinConf_2018 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 } } } } } � 15

Bootstrapping KotlinConf_2018 fun main(args: Array<String>) { Pure common code 
 viz { available on any platform temperatures.forEachIndexed { index, temp -> group { transform { translate(.0, yScale(index)) } circle { x = 10.0 radius = radiusScale(temp. celsius ) style . fill = 0xFFAA00.color } } } } } � 16

Bootstrapping KotlinConf_2018 fun main(args: Array<String>) { Pure common code 
 viz { available on any platform temperatures.forEachIndexed { index, temp -> group { transform { translate(.0, yScale(index)) } circle { x = 10.0 radius = radiusScale(temp. celsius ) style . fill = 0xFFAA00.color } } } } .bindRendererOn( "myCanvas" ) This extension function is } only available on the Javascript platform � 17

KotlinConf_2018 Multiplatform Development Architecture � 18

Architecture KotlinConf_2018 D3JS DOM select(“#viz“) document.createElement(“circle”) .append(“circle“) setAttribute(“r”,50) .attr(“r“, 50); � 19

Architecture KotlinConf_2018 data2viz data2viz Common Platform radius = 50.0 setAttribute(“r“, 50) Circle CircleDOM DOM � 20

Architecture KotlinConf_2018 data2viz data2viz Common Platform radius = 50.0 setAttribute(“r“, 50) Circle CircleDOM DOM JS CircleJFx Circle JFx setRadius(50f) � 21

Architecture KotlinConf_2018 data2viz data2viz Common Platform state Circle CircleDOM DOM JS CircleJFx Circle JFx � 22

Architecture KotlinConf_2018 data2viz data2viz Common Platform state Circle CircleDOM DOM JS CircleJFx Circle JFx android ? � 23

Architecture KotlinConf_2018 data2viz data2viz Common Platform state Circle CircleDOM DOM JS CircleJFx Circle JFx Android CircleSVG Canvas � 24

Architecture KotlinConf_2018 data2viz data2viz Common Platform state Circle CircleDOM DOM JS CircleJFx Circle JFx Android CircleSVG Canvas state � 25

Architecture KotlinConf_2018 data2viz data2viz Common Platform JS Renderer Canvas Circle CircleDOM DOM JS JFx Renderer Canvas CircleJFx Circle JFx Android Renderer Android CircleSVG Canvas state � 26

Architecture KotlinConf_2018 data2viz data2viz Common Platform Viz Layer JS Renderer Group JFx Renderer v 0.7 Circle Android Renderer Rect Path Text � 27

KotlinConf_2018 Multiplatform Development Aligning platform APIs � 28

Aligning platform APIs KotlinConf_2018 X Y � 29

Aligning platform APIs KotlinConf_2018 � 30

Aligning platform APIs KotlinConf_2018 � 31

Aligning platform APIs KotlinConf_2018 45° X Y JFx degrees counterclockwise � 32

Aligning platform APIs KotlinConf_2018 JS Android JFx � 33

Aligning platform APIs KotlinConf_2018 ∏ - — 6 ∏ — 4 JS Android JFx context.arc( 
 x, 
 y, 
 r, 
 startAngle, 
 endAngle, 
 counterclockwise); � 34

Aligning platform APIs KotlinConf_2018 ∏ - — 6 85° ∏ -45° — 4 JS Android JFx gc.arc( 
 context.arc( 
 x, 
 x, 
 y, 
 y, 
 rx, 
 r, 
 ry, 
 startAngle, 
 startAngle, 
 endAngle, 
 sweepAngle) counterclockwise); � 35

Aligning platform APIs KotlinConf_2018 ∏ - — 6 85° -85° ∏ -45° 45° — 4 JS Android JFx gc.arcTo( 
 gc.arc( 
 context.arc( 
 rectF, 
 x, 
 x, 
 startAngle, 
 y, 
 y, 
 sweepAngle) rx, 
 r, 
 ry, 
 startAngle, 
 startAngle, 
 endAngle, 
 sweepAngle) counterclockwise); � 36

Aligning platform APIs KotlinConf_2018 � 37

KotlinConf_2018 Multiplatform Development Testing � 38

Multiplatform tests KotlinConf_2018 — common code � 39

Multiplatform tests KotlinConf_2018 — common code — specific platform code � 40

Multiplatform tests KotlinConf_2018 JsRenderer image image Viz JFxRenderer image AndroidRenderer � 41

Multiplatform tests JS KotlinConf_2018 rendering.html launch Gradle puppeteer Viz JsRenderer select Canvas screenshot rendering.png � 42

Multiplatform tests JFx KotlinConf_2018 JUnitTest Gradle Viz JfxRenderer Canvas snapshot() rendering.png � 43

Multiplatform tests Android KotlinConf_2018 emulator adb instrument Gradle Viz JfxRenderer Canvas adb pull rendering.png rendering.png � 44

Multiplatform tests KotlinConf_2018 JsRenderer JFxRenderer AndroidRenderer � 45

Multiplatform tests KotlinConf_2018 � 46

Current status

Current status KotlinConf_2018 Some statistics — 14k lines of code — 12k lines of tests — more than 95% of common code � 48

Current status KotlinConf_2018 data2viz V 0.7 — android support — new design with renderers for JS and JFx — 90% of D3 features now available � 49

Roadmap KotlinConf_2018 Version v0.8 — events API — more text features (fonts, multiline, …) — tutorials with online editable examples Idea Plugins � 50 data2viz-start: bootstrapping

KotlinConf_2018 charts.kt � 51

charts.kt KotlinConf_2018 � 52

charts.kt KotlinConf_2018 � 53

charts.kt KotlinConf_2018 � 54

charts.kt KotlinConf_2018 � 55

charts.kt - android demo KotlinConf_2018 � 56

charts.kt - early access program KotlinConf_2018 � 57

charts.kt - early access program KotlinConf_2018 � 58

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