Same dataset used in 2 line charts, the difference is that the first use a discrete dimension as its X-axis, the second use a quantitative dimension.
Charts: Quantitative vs Discrete
import io.data2viz.charts.*
import io.data2viz.charts.core.Padding
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.charts.config.configs.*
import io.data2viz.charts.config.*
import io.data2viz.charts.core.CursorType
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 = 400.0
val height = 200.0
data class Record(
val index: Int,
val value: Double,
)
val records = listOf(
Record(0, .0),
Record(1, 10.0),
Record(2, 20.0),
Record(7, 70.0),
Record(8, 80.0),
Record(9, 90.0),
Record(10, 100.0),
)
fun main() {
// Creating and sizing the VizContainer
val vc0 = newVizContainer().apply { size = Size(width, height) }
val vc1 = newVizContainer().apply { size = Size(width, height) }
vc0.chart(records) {
config {
tooltip {
show = false
}
}
val indexDimension = discrete({domain.index}) {
name = "Discrete Dimension, each item is processed as a \"category\""
}
val valueDimension = quantitative({domain.value})
line(indexDimension, valueDimension) {
showMarkers = true
}
}
vc1.chart(records) {
config {
tooltip {
show = false
}
}
val indexDimension = quantitative({domain.index.toDouble()}) {
name = "Quantitative Dimension, items are processed in a continuous space"
}
val valueDimension = quantitative({domain.value})
line(indexDimension, valueDimension) {
showSymbols = true
}
}
}
Sketch created by
pierre
comments