phd student, middle child
Published
Edited
Sep 27, 2021
1 fork
embed = {
const mod = await import(
"https://unpkg.com/@manzt/gosling-embed@0.2.0/dist/index.js"
// "http://localhost:3000/embed/index.ts"
// If developing locally, replace import with the above
);
return mod.embed;
}
{
if (chrom) api.zoomTo("view-1-view", chrom);
}
viewof api = embed(
{
views: [
{
id: "view-1",
tracks: [
{
//*** specify the size of the visualization
width,
height: 70,
//*** Load a csv data file through URL
data: {
url:
"https://raw.githubusercontent.com/sehilyi/gemini-datasets/master/data/UCSC.HG38.Human.CytoBandIdeogram.csv",
chromosomeField: "Chromosome",
type: "csv",
genomicFields: ["chromStart", "chromEnd"]
},
//*** specify the mark type
mark: "rect",
//*** encoding data with visual channels
color: {
field: "Stain",
type: "nominal",
domain: ["gneg", "gpos25", "gpos50", "gpos75", "gpos100", "gvar"],
range: [
"white",
"#D9D9D9",
"#979797",
"#636363",
"black",
"#A0A0F2"
]
},
x: {
field: "chromStart",
type: "genomic",
domain: { chromosome: "1" },
axis: "top"
},
xe: { field: "chromEnd", type: "genomic" },
//*** customize the style of the visual marks.
//*** default values will be used if not specifyed.
size: { value: 20 },
stroke: { value: "gray" },
strokeWidth: { value: 0.5 }
}
]
}
]
},
{ padding: 0 }
)
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.
