Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic...

KotlinConf_2018

Porting D3JS to kotlin multiplaform

@imtam5Pierre Mariac

@gz_kGaëtan Zoritchak

KotlinConf_2018

�2

The idea

KotlinConf_2018The idea

�3

D3.jsforceshape …

data2vizJS JFx Android

isomorphic, open source

KotlinConf_2018The idea

�4

platform code

JS Android

API

Implementation

common codeinterpolate

timer

JFx

KotlinConf_2018

�5

What is a dataviz library?

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

Kotlinstandard

library

�10

zoom

transition

drag

dispatch

brush

KotlinConf_2018

�11

How can Kotlin improve D3 API ?

KotlinConf_2018Better 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;")

KotlinConf_2018Type 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;")

KotlinConf_2018DSLs

�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;")

KotlinConf_2018Bootstrapping

�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 } } } } }

KotlinConf_2018Bootstrapping

�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 } } } } }

KotlinConf_2018Bootstrapping

�17

This extension function is only 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") }

KotlinConf_2018

�18

Multiplatform Development

Architecture

KotlinConf_2018Architecture

�19

D3JS DOMdocument.createElement(“circle”)setAttribute(“r”,50)

select(“#viz“).append(“circle“).attr(“r“, 50);

KotlinConf_2018Architecture

�20

Circle CircleDOM DOM

setAttribute(“r“, 50)

Common Platform

radius = 50.0

data2viz data2viz

KotlinConf_2018Architecture

�21

CircleJFx CirclesetRadius(50f)

CircleDOM DOM JS

JFx

setAttribute(“r“, 50)

PlatformCommon

Circle

data2viz data2viz

radius = 50.0

KotlinConf_2018Architecture

�22

CircleJFx Circle

CircleDOM DOM JS

JFx

state

PlatformCommon

Circle

data2viz data2viz

KotlinConf_2018Architecture

�23

CircleJFx Circle

CircleDOM DOM

android ?

JS

JFx

state

PlatformCommon

Circle

data2viz data2viz

KotlinConf_2018Architecture

�24

CircleJFx Circle

CircleDOM DOM

CircleSVG Canvas

JS

JFx

Android

state

PlatformCommon

Circle

data2viz data2viz

KotlinConf_2018Architecture

�25

CircleJFx Circle

CircleDOM DOM

CircleSVG Canvasstate

JS

JFx

Android

state

PlatformCommon

Circle

data2viz data2viz

KotlinConf_2018Architecture

�26

CircleJFx Circle

CircleDOM DOM

CircleSVG Canvasstate

JFx Renderer

Android Renderer

JS Renderer Canvas

Canvas

JS

JFx

Android

PlatformCommon

Circle

data2viz data2viz

KotlinConf_2018Architecture

�27

Viz Layer

Common Platform

JFx Renderer

Android Renderer

JS Renderer

Group

Circle

Rect

Path

Text

data2viz data2viz

v 0.7

KotlinConf_2018

�28

Multiplatform Development

Aligning platform APIs

KotlinConf_2018

�29

Y

X

Aligning platform APIs

KotlinConf_2018

�30

Aligning platform APIs

KotlinConf_2018

�31

JFxdegreescounterclockwise

Y

45°X

Aligning platform APIs

KotlinConf_2018

Androiddegreesclockwise

Y

45°X

�32

JFxdegreescounterclockwise

Y

45°X

Aligning platform APIs

KotlinConf_2018

AndroidJFxJS�33

Aligning platform APIs

KotlinConf_2018

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

�34

Aligning platform APIs

∏—4

∏—6-

KotlinConf_2018

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

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

�35

Aligning platform APIs

∏—4

∏—6-

-45°85°

KotlinConf_2018

Androidgc.arcTo( rectF, startAngle, sweepAngle)

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

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

�36

Aligning platform APIs

-45°∏—4

∏—6-

85°45°

-85°

KotlinConf_2018Aligning platform APIs

�37

KotlinConf_2018

�38

Multiplatform Development

Testing

KotlinConf_2018Multiplatform tests

�39

— common code

KotlinConf_2018Multiplatform tests

�40

— common code— specific platform code

KotlinConf_2018Multiplatform tests

�41

Viz

image

image

image

JsRenderer

JFxRenderer

AndroidRenderer

KotlinConf_2018Multiplatform tests JS

�42

Gradle puppeteerrendering.html

launch

select

screenshot

rendering.png

Viz

JsRenderer

Canvas

KotlinConf_2018Multiplatform tests JFx

�43

Gradle

rendering.png

JUnitTest

snapshot()

Viz

JfxRenderer

Canvas

KotlinConf_2018Multiplatform tests Android

�44

Gradle

rendering.png

adb pull

adb instrument Viz

JfxRenderer

Canvas

emulator

rendering.png

KotlinConf_2018Multiplatform tests

�45

JsRenderer

JFxRenderer

AndroidRenderer

KotlinConf_2018Multiplatform tests

�46

Current status

KotlinConf_2018Current status

�48

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

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

KotlinConf_2018

�50

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

Roadmap

Idea Plugins— data2viz-start: bootstrapping

KotlinConf_2018

�51

charts.kt

charts.kt KotlinConf_2018

�52

KotlinConf_2018

�53

charts.kt

�54

KotlinConf_2018charts.kt

�55

KotlinConf_2018charts.kt

KotlinConf_2018charts.kt - android demo

�56

charts.kt - early access program

�57

KotlinConf_2018

charts.kt - early access program

�58

KotlinConf_2018

KotlinConf_2018

Thank you!@imtam5Pierre Mariac

@gz_kGaëtan Zoritchak

data2viz.io charts-kt.io

@data2viz_iodata2viz

data2viz/data2vizGithub