[IAT355] #1: The Basics of Observable, Github, and D3 | TUTORIAL[IAT355] Tutorial 2: Working with data in d3 and Vega | TUTORIAL[IAT355] Tutorial 3: Mapping Data to Features in Observable | TUTORIAL[IAT355] Tutorial 4: Visual Forms Continued | Building More Charts in Observable | TUTORIAL[IAT 355] Tutorial 6: Interaction | TUTORIAL[IAT355] Tutorial 7: Maps & Geocoding with Vega-Lite and Leaflet (v2) 🍂| TUTORIAL[IAT355] Tutorial 7.1: Geodata wrangling for Vega-lite and d3[IAT 355] Tutorial 8: Integration: Interaction using Leaflet and Signals in Vega-Lite with the Vancouver Crime Map
[IAT355] Tutorial 5: Multiple Views with Vega-Lite | TUTORIAL
data = Weather
//Chart 1: Compare maximum temperature levels to wind speed
vl.markCircle()
.data(Weather)
.encode(
vl.x().fieldQ("temp_max"),
vl.y().fieldQ("wind"),
vl.color().fieldN("weather")
)
.render()
//Chart 2: Compare precipitation levels to wind speed
vl.markCircle()
.data(Weather)
.encode(
vl.x().fieldQ("precipitation"),
vl.y().fieldQ("wind"),
vl.color().fieldN("weather")
)
.render()
{
//assign both charts to variables. uncomment the following two lines below
//const tempChart
//const precipChart = vl.markCircle()
//now, call hconcat and render
}
//Let's add our code here to replicate the image above
//We will be nesting our hconcat inside of the vconcat
vl.markBar()
.data(Weather)
.encode(
vl.x().fieldQ('wind').bin(true),
vl.y().aggregate('count'),
vl.color().fieldN('weather') //try replacing color with column. Now each column of the chart is encoded with the categories in weather
)
.width(150)
.height(150)
.render()
vl.markBar()
.data(Weather)
.encode(
vl.x().fieldQ('wind').bin(true),
vl.y().aggregate('count'),
vl.column().fieldN('weather') //each column of the chart is encoded with the categories in weather
)
.width(150)
.height(150)
.render()
vl.markArea()
.data(Weather)
.encode(
vl.x().fieldT('date').timeUnit('utcmonth'),
vl.y().fieldQ('wind').aggregate('mean'),
vl.column().fieldN('weather') //each column of the chart is encoded with the categories in weather
)
.width(150)
.height(150)
.render()
vl
.markArea()
.data(Weather)
.encode(
vl.x().fieldT("date").timeUnit("utcmonth"),
vl.y().fieldQ("wind").aggregate("mean"),
vl.facet().fieldN("weather").columns(3) //we can use the general facet function and then specify that we want two columns, however, we might get a graphical error for an odd # of distinct fields
)
.width(150)
.height(150)
.render()
vl.markArea()
.data(Weather)
.encode(
vl.x().fieldT('date').timeUnit('utcmonth'),
vl.y().fieldQ('wind').aggregate('mean'),
vl.color().fieldN('weather') //each column of the chart is encoded with the categories in weather
)
.width(150)
.height(150)
.render()
vl.markCircle()
.data(Weather)
.encode(
vl.x().fieldQ(vl.repeat('repeat')), //instead of assigning a field, we call repeat row and column
vl.y().count(),
vl.color().fieldN('weather')
)
//.repeat(['temp_max', 'wind', 'precipitation']) //note how we call .repeat outside of the encoding definitions inside .markCircle(). We call repeat here to allow us to fully replicate a data set in each view
//.columns(3)
.render()
vl.markCircle()
.data(Weather)
.encode(
vl.x().fieldQ(vl.repeat('row')), //instead of assigning a field, we call repeat row and column
vl.y().fieldQ(vl.repeat('column')),
vl.color().fieldN('weather')
)
.repeat({
row: ['temp_max', 'wind', 'precipitation'], //repeat for each row
column: ['precipitation', 'wind', 'temp_max']
})
.render()
//NOTICE HERE THAT WE DON'T START WITH DEFINING A MARK, BUT RATHER SPECIFY OUR DATA AND ENCODING
vl.data(Weather)
.encode(
vl.x().fieldO("date").timeUnit("utcmonth"),
vl.y().fieldQ("temp_max")
)
.layer(
//let's add in the layers here
//layer 1
//layer 2
//layer 3
)
.render()
//Code for C0 here
Stocks
//Code for C2 goes here
//Use dataset Stocks
//Code for C3 goes here
//Use dataset penguins and play around with making different sizes of your scatterplot matrix (2x2, 3x3, 4x4, etc...)
Stocks
//Code for C4 goes here
//Use dataset Stocks
//Code for C5 goes here
//Use dataset Starbucks_Drink
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.
