seattleWeatherTyped = d3.csv("https://raw.githubusercontent.com/vega/vega-datasets/next/data/seattle-weather.csv", d3.autoType)
// start here!
import {render} from "@vega/vega-lite-api-v5"
projections = ['naturalEarth1',
'albers',
'azimuthalEqualArea',
'azimuthalEquidistant',
'conicConformal',
'conicEqualArea',
'conicEquidistant',
'equirectangular',
'identity',
'gnomonic',
'mercator',
'orthographic',
'stereographic',
'transverseMercator']
render({
title: {
text:'Maximum Temperatures in Seattle from 2012 to 2015',
subtitle:'Select a Point to see the value|Double click to clear'
},
data: {
values: seattleWeatherTyped
},
mark:'point',
params: [{
name: 'selected_point',
select: {
type: 'point',
fields:['temp_max'],
nearest: true,
clear: 'dblclick'
}
}],
transform: [{
filter: "!selected_point.temp_max||datum.temp_max >= selected_point.temp_max"
}],
mark: {
type: 'point'
},
encoding: {
x: {
field: 'date',
type: 'temporal',
title: 'Date',
scale:{
domain:['2012-01-01','2016-01-01']
}
},
y: {
field: 'temp_max',
type: 'quantitative',
title: 'Max Temperature',
scale:{
domain:[-5,40]
}
},
color: {
field: 'weather',
type: 'nominal',
title: 'Type of Weather'
}
}
})
render({
title: {
text:'Maximum Temperatures in Seattle from 2012 to 2015',
subtitle:'Select a Point to see the value|Double click to clear'
},
data: {
values: seattleWeatherTyped
},
mark:'point',
params: [{
name: 'selected_range',
select: {
type: 'interval'
}
}],
mark: {
type: 'point'
},
encoding: {
x: {
field: 'date',
type: 'temporal',
title: 'Date',
scale:{
domain:['2012-01-01','2016-01-01']
}
},
y: {
field: 'temp_max',
type: 'quantitative',
title: 'Max Temperature',
scale:{
domain:[-5,40]
}
},
color: {
field: 'weather',
type: 'nominal',
title: 'Type of Weather'
}
}
})
render({
vconcat: [
{
title: {
text: 'Maximum Temperatures in Seattle from 2012 to 2015',
subtitle: 'Select a Point to see the value | Double click to clear'
},
data: {
values: seattleWeatherTyped
},
mark: 'point',
params: [{
name: 'selected_range',
select: {
type: 'interval'
}
}],
encoding: {
x: {
field: 'date',
type: 'temporal',
title: 'Date',
scale: {
domain: ['2012-01-01', '2016-01-01']
}
},
y: {
field: 'temp_max',
type: 'quantitative',
title: 'Max Temperature',
scale: {
domain: [-5, 40]
}
},
color: {
field: 'weather',
type: 'nominal',
title: 'Type of Weather'
}
}
},
{
title: {
text: 'Maximum Temperatures in Seattle from 2012 to 2015',
subtitle: 'Select a Point to see the value | Double click to clear'
},
data: {
values: seattleWeatherTyped
},
mark: 'point',
params: [{
name: 'selected_range',
select: {
type: 'interval'
}
}],
encoding: {
x: {
field: 'date',
type: 'temporal',
title: 'Date',
scale: {
domain: ['2012-01-01', '2016-01-01']
}
},
y: {
field: 'temp_max',
type: 'quantitative',
title: 'Max Temperature',
scale: {
domain: [-5, 40]
}
},
color: {
field: 'weather',
type: 'nominal',
title: 'Type of Weather'
}
}
}
]
})
seattlezipcodes=d3.json("https://static.us.edusercontent.com/files/AbHqeGBGSdHGzHwpIOaDqh4t")
render({
mark:"geoshape",
"data":{
"values":seattlezipcodes.features
}
})
viewof selectedprojection =Inputs.select(projections,{label:'Select a projection'})
render({
mark:"geoshape",
"data":{
"values":seattlezipcodes.features
},
"projection":{
"type":selectedprojection,
"reflectY":true
}
})
render({
mark:"geoshape",
"data":{
"values":seattlezipcodes.features
},
"projection":{
"type":"mercator"
},
"encoding":{
"color":{
"field":'properties.GEOID10'
}
}
})
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.
