Kubed: Data Visualization DSL

kotlin · · 104 次点击    
<p>To learn Kotlin and experiment with building DSLs within it I have been developing Kubed: A Data Visualization DSL. Kubed is an (ongoing) attempt at recreating the web&#39;s popular D3.js data visualization DSL, within Kotlin rendered by JavaFX. The source code can be found <a href="https://github.com/hudsonb/kubed/" rel="nofollow">here</a>.</p> <p>I&#39;ve been able to recreate the major parts of D3.js (selections, transitions, scales, shapes, symbols, colorspaces, chords, etc.), but there is still a lot of work left (geo stuff for example). There are some parts I&#39;m not happy with and will be revamping (transitions), but so far the results look very promising and I&#39;m really learning to love working with Kotlin.</p> <p>In the demo source code I have recreated a number of D3.js examples (blocks). For example, the following Kubed code recreates this D3.js <a href="https://bl.ocks.org/mbostock/1125997" rel="nofollow">block</a>:</p> <pre><code> val y = PointScale&lt;Double&gt;() y.domain((0..50).map(Int::toDouble)) y.range(listOf(0.0, height)) val z = LinearScale(::interpolateHcl) z.domain(listOf(10.0, 0.0)) z.range(listOf(Hsl(62.0, 1.0, 0.9).rgb().hcl(), Hsl(228.0, 0.3, 0.2).rgb().hcl())) val c = circle&lt;Double&gt; { radius(25.0) stroke(Color.BLACK) translateY { d, _ -&gt; y(d) } fill { d, _ -&gt; z(Math.abs(d % 20 - 10)).toColor() } } root.selectAll&lt;Double&gt;(&#34;Circle&#34;) .data(y.domain) .enter().append { d, _, _ -&gt; c(d) } .transition() .delay { d, _, _ -&gt; Duration.millis(d * 40) } .duration(Duration.millis(2500.0)) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .translateX(width) </code></pre> <p>Another example is the <a href="https://bl.ocks.org/mbostock/45943c4af772e38b4f4e" rel="nofollow">rainbow circle</a>:</p> <pre><code> val arc = arc&lt;Double&gt; { outerRadius(outerRadius) innerRadius(innerRadius) startAngle { d, _ -&gt; d } endAngle { d, _ -&gt; d + t / n * 1.1 } fill { d, _ -&gt; Hsl(d * 360 / t, 1.0, 0.5).toColor() } stroke(Color.TRANSPARENT) } root.selectAll&lt;Double&gt;() .data(range(0.0, t, t / n).toList()) .enter() .append { d, _, _ -&gt; arc(d) } </code></pre> <p>If anyone gets a chance to play with it, I&#39;d be interested in any bugs, feedback on how to improve the DSL (even if it means diverging from how things work in D3.js), what I could do to make things more Kotlin-like, or improve Java interop.</p> <hr/>**评论:**<br/><br/>mars-dev: <pre><p>Looks really nice... Trying it out now... thanks for submitting this.</p></pre>
104 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet