Public
Edited
Apr 3
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = FileAttachment("city-weather.json").json()
Insert cell
Insert cell
Insert cell
// Fill in the encodings below to complete the task.
// See also https://vega.github.io/vega-lite/docs/encoding.html
render({
mark: { type: "line" }, // use a "line" mark type
data: { values: data }, // use the pre-loaded weather data
encoding: {
x: {field: 'month_num',
type:'quantitative',
"axis": {
"grid": true,
"labelAngle": 0
}
},
y: {field: 'sunshine_hours', type: 'quantitative'},
color: {field: 'city', type: 'nominal'}
},
width: 600
})
Insert cell
Insert cell
Insert cell
Insert cell
// Fill in this code block to complete the task.
// Start by copying your code from Task 1 above,
// then modify it as needed.

// Fill in the encodings below to complete the task.
// See also https://vega.github.io/vega-lite/docs/encoding.html
render({
mark: { type: "line" }, // use a "line" mark type
data: { values: data }, // use the pre-loaded weather data
encoding: {
x: {field: 'month',
type:'nominal',
sort:{field: 'month_num'},
"axis": {
"grid": false,
"labelAngle": 0,
title: " "
}
},
y: {field: 'sunshine_hours', type: 'quantitative', axis: {title: "Hours of Sunshine"}},
color: {field: 'city', type: 'nominal', sort:["Miami", "San Francisco", "New York", "Houston", "Chicago", "Seattle"]}
},
width: 600
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more