porting d3js to · 2020. 7. 16. · d3.js shape force … data2viz js jfx ... axis scale-chromatic...
TRANSCRIPT
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