vl.markBar()
.data(obesity)
.encode(
vl.y().fieldQ("rate"),
vl.x().fieldN("state")
)
.width(800)
.render()
vl.markBar()
.data(obesity)
.encode(
vl.y().fieldQ("rate"),
vl.x().fieldN("state").sort({op:"mean", field:"rate", order:"descending"}).axis({labelAngle:0})
)
.render()
vl.layer([
vl.markBar()
.encode(
vl.y().fieldQ("rate"),
vl.x().fieldN("state").sort({op:"mean", field:"rate", order:"descending"}).axis({labelAngle:0})
),
vl.markRule({color:"firebrick"})
.encode(
vl.y().average("rate")
)])
.data(obesity)
.render()
vl.layer([
vl.markCircle({size:50})
.encode(
vl.x().fieldQ("rate"),
vl.y().fieldN("state").sort({op:"mean", field:"rate", order:"descending"})
),
vl.markRule({color:"firebrick"})
.encode(
vl.x().average("rate")
)
])
.data(obesity)
.render()
vl.markBar()
.data(grades)
.encode(
vl.x().fieldQ("Total").bin({step:5}).title("Exam Grade"),
vl.y().count("Total")
)
.width(600)
.render()
{
const stemmed = grades.map((item)=>({value: item.Total, stem: Math.floor(item.Total / 10), leaf:item.Total % 10}));
stemmed.sort((item1, item2) => (item1.value - item2.value));
let lastStem = -1;
let count = 0;
stemmed.forEach((item)=>{
if (item.stem !== lastStem){
count = 1;
lastStem = item.stem;
}
item.position = count;
count += 1;
});
const plot = vl.markText()
.data(stemmed)
.encode(
vl.x().fieldO("position").axis({ticks:false, labels:false, grid:false, title:false}),
vl.y().fieldO("stem").axis({ticks:false, title:false}),
vl.text("leaf")
);
return plot.render();
}
vl.markArea()
.data(grades)
.transform([
vl.density("Total").extent([40,100]).bandwidth(4).as(["grade", "density"])
])
.encode(
vl.x().fieldQ("grade"),
vl.y().fieldQ("density")
)
.render()
vl.markBoxplot()
.data(grades)
.encode(
vl.y().fieldQ("Total")
)
.width(300)
.render()
vl.markBoxplot()
.data(grades)
.encode(
vl.x().fieldN("Section"),
vl.y().fieldQ("Total"),
vl.color().fieldN("Section")
)
.width(300)
.render()
vl.data(grades)
.layer([
vl.markBoxplot().encode(
vl.y().fieldQ("Total")
),
vl.markCircle({color:"black", opacity:0.3})
.transform([vl.calculate("random()").as("jitter")])
.encode(
vl.x().fieldN("jitter").axis({labels:false, ticks:false, title:false}),
vl.y().fieldQ("Total")
),
])
.width(300)
.render()
vl.markArc()
.data(seattleWeather)
.encode(
vl.theta().count().fieldN("weather"),
vl.color().fieldN("weather")
)
.title("Seattle Weather")
.view({stroke:null})
.render()
{
const weatherData = seattleWeather.map((item)=>({...item, order:weatherTypes.indexOf(item.weather)}))
const plot = vl.markArc({stroke:"lightgray"})
.data(weatherData)
.encode(
vl.theta({stack:true}).count().fieldN("weather"),
vl.color().fieldN("weather").scale({domain:weatherTypes, range: weatherColors}),
vl.order().fieldQ("order")
)
.title("Seattle Weather")
.view({stroke:null})
return plot.render();
}
vl.markBar()
.data(seattleWeather)
.encode(
vl.x().fieldN("weather").sort(weatherTypes),
vl.y().count().fieldN("weather"),
vl.color().fieldN("weather").scale({domain:weatherTypes, range: weatherColors})
)
.render()
vl.markBar({width:100})
.data(seattleWeather)
.encode(
vl.y().count().fieldN("weather").axis({domain:false, ticks:false, labels:false, grid:false, title:false, rule:false}),
vl.color().fieldN("weather").scale({domain:weatherTypes, range: weatherColors})
)
.view({stroke:null})
.width(150)
.render()
vl.markBar({height:100})
.data(seattleWeather)
.encode(
vl.x().count().fieldN("weather").axis({domain:false, ticks:false, labels:false, grid:false, title:false, rule:false}),
vl.color().fieldN("weather").scale({domain:weatherTypes, range: weatherColors})
)
.view({stroke:null})
.width(300)
.render()
{
const comparisonData = [{set:1, count:23}, {set:2, count:22}, {set:3, count:20}, {set:4, count:18}, {set:5, count:17}];
const pie = vl.markArc()
.encode(
vl.theta().fieldN("count"),
vl.color().fieldN("set")
)
.view({stroke:null});
const bars = vl.markBar()
.encode(
vl.x().fieldN("set"),
vl.y().fieldQ("count"),
vl.color().fieldN("set")
);
return vl.data(comparisonData)
.hconcat(
pie, bars
)
.render();
}
rawGrades = await FileAttachment("sample_grades@2.csv").csv();
grades = rawGrades.map((item) => ({id:item.First, Section: item.Section, Total:+item.Total}));
cars = vegaData['cars.json']()
seattleWeather = vegaData['seattle-weather.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.
