A dual axes zoom and pan.
Charts: dual axes zoom
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.geom.*
import io.data2viz.color.*
import io.data2viz.random.RandomDistribution
import io.data2viz.timeFormat.*
import io.data2viz.timeFormat.TimeLocale
import kotlinx.datetime.Instant
fun main() {
val width = 450.0
val height = 300.0
val vc = newVizContainer().apply {
size = Size(width, height)
}
vc.chart(samples) {
config {
events {
zoomMode = ZoomMode.XY
panMode = PanMode.XY
}
tooltip {
fontSize = config.tooltip.fontSize + 2.0
}
cursor {
show = true
}
}
tooltip {
formatter = { "${format("At %X")(domain.timestamp)}, pressure = ${domain.pressure.formatToSI()} mb." }
}
val timeDimension = temporal( { domain.timestamp } )
val pressureDimension = quantitative( { domain.pressure } )
plot(timeDimension, pressureDimension)
}
}
val randomGenerator = RandomDistribution(42).normal(100.0, 18.0)
data class Sample(
val sampleIndex: Int,
val batchCode: String,
val timestamp: Instant,
val temperature: Double,
val pressure: Double
)
val samples = generateSamples(1000)
fun generateSamples(numSamples: Int) = (0 until numSamples).map {
val batchIndex = 1 + (it % 4)
val pressure: Double = randomGenerator() * 1000
val temp: Double = randomGenerator() * batchIndex * pressure / 100000
val ts = Instant.fromEpochMilliseconds(1611150127144L + (it * 8632L))
Sample(it, "Batch #$batchIndex", ts, temp, pressure)
}
Sketch created by
pierre
comments