Public
Edited
Oct 22, 2022
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:"accent"})
)
const precipChart = vl.markCircle()
.data(Weather)
.encode(
vl.x().fieldQ("precipitation"),
vl.y().fieldQ("wind"),
vl.color().fieldN("weather")
)
return (
vl.vconcat(tempChart, precipChart)
.resolve({scheme:"independant"})
.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）
.config
vl.markBar()
.data(Weather)
.encode(
vl.x().fieldQ('wind').bin(true),
vl.y().aggregate('count'),
//vl.color().fieldN('weather')
vl.row().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.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
vl.markCircle()
.encode(
vl.color().fieldN('weather').scale({scheme:weatherColors})
),
//layer 2
vl.markErrorband({extent: 'stdev'}),
//layer 3
vl.markLine()
.encode(
vl.y().mean('temp_max')
)
)
.render()
//Code for C1 here
const chart1 = vl
.markLine()
.data(Weather)
.encode(
vl.x().fieldO("date").timeUnit("utcyear,utcmonth"),
vl.y().fieldQ("temp_max").aggregate("average"),
)
const chart2 = vl
.markLine()
.data(Weather)
.encode(
vl.x().fieldO("date").timeUnit("utcyear,utcmonth"),
vl.y().fieldQ("precipitation").aggregate("average")
)
return vl(chart1,chart2);
.render()
Stocks
//Code for C2 goes here
//Use dataset Stocks
vl.markline(){
}
//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.
