Passionate about viz & systems thinking. Stanford CS 2017
CONSTANTS = ({
performer: "Performer",
song: "Song",
spotify_genre: "spotify_genre",
lyric_line: "lyric_line",
x: "x",
y: "y"
})
zoomChart = {
const hover = vl
.selectPoint("hover")
.encodings("x") // limit selection to x-axis value
.on("mouseover") // select on mouseover events
.nearest(true); // select data point nearest the cursor
const TOOLTIP_CONTENT = CONSTANTS.lyric_line || [
CONSTANTS.lyric_line,
CONSTANTS.performer
];
return vl
.markCircle()
.params(vl.selectInterval().bind("scales"))
.encode(
vl
.x()
.fieldQ(CONSTANTS.x)
.scale({ domain: [0, 1] }),
vl.tooltip(TOOLTIP_CONTENT),
vl
.y()
.fieldQ(CONSTANTS.y)
.scale({ domain: [0, 1] })
)
.data(lyricsData)
.render();
}
import { vl } from "@vega/vega-lite-api-v5"
lyricsData = FileAttachment("viz ready export@1.csv").csv()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
