student in cmu
Published
Edited
Oct 24, 2019
md`# Monthly Hours of Sunshine in Major U.S. Cities`
import {uniqueValid} from '@uwdata/data-utilities'
import {data} from '@adamperer/hours-of-sunshine'
arrSumFnc = arr => arr.reduce((a,b) => a + b, 0)
statistical_data= [
{
"city": "Pittsburgh",
"agv_sunshine": Math.floor(arrSumFnc([94,109,155,183,217,242,255,228,197,167,99,74])/12),
"gdp": 56.2
},
{
"city": "Seattle",
"agv_sunshine": Math.floor(arrSumFnc([69,108,178,207,253,268,312,281,221,142,72,52])/12),
"gdp": 80.8
},
{
"city": "Chicago",
"agv_sunshine": Math.floor(arrSumFnc([135,136,187,215,281,311,318,283,226,193,113,106])/12),
"gdp": 61.2
},
{
"city": "New York",
"agv_sunshine": Math.floor(arrSumFnc([154,171,213,237,268,289,302,271,235,213,169,155])/12),
"gdp": 71.1
},
{
"city": "San Francisco",
"agv_sunshine": Math.floor(arrSumFnc([165,182,251,281,314,330,300,272,267,243,189,156])/12),
"gdp": 90
},
{
"city": "Houston",
"agv_sunshine": Math.floor(arrSumFnc([144,141,193,212,266,298,294,281,238,239,181,146])/12),
"gdp": 63.3
},
{
"city": "Miami",
"agv_sunshine": Math.floor(arrSumFnc([222,227,266,275,280,251,267,263,216,215,212,209])/12),
"gdp": 48.1
},
{
"city": "Boston",
"agv_sunshine": 219.4167,
"gdp": 78.465
},
{
"city": "San Diego",
"agv_sunshine": 246.5,
"gdp": 60.5
},
{
"city": "Salt Lake City",
"agv_sunshine": 254.9167,
"gdp": 61.8
},
{
"city": "Phoenix",
"agv_sunshine": 319.3333,
"gdp": 44.5
},
{
"city": "Detroit",
"agv_sunshine": 197.9167,
"gdp": 52.9
},
{
"city": "Baltimore",
"agv_sunshine": 214.9167,
"gdp": 59.1
}
]
citys = ["All"].concat(uniqueValid(data, d => d.city))
VegaLite = require("vega-embed@5")
md`## City Hours of Sunshine`
VegaLite({
title: "Hours of Sunshine",
width: 500,
height: 300,
data: {values: data},
selection: {
select: {
type: "single",
fields: ["city"],
bind: {"input": "select", "options": citys}
}
},
mark: {type: "line", point: true},
encoding: {
x: { field: "month", type: "nominal", "sort": {"op": "sum", "field": "monthnum"}},
y: {field: "sunshine", type: "quantitative"},
color: {
condition: {
selection: "select",
field: "city", type: "nominal"
},
value: "grey"
}
}
})
md`## Sunshine and GDP`
VegaLite({
title: "Sunshine and GDP",
width: 500,
height: 300,
data: {values: statistical_data},
selection: {
select: {
type: "single",
fields: ["city"],
bind: {"input": "select", "options": ["All"].concat(uniqueValid(statistical_data, d => d.city))}
}
},
mark: {type: "point", point: true},
encoding: {
x: { field: "agv_sunshine", type: "quantitative", "sort": {"op": "sum", "field": "agv_sunshine"}},
y: {field: "gdp", type: "quantitative"},
size: {field: "gdp", type: "quantitative"},
color: {
condition: {
selection: "select",
field: "city", type: "nominal"
},
value: "grey"
}
}
})
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.
