porting d3js to · 2020. 7. 16. · d3.js shape force … data2viz js jfx ... axis scale-chromatic...
TRANSCRIPT
![Page 1: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/1.jpg)
KotlinConf_2018
Porting D3JS to kotlin multiplaform
@imtam5Pierre Mariac
@gz_kGaëtan Zoritchak
![Page 2: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/2.jpg)
KotlinConf_2018
�2
The idea
![Page 3: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/3.jpg)
KotlinConf_2018The idea
�3
D3.jsforceshape …
data2vizJS JFx Android
isomorphic, open source
![Page 4: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/4.jpg)
KotlinConf_2018The idea
�4
platform code
JS Android
API
Implementation
common codeinterpolate
timer
JFx
![Page 5: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/5.jpg)
KotlinConf_2018
�5
What is a dataviz library?
![Page 6: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/6.jpg)
![Page 7: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/7.jpg)
![Page 8: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/8.jpg)
![Page 9: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/9.jpg)
![Page 10: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/10.jpg)
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
![Page 11: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/11.jpg)
KotlinConf_2018
�11
How can Kotlin improve D3 API ?
![Page 12: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/12.jpg)
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;")
![Page 13: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/13.jpg)
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;")
![Page 14: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/14.jpg)
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;")
![Page 15: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/15.jpg)
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 } } } } }
![Page 16: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/16.jpg)
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 } } } } }
![Page 17: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/17.jpg)
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") }
![Page 18: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/18.jpg)
KotlinConf_2018
�18
Multiplatform Development
Architecture
![Page 19: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/19.jpg)
KotlinConf_2018Architecture
�19
D3JS DOMdocument.createElement(“circle”)setAttribute(“r”,50)
select(“#viz“).append(“circle“).attr(“r“, 50);
![Page 20: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/20.jpg)
KotlinConf_2018Architecture
�20
Circle CircleDOM DOM
setAttribute(“r“, 50)
Common Platform
radius = 50.0
data2viz data2viz
![Page 21: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/21.jpg)
KotlinConf_2018Architecture
�21
CircleJFx CirclesetRadius(50f)
CircleDOM DOM JS
JFx
setAttribute(“r“, 50)
PlatformCommon
Circle
data2viz data2viz
radius = 50.0
![Page 22: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/22.jpg)
KotlinConf_2018Architecture
�22
CircleJFx Circle
CircleDOM DOM JS
JFx
state
PlatformCommon
Circle
data2viz data2viz
![Page 23: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/23.jpg)
KotlinConf_2018Architecture
�23
CircleJFx Circle
CircleDOM DOM
android ?
JS
JFx
state
PlatformCommon
Circle
data2viz data2viz
![Page 24: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/24.jpg)
KotlinConf_2018Architecture
�24
CircleJFx Circle
CircleDOM DOM
CircleSVG Canvas
JS
JFx
Android
state
PlatformCommon
Circle
data2viz data2viz
![Page 25: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/25.jpg)
KotlinConf_2018Architecture
�25
CircleJFx Circle
CircleDOM DOM
CircleSVG Canvasstate
JS
JFx
Android
state
PlatformCommon
Circle
data2viz data2viz
![Page 26: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/26.jpg)
KotlinConf_2018Architecture
�26
CircleJFx Circle
CircleDOM DOM
CircleSVG Canvasstate
JFx Renderer
Android Renderer
JS Renderer Canvas
Canvas
JS
JFx
Android
PlatformCommon
Circle
data2viz data2viz
![Page 27: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/27.jpg)
KotlinConf_2018Architecture
�27
Viz Layer
Common Platform
JFx Renderer
Android Renderer
JS Renderer
Group
Circle
Rect
Path
Text
data2viz data2viz
v 0.7
![Page 28: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/28.jpg)
KotlinConf_2018
�28
Multiplatform Development
Aligning platform APIs
![Page 29: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/29.jpg)
KotlinConf_2018
�29
Y
X
Aligning platform APIs
![Page 30: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/30.jpg)
KotlinConf_2018
�30
Aligning platform APIs
![Page 31: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/31.jpg)
KotlinConf_2018
�31
JFxdegreescounterclockwise
Y
45°X
Aligning platform APIs
![Page 32: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/32.jpg)
KotlinConf_2018
Androiddegreesclockwise
Y
45°X
�32
JFxdegreescounterclockwise
Y
45°X
Aligning platform APIs
![Page 33: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/33.jpg)
KotlinConf_2018
AndroidJFxJS�33
Aligning platform APIs
![Page 34: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/34.jpg)
KotlinConf_2018
AndroidJFxJScontext.arc( x, y, r, startAngle, endAngle, counterclockwise);
�34
Aligning platform APIs
∏—4
∏—6-
![Page 35: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/35.jpg)
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°
![Page 36: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/36.jpg)
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°
![Page 37: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/37.jpg)
KotlinConf_2018Aligning platform APIs
�37
![Page 38: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/38.jpg)
KotlinConf_2018
�38
Multiplatform Development
Testing
![Page 39: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/39.jpg)
KotlinConf_2018Multiplatform tests
�39
— common code
![Page 40: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/40.jpg)
KotlinConf_2018Multiplatform tests
�40
— common code— specific platform code
![Page 41: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/41.jpg)
KotlinConf_2018Multiplatform tests
�41
Viz
image
image
image
JsRenderer
JFxRenderer
AndroidRenderer
![Page 42: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/42.jpg)
KotlinConf_2018Multiplatform tests JS
�42
Gradle puppeteerrendering.html
launch
select
screenshot
rendering.png
Viz
JsRenderer
Canvas
![Page 43: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/43.jpg)
KotlinConf_2018Multiplatform tests JFx
�43
Gradle
rendering.png
JUnitTest
snapshot()
Viz
JfxRenderer
Canvas
![Page 44: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/44.jpg)
KotlinConf_2018Multiplatform tests Android
�44
Gradle
rendering.png
adb pull
adb instrument Viz
JfxRenderer
Canvas
emulator
rendering.png
![Page 45: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/45.jpg)
KotlinConf_2018Multiplatform tests
�45
JsRenderer
JFxRenderer
AndroidRenderer
![Page 46: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/46.jpg)
KotlinConf_2018Multiplatform tests
�46
![Page 47: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/47.jpg)
Current status
![Page 48: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/48.jpg)
KotlinConf_2018Current status
�48
Some statistics— 14k lines of code— 12k lines of tests— more than 95% of common code
![Page 49: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/49.jpg)
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
![Page 50: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/50.jpg)
KotlinConf_2018
�50
Version v0.8— events API— more text features (fonts, multiline, …)— tutorials with online editable examples
Roadmap
Idea Plugins— data2viz-start: bootstrapping
![Page 51: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/51.jpg)
KotlinConf_2018
�51
charts.kt
![Page 52: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/52.jpg)
charts.kt KotlinConf_2018
�52
![Page 53: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/53.jpg)
KotlinConf_2018
�53
charts.kt
![Page 54: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/54.jpg)
�54
KotlinConf_2018charts.kt
![Page 55: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/55.jpg)
�55
KotlinConf_2018charts.kt
![Page 56: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/56.jpg)
KotlinConf_2018charts.kt - android demo
�56
![Page 57: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/57.jpg)
charts.kt - early access program
�57
KotlinConf_2018
![Page 58: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/58.jpg)
charts.kt - early access program
�58
KotlinConf_2018
![Page 59: Porting D3JS to · 2020. 7. 16. · D3.js shape force … data2viz JS JFx ... axis scale-chromatic scale polygon shape path color n d library 10. KotlinConf_2018 11 How can Kotlin](https://reader035.vdocument.in/reader035/viewer/2022071213/603ad5b6b4e7377bda4d42fc/html5/thumbnails/59.jpg)
KotlinConf_2018
Thank you!@imtam5Pierre Mariac
@gz_kGaëtan Zoritchak
data2viz.io charts-kt.io
@data2viz_iodata2viz
data2viz/data2vizGithub