Crossed Area
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.color.*
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
import kotlinx.datetime.Instant
val width = 800.0
val height = 500.0
data class ImportExport(val month: String, val imp: Double, val exp: Double)
// Just use a simple list of months label for the X axis
private val importExports = listOf(
ImportExport("Jan.", 12.0, 33.6),
ImportExport("Feb.", 14.0, 28.9),
ImportExport("Mar.", 13.5, 27.3),
ImportExport("Apr.", 18.6, 22.6),
ImportExport("May", 21.3, 20.8),
ImportExport("Jun.", 22.4, 21.4),
ImportExport("Jul.", 26.3, 20.9),
ImportExport("Aug.", 27.8, 18.9),
ImportExport("Sep.", 25.9, 18.7),
ImportExport("Oct.", 26.3, 19.9),
ImportExport("Nov.", 27.8, 17.3),
ImportExport("Dec.", 26.1, 17.1)
)
fun main() {
// Creating and sizing the VizContainer
val vc = newVizContainer().apply {
size = Size(width, height)
}
vc.chart(importExports) {
title = "Commercial balance over the year"
config {
cursor {
show = true
type = CursorType.Vertical
}
}
val monthDim = discrete( { domain.month } )
val impDim = quantitative( { domain.imp } ) {
name = "Exchange in billion dollars"
formatter = { "$this" }
}
area(monthDim, impDim) {
baseline = { domain.exp }
strokeColor = discrete ( { if (domain.imp > domain.exp) Colors.Web.blue else Colors.Web.red } )
y {
min = .0
start = .0
end = 40.0
max = 40.0
}
}
}
}
Sketch created by
pierre
comments