Isomorphic dataviz

Data2viz is a multiplatform data visualization library based on Kotlin. The rendering produces the same result on each platform: Android, JavaScript and JavaFX.

The algorithms and other portions are ported from d3js modules.

The code is separated in modules that can be independently used. Some are specifically designed for visualization (d2v-axis, d2v-path, d2v-shape, d2v-viz) while others can be used outside of dataviz projects. For example, d2v-format can be used as a multiplatform Kotlin format library outside of any dataviz project.

Data2viz allows you to develop data visualizations through a fully typed DSL. It simplifies the creation of complex visualizations via the IDE’s context-based suggestions.

How can I use it?

Artifacts are published on Maven Central and Bintray.

For example: to use data2viz in a Kotlin Javascript project, you need to add the following to the repositories and dependencies blocks:

repositories {
    mavenCentral()
}

dependencies {
    compile "io.data2viz:d2v-data2viz-js:$data2viz_version"
    compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
}

You can then create a visualization in your code and render it in the context of your application. For example:

fun main(args: Array<String>) {
    println("starting a first viz")
    viz {
        width = 400.0
        height = 400.0

        rect {
            width = 50.0
            height = 50.0
            x = 100.0
            y = 100.0
            style.fill = colors.red
        }

    }.bindRendererOn("viz")     // <- the canvas id of which the viz is rendered.

}

You can also clone the examples repo or have a look at the example directory in this repo.

Some samples

All examples are available in the examples directory. Here is a small sample you what you can do with data2viz. All examples are able to run in the browser and as JavaFX applications. You can open the JavaScript version of each example using the links below.

You can also install the Android demo app directly from the Play Store.

Geo projection

This code uses the geo module to show how to load a GeoJson file and render it using a projection.

Open live JavaScript version

See code

Forces

This demo shows how to use different types of forces: radial, nbody, x, and y forces.

Open live JavaScript version

See code

Chord Graph

This demonstrates a chord diagram, which shows relationships between entities using arcs.

Open live JavaScript version

See code

Current status and roadmap

APIs are mostly stabilized now, but there may still be some breaking changes before v1.0.

Version v0.7 (Current):

This major version brings support for Android. This addition of Android as a target platform had a big impact on the design of data2viz. Before v0.7 basic visual elements (rectangles, circles, ...) were wrappers on specific platform elements. Now, these elements are a memory version of the visualization. Elements are just rendered on each platform using canvas.

This version includes a cleaner hierarchy with layers at its base.

Version v0.6:

The current version contains the following modules:

• axis: a module that display axis for scales.
• chord: generator for chord charts.
• colors: manage different color spaces (RGBA, HSLA, LAB), gradients, categories of colors, ...
• core: some main elements like trigonometric functions, namespace constants.
• dsv: parsing of CSV, TSV files.
• ease: a collection of functions used by transitions.
• format: a multiplatform formatting library with a DSL
• geo: mechanism and algorithms to project GeoJson objects on a visualization.
• hierarchy: generator for hierarchical charts.
• path: abstraction over path generation.
• random: various randomize functions.
• sankey: generator for sankey charts.
• scale: manage the transformation between domain objects and visualizations.
• selection: a way of selecting visual elements of a datavisualization in order to apply some modifications.
• shape: provides some generators for curves, areas, lines, stack, symbols,...
• test: an internal module used to simplify multiplatform testing with a higher DSL.
• tile: manage the loading, and display of tiles.
• time: a multiplatform module to simplify time management inside datavisualizations.
• time-format: formatting date and time.
• timer: multiplatform way of managing animations through shared frames.
• transitions: modifying visual elements through animated transitions.
• viz: multiplatform abstraction over visual elements (circle, rectangle, ...)
• voronoi: the voronoi algorithm

Roadmap:

• We plan to release a chart module inspired by vega-lite to enable very fast charting development
• We'll create all necessary geographic projections
• Before the v1.0 release, we'll spend some time on polishing APIs and DSLs in order to improve the consistency of the library

Inspirations

• d3js: a lot of modules and algorithms come from d3js
• paperjs: another source of inspiration for viz hierarchy and simple API.
• delaunator: A really fast JavaScript library for Delaunay triangulation of 2D points.
• kotlinx.html: isomorphic html rendering
• kotlintest: nice DSL for testing (partly ported in test)