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= vl.markCircle()
.data(Weather)
.encode(
vl.x().fieldQ("temp_max"),
vl.y().fieldQ("wind"),
vl.color().fieldN("weather").scale({scheme: 'tableau10'})
)
const precipitationChart = vl.markCircle()
.data(Weather)
.encode(
vl.x().fieldQ("precipitation"),
vl.y().fieldQ("wind"),
vl.color().fieldN("weather").scale({scheme: 'accent'})
)
return(
vl.vconcat(tempChart, precipitationChart)//hconcat is horizontal, vconcat is virticle
.resolve({"scale": {"color": "independent"}})
.render()
)
//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.vconcat(vl.hconcat(tempChart,precipChart), windTimeline)
.render()
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/column을 썼기 때문에 이렇게 따로따로볼수있는거임
)
.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 (or rows), 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')
)
//uncomment the following lines below
//.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 C1 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.
