Plot chart with commute times for 4 different cities. The cities are categories (series), the legend is shown and its title is the series dimension name. As the series are based on the cities names (String) we don't have to provide a custom formatter to display their names, the default one (toString()) is enough. The dataset comes from a Google spreadsheet: https://docs.google.com/spreadsheets/d/1OaMbAPZ9HgaTYbPr6UBTF5NbwyiCdMkGKvONFUWepyo/edit?usp=sharing
Commute time for 4 cities
import io.data2viz.charts.*
import io.data2viz.charts.core.*
import io.data2viz.charts.dimension.*
import io.data2viz.charts.chart.*
import io.data2viz.charts.chart.mark.*
import io.data2viz.charts.viz.*
import io.data2viz.charts.layout.*
import io.data2viz.math.*
import io.data2viz.geom.*
import io.data2viz.shape.Symbols
import io.data2viz.dsv.Dsv
import org.w3c.fetch.Response
import kotlinx.browser.window
import kotlin.js.Promise
val width = 700.0
val height = 500.0
data class Commute(val city: String, val distance: Int, val time: Int)
private fun parseCommute(row: List<String>) = Commute(row[1], row[2].toInt(), row[3].toInt())
fun main() {
// Creating and sizing the VizContainer
val vc = newVizContainer().apply {
size = Size(width, height)
}
// source file: https://docs.google.com/spreadsheets/d/1OaMbAPZ9HgaTYbPr6UBTF5NbwyiCdMkGKvONFUWepyo/edit?usp=sharing
// original taken from https://vincentarelbundock.github.io/Rdatasets/
val request: Promise<Response> =
window.fetch("https://docs.google.com/spreadsheets/d/e/2PACX-1vQ6naplfqk9CBGpGZDPDFPY5Mkg9y9twQ8-J42KizT-RofXXFe0QDlXys7xMwDitsA6thMUq9lpKwVb/pub?gid=18902036&single=true&output=csv")
request.then {
it.text().then {
val results = Dsv()
.parseRows(it)
.drop(1)
.map { parseCommute(it) }
vc.chart(results) {
title = "Commute time for 4 cities (Metropolitan Public Use File)"
// display cursor
config {
cursor {
show = true
}
legend {
show = LegendVisibility.Show
}
}
// Create 2 continuous numeric dimensions
val distance = quantitative( { domain.distance.toDouble() } ) {
name = "Distance in miles"
}
val time = quantitative( { domain.time.toDouble() } ) {
name = "Commute time in minutes"
}
// Split our dataset based on cities
series = discrete( { domain.city } ) {
// naming the series allows for a "Legend" title
name = "Cities"
}
// Plot values
plot(distance, time) {
size = constant(30.0)
marker = constant(Symbols.Circle)
y {
end = 200.0
}
}
}
}
}
}
Sketch created by
pierre
comments