Public
Edited
Feb 17, 2023
vl.markRect({tooltip: {"content": "data"}, clip: true}) //content of tooltip contains the encoded data
.data(Weather)
.encode(
vl.y().fieldO("date").timeUnit("month"),
vl.x().fieldO("date").timeUnit("date"),
vl.color().average("temp_max").scale({ scheme: "redyellowblue", reverse: true }),
vl.size().average('wind').scale({range:[0, 300]}),
//vl.tooltip().average('temp_max').format({content: 'encoding'}) //this is also another way of specifying tooltips through chained functions that is more in line with the Vega-Lite API. Comment out the top tooltip object and uncomment this to see how it looks
)
.render()
printTable(Cereals.slice(0, 10))
vl.markCircle({ stroke: "black", strokeWidth: 1, opacity: 0.75 }) //we want each of the circles to have a border so we can see overlaps
.data(Cereals)
.encode(
vl.x().fieldQ("calories").title("Calories"),
vl.y().fieldN("Type").title("Type of Cereal"),
vl.color().fieldQ("rating").title("Rating").scale({ domain: [0, 100], range: ["#8AB9ED", "#FDB813"] }),
vl.size().fieldO("shelf").title("Shelf Location")
)
.width(600)
.height(400)
.render()
vl.markCircle({stroke: 'black', strokeWidth: 1, opacity: .75}) //we want each of the circles to have a border so we can see overlaps
.data(Cereals)
.encode(
vl.x().fieldQ("calories").title("Calories"),
vl.y().fieldQ('rating').title("Rating"),
vl.color().fieldN('Type').title("Type of Cereal"),
vl.size().fieldO("shelf").title("Shelf Location")
)
.width(600)
.height(400)
.render()
simpleCereals = {
for (let i=0;i<cerealsCleaned.length;i++)
{
if (cerealsCleaned[i].rating == -99){
cerealsCleaned[i].rating = NaN;
}
}
return cerealsCleaned;
}
invalidCereals = simpleCereals.filter(function(cereal) {
return ((isNaN(cereal.rating) || (cereal.rating==0)));
})
vl.markCircle({ stroke: "black", strokeWidth: 1, opacity: 0.75 }) //we want each of the circles to have a border so we can see overlaps
.data(simpleCereals)
.encode(
vl.x().fieldQ("calories").title("Calories"),
vl.y().fieldQ("rating").title("Rating"),
vl.color().fieldN("Type").title("Type of Cereal"),
vl.size().fieldO("shelf").title("Shelf Location")
)
.width(600)
.height(400)
.render()
vl.markCircle({ stroke: "black", strokeWidth: 1, opacity: 0.75 }) //we want each of the circles to have a border so we can see overlaps
.data(Cereals)
.transform(
vl.filter("datum.rating > 0")
)
.encode(
vl.x().fieldQ("calories").title("Calories"),
vl.y().fieldQ("rating").title("Rating"),
vl.color().fieldN("Type").title("Type of Cereal"),
vl.size().fieldO("shelf").title("Shelf Location"),
vl.tooltip([{"field": "Brand","type": "nominal"}, {"field": "rating","type": "quantitative"}])
)
.width(600)
.height(400)
.render()
vl.markCircle({ stroke: "black", strokeWidth: 1, opacity: 0.75 })
.data(simpleCereals)
.transform(
vl.filter("datum.rating > 0")
)
.encode(
vl.x().fieldQ("calories").title("Calories").scale({domain: [40, 200]}),
vl.y().fieldQ("rating").title("Rating"),
vl.color().fieldN("Type").title("Type of Cereal"),
vl.size().fieldQ("sugar").title("Sugar (g)")
)
.width(600)
.height(400)
.render()
Disasters
printTable(Disasters.slice(0, 10))
vl.markLine()
.data(Disasters)
.encode(
vl.x().fieldO("Year").axis({ labelAngle: 45 }), //We want our years to be listed ordinally
vl.y().fieldQ("Deaths").axis({ title: "Annual Global Deaths" }),
vl.color().fieldN("Entity").scale({ scheme: "tableau10" })
)
.render()
vl.markCircle({opacity: 0.8, stroke: "black",strokeWidth: 1}) //adding a stroke line around our circles
.data(Disasters)
.encode(
vl.x().fieldO('Year').axis({labelAngle: 45}), //in this case we want our years to be Ordinal
vl.y().fieldN('Entity'),
vl.size().fieldQ('Deaths').scale({range:[0, 2500]}).legend({title: 'Annual Global Deaths'}),
vl.color().fieldN('Entity').legend(null), //the color legend is hidden here since it doesn't add much -- we're only using color for visibility.
)
.render()
vl.markTick()
.data(simpleCereals)
.encode(
vl.x().fieldQ('calories').scale({domain:[40, 200]}),//what if you put range instead of domain? What does that do to the chart and why?
vl.y().fieldO('shelf')
)
.render()
vl.markTick() //try changing this to markCircle, and see how it reads
.data(Cars)
.encode(
vl.x().fieldQ('Horsepower').scale({domain:[40, 240]}), //what if you put range instead of domain? What does that do to the chart and why?
vl.y().fieldO('Cylinders')
)
.render()
printTable(Stocks.slice(0, 10))
vl.markLine({opacity: .7, strokeWidth: 3})
.data(Stocks)
.encode(
vl.x().fieldT('date'),
vl.y().fieldQ('price'),
vl.color().fieldN('symbol')
)
.width(600)
.render()
printTable(Population.slice(0, 10))
vl.markBar()
.data(Population)
.transform(
vl.filter('datum.year == 2000') //only show relevant data from the year 2000
)
.encode(
vl.x().fieldN('age').bin({step: 5}), //step tells vega-lite that you want bins to be formed in multiples of 5
vl.y().fieldQ('people').aggregate('sum'),
vl.color().fieldN('sex').scale({range: ["#EA98D2", "#659CCA"]}), //colors
// vl.column().fieldO('age').spacing(5)
)
.render()
vl.markBar()
.data(Population)
.transform(
vl.filter('datum.year == 2000')
)
.encode(
vl.x().fieldN('sex'),
vl.y().fieldQ('people').aggregate('sum'),
vl.color().fieldN('sex').scale({range: ["#EA98D2", "#659CCA"]}), //colors
vl.column().fieldO('age').spacing(5) //try using row instead of column and see what happens
)
.width(30) //the width here corresponds to the size of each individual bar chart
.render()
vl.markBar()
.data(Population)
.transform(
vl.filter('datum.year == 2000'),
vl.calculate('datum.sex==2 ? \"M\": \"F\"' ).as('gender') //this string is a ternary operator (? :) ; it is equivalent to if(datum.sex==1), return M, else return F
)
.encode(
vl.x().fieldN('gender').axis({title: null}), //we don't want the axis label for each bar chart to repeat
vl.y().fieldQ('people').aggregate('sum'),
vl.color().fieldN('sex').scale({range: ["#EA98D2", "#659CCA"]}),
vl.column().fieldO('age').spacing(5).title('Gender'), //we'll add a title for the column; though this be more descriptive to show the name of the chart
)
.render()
values = [
{"task": "A", "start": 1, "end": 3},
{"task": "B", "start": 3, "end": 8},
{"task": "C", "start": 8, "end": 10}
]
vl.markBar()
.data(values)
.encode(
vl.x().fieldQ('start'),
vl.y().fieldO('task'),
vl.x2().fieldQ('end'), //what if you comment this line out? //what happens if you use y2 instead
)
.render()
Gapminder
printTable(Gapminder.slice(0, 10))
vl.markCircle()
.data(Gapminder)
.encode(
vl.x().fieldQ('income').scale({type: 'log'}), //uncomment this and see what it does
vl.y().fieldQ('health'),
vl.size().fieldQ('population'),
vl.color().fieldQ('population').scale({scheme: 'goldred'})
)
.render()
//Vis 1 here
//use dataset Gapminder
//Vis 2 here
//Use dataset Cars
//Vis 3 here
//Use dataset Weather
//Vis 4 here
//Use dataset Stocks
//Hint: Use the filter function get an array of only Microsoft data
data_f = Weather.filter(d => d.weather == 'fog')
//Code for Vis 5 goes here
vl.markSquare()
.data(data_f)
.encode(
vl.y().fieldO("date").timeUnit("month"),
vl.x().fieldO("date").timeUnit("date"),
vl.color().average("temp_max").scale({ scheme: "redyellowblue", reverse: true }),
vl.size().average("wind").scale({domain: [1,6]})
)
.render()
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.
