Published
Edited
Aug 18, 2021
2 stars
Insert cell
Insert cell
viewof api = embed(
{
title: "Visual Encoding",
subtitle: "Gosling provides diverse visual encoding methods",
layout: "linear",
arrangement: "vertical",
centerRadius: 0.8,
xDomain: { chromosome: "1", interval: [1, 3000500] },
views: [
view.id("view-1").track(baseTrack)({
mark: "rect",
x: gos.g("start", { axis: "top" }),
xe: gos.g("end"),
row: gos.n("sample", { legend: true }),
color: gos.q("peak", { legend: true })
}),
view.track(baseTrack)({
mark: "bar",
x: gos.g("position", { axis: "top" }),
y: gos.q("peak"),
row: gos.n("sample"),
color: gos.n("sample", { legend: true })
}),
view.track(baseTrack)({
mark: "bar",
x: gos.g("position", { axis: "top" }),
y: gos.q("quantitative", { grid: true }),
color: gos.n("sample", { legend: true })
}),
view.track(baseTrack)({
alignment: "overlay",
x: gos.g("position", { axis: "top" }),
y: gos.q("peak"),
row: gos.n("sample"),
color: gos.n("sample", { legend: true }),
tracks: [
{ mark: "line" },
{ mark: "point", size: gos.q("peak", { range: [0, 2] }) }
]
}),
view.track(baseTrack)({
mark: "point",
x: gos.g("position", { axis: "top" }),
y: gos.q("peak"),
row: gos.n("sample"),
size: gos.q("peak"),
color: gos.n("sample", { legend: true }),
opacity: gos.v(0.5)
}),
view.track(baseTrack)({
mark: "point",
x: gos.g("position", { axis: "top" }),
y: gos.q("peak", { grid: true }),
size: gos.q("peak"),
color: gos.n("sample", { legend: true }),
opacity: gos.v(0.5)
}),
view.track(baseTrack)({
mark: "area",
x: gos.g("position", { axis: "top" }),
y: gos.q("peak"),
row: gos.n("sample"),
color: gos.n("sample", { legend: true }),
stroke: gos.v("white"),
strokeWidth: gos.v(0.5)
}),
view.track(baseTrack)({
mark: "withinLink",
x: gos.g("s1", {
domain: { chromosome: "1", interval: [103900000, 104100000] }
}),
xe: gos.g("e1"),
x1: gos.g("s2", { domain: { chromosome: "1" } }),
x1e: gos.g("e2"),
color: gos.n("s1"),
stroke: gos.v("black"),
strokeWidth: gos.v(0.5),
opacity: gos.v(0.2)
})
]
},
{ padding: 0 }
)
Insert cell
multivec = ({
url:
"https://server.gosling-lang.org/api/v1/tileset_info/?d=cistrome-multivec",
type: "multivec",
row: "sample",
column: "position",
value: "peak",
categories: ["sample 1", "sample 2", "sample 3", "sample 4"],
binSize: 4
})
Insert cell
tooltip = [
gos.g("start", { alt: "Start Position" }),
gos.g("end", { alt: "End Position" }),
gos.q("peak", { alt: "value", format: ".2" }),
gos.n("sample", { alt: "Sample" })
]
Insert cell
view = ({
id: id => {
return {
track: base => track => ({
id,
tracks: [{ ...base, ...track }]
})
};
},
track: base => track => ({
tracks: [{ ...base, ...track }]
})
})
Insert cell
baseTrack = ({
data: multivec,
tooltip,
width,
height
})
Insert cell
gos = ({
g: (field, opts = {}) => ({ type: 'genomic', field, ...opts }),
q: (field, opts = {}) => ({ type: 'quantitative', field, ...opts }),
n: (field, opts = {}) => ({ type: 'nominal', field, ...opts }),
v: value => ({ value })
})
Insert cell
height = 130
Insert cell
embed = {
const mod = await import('https://unpkg.com/@manzt/gosling-embed@0.1.0/gosling-embed.js');
return mod.embed;
}
Insert cell

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.
Learn more