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").scale({ scheme: "tableau10" })
)
return(
vl.hconcat(tempChart, precipChart)
.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)
.config({ concat: { spacing: 0 } })
.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
)
.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_min', 'temp_max', 'wind'])
//.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) //2
.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.markLine({color: 'red'})
.encode(
vl.y().mean('temp_max')
),
//layer 3
vl.markErrorband({extent: 'stdev', color: 'brown'})
)
.render()
dotCharts = vl.markCircle()
.data(Weather)
.encode(
vl.x().fieldQ(vl.repeat('repeat')),
vl.y().fieldQ('wind'),
vl.color().fieldN('weather')
)
.repeat(['temp_min', 'temp_max'])
{
const dotCharts = vl.markCircle()
.data(Weather)
.encode(
vl.x().fieldQ(vl.repeat('repeat')),
vl.y().fieldQ('wind'),
vl.color().fieldN('weather')
)
.repeat(['temp_min', 'temp_max'])
const barCharts = vl.markBar()
.data(Weather)
.encode(
vl.x().fieldQ('wind').bin(true),
vl.y().aggregate('count'),
vl.color().fieldN('weather')
)
const lineCharts = vl.markLine()
.data(Weather)
.encode(
vl.x().fieldT('date').timeUnit('utcmonth'),
vl.y().mean('wind'),
vl.color().fieldN('weather')
)
.width(675)
return vl.vconcat(vl.hconcat(dotCharts, barCharts), lineCharts)
.config({ concat: { spacing: 0 } })
.render()
}
//Code for C1 here
Stocks
//Code for C2 goes here
//Use dataset Stocks
vl.markLine()
.data(Stocks)
.encode(
vl.x().fieldT('date'),
vl.y().fieldQ('price'),
vl.column().fieldN('symbol')
)
.render()
penguins = d3.csvParse(await FileAttachment("penguins.csv").text())
penguinsParsed = penguins.values = (penguins.values === "NA") ? null : penguins.values;
penguinParse = {
for (let i = 0; i < penguins.length; i++) {
if (penguins[i].culmen_length_mm == "NA") {penguins[i] = null}
}
return penguins;
}
//Code for C3 goes here
//Use dataset penguins and play around with making different sizes of your scatterplot matrix (2x2, 3x3, 4x4, etc...)
vl.markCircle()
.data(penguins)
.encode(
vl.x().fieldQ(vl.repeat('column')),
vl.y().fieldQ(vl.repeat('row')),
vl.color().fieldN('island')
)
.repeat({
row: ['species', 'sex'],
column: ['culmen_length_mm', 'culmen_depth_mm', 'flipper_length_mm', 'body_mass_g']
})
// .columns(3)
.render()
Stocks
//Code for C4 goes here
//Use dataset Stocks
vl.data(Stocks)
.encode(
vl.x().fieldT('date').timeUnit('utcyear'),
vl.y().mean('price'),
vl.color().scale({scheme: 'set1'})
)
.layer(
vl.markBar({color: 'lightgrey'})
.encode(
vl.aggregate('mean'),
// vl.color().scale({color: 'grey',opacity: 0.5})
),
vl.markLine()
.encode(
vl.color().fieldN('symbol')
)
)
.render()
//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.
