Skip to content
alkemist

Visualization

Make datasets and musical phrases inspectable with charts and editable piano rolls.

Choose a preset to start with a matching CSV and field names. Every public prop is editable; options such as stacking and orientation apply only to the chart types that support them.

Chart

Preview loads when it becomes visible.

Component parameters
Source code
chart.astro
---
import Chart from "@alkemdotdev/alkemist-components/chart";
---

<Chart
  id={""}
  src={"/test/oscillation.csv"}
  type={"line"}
  x={"time"}
  y={"position"}
  title={"A damped oscillator"}
  description={"Synthetic data with damping ratio 0.12."}
  xLabel={"Time (s)"}
  yLabel={"Position (m)"}
  xType={"quantitative"}
  color={""}
  colorLabel={""}
  value={""}
  valueLabel={""}
  ink={"cobalt"}
  height={280}
  grid={true}
  zoom={true}
  horizontal={false}
  stacked={false}
  caption={""}
  sample={true}
  parameters={false}
/>

Read the Chart reference →

Play and edit musical phrases on a piano roll. Compare piano, supersaw, and bass voices; import a MIDI file or export your own notes.

Midi

Preview loads when it becomes visible.

Component parameters
Source code
midi.astro
---
import Midi from "@alkemdotdev/alkemist-components/midi";
---

<Midi
  id={""}
  title={"Music sketch"}
  caption={"Edit a phrase, compare the voices, and export the result."}
  preset={"nocturne"}
  sequence={null}
  src={""}
  voice={"track"}
  editable={true}
  loop={true}
  volume={0.65}
  tempo={0}
  height={300}
/>

Read the Midi reference →