Public
Edited
Feb 26
seattleWeatherData = d3.csv("https://raw.githubusercontent.com/vega/vega-datasets/next/data/seattle-weather.csv", d3.autoType)
seattleWeatherTyped = d3.csv("https://raw.githubusercontent.com/vega/vega-datasets/next/data/seattle-weather.csv", d3.autoType)
import {render} from "@vega/vega-lite-api-v5"
render({
title: "Histogram of Max Temps in Seattle (2012-2015)",
mark: {
type: "bar",
color: "pink",
stroke: "blue",
strokeWidth: 5,
opacity: 0.7
},
data: {
values: seattleWeatherData
},
encoding: {
x: {
field: "temp_max",
type: "quantitative",
bin: true,
title: "max temp"
},
y: {
aggregate: "count",
title: "num"
}
}
})
render({
title: "Histogram of Max Temps in Seattle (2012-2015)",
mark: {
type: "bar",
color: "pink",
stroke: "blue",
strokeWidth: 5,
opacity: 0.7
},
data: {
values: seattleWeatherData
},
encoding: {
x: {
field: "temp_max",
type: "quantitative",
bin: true,
title: "max temp"
},
y: {
aggregate: "count",
title: "num"
}
}
})
render({
title: "Histogram of Maximum Temperatures in Seattle from 2012 to 2015",
data: {
values: seattleWeatherData
},
params: [
{
name: 'bar_color',
value: 'purple',
bind: {
input: 'select',
options: ['purple', 'blue', 'pink', 'orange'],
labels: ['Purple Fill', 'Blue Fill', 'Pink Fill', 'Orange Fill'],
},
title: 'Bar Color: '
}
],
mark: {
type: 'bar',
color: {
expr: 'bar_color'
},
stroke: 'blue',
strokeWidth: 5,
opacity: 0.7
},
encoding: {
x: {
field: 'temp_max',
type: 'quantitative',
bin: true,
title: 'Maximum Temperature'
},
y: {
aggregate: 'count',
title: 'Num'
}
}
})
render({
title: "Histogram of Maximum Temperatures in Seattle from 2012 to 2015",
data: {
values: seattleWeatherData
},
params: [
{
name: 'bar_color',
value: 'purple',
bind: {
input: 'select',
options: ['purple', 'blue', 'pink', 'orange'],
labels: ['Purple Fill', 'Blue Fill', 'Pink Fill', 'Orange Fill'],
name: 'Bar Color: '
}
},
{
name: 'border_radius',
value: 2,
bind: {
input: 'range',
max: 20,
min: 0,
step: 1,
name: 'Border Radius: '
}
}
],
mark: {
type: 'bar',
color: {
expr: 'bar_color'
},
opacity: 0.7,
cornerRadius: {
expr: 'border_radius'
}
},
encoding: {
x: {
field: 'temp_max',
type: 'quantitative',
bin: true,
title: 'Maximum Temperature'
},
y: {
aggregate: 'count',
title: 'Num'
}
}
})
render({
title: "Scatter Plot of Max Temps in Seattle (2012-15)",
width: 800,
height: 300,
mark: {
type: "point",
opacity: 0.7
},
params: [
{
name: "max_temp",
value: -5,
bind: {
input: "range",
min: -5,
max: 40,
step: 1
}
}
],
transform: [
{
filter: "|| datum.temp_max >= selected_point.temp_max"
}
],
data: {
values: seattleWeatherTyped
},
encoding: {
x: {
field: "date",
type: "temporal",
title: "date",
scale: {
domain: ['2012-01-01', '2016-01-01']
}
},
y: {
field: "temp_max",
type: "quantitative",
scale: {
domain: [-5, 40]
}
},
color: {
field: "temp_max",
type: "quantitative",
scale: {
domain: [-5, 40]
},
title: "Maximum Temp"
}
}
})
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.
