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 } } } } } }