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'},
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.
render({
mark: { type: "line" }, // use a "line" mark type
data: { values: data }, // use the pre-loaded weather data
encoding: {
x: {field: 'month', type: 'ordinal', axis: {title: null}, sort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']},
y: {field: 'sunshine_hours', type: 'quantitative', title: 'Hours of Sunshine'},
color: {field: 'city', type: 'nominal', title: 'City', 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