Published
Edited
Mar 21, 2019
viewof view = embed(
{
title: "Research question: what attributes lead to a high NBA salary in the 2017/2018 season?",
data: {values: nba},
vconcat: [{
selection: {
brush: {type: "interval", encodings: ["x"]}
},
mark: {type: "bar"},
encoding: {
x: {bin: "true", field: "Age", type: "quantitative", title: "Player Age", scale: {domain: [15, 40]}},
y: {field: "Salary", type: "quantitative", title: "Total Salary ($)", aggregate: "sum"},
color: {
condition: {
field: "Player Name",
title: "Player Name",
selection: "click",
type: "nominal",
legend: false
},
value: "lightgray"
},
tooltip: [
{field: "Player Name", type: "nominal"},
{field: "Age", type: "quantitative", title: "Player Age"},
{field: "Salary", type: "quantitative", title: "Player Salary ($)"}
]
},
width: 800,
height: 400
}, {
hconcat: [{
selection: {click: {encodings: ["color"], type: "multi"}},
transform: [
{filter: {selection: "brush"}}
],
mark: {type: "point", stroke: "true"},
encoding: {
x: {field: "PTS", type: "quantitative", title: "Points", scale: {domain: [0, 2500]}},
y: {field: "Salary", type: "quantitative", title: "Player Salary ($)", scale: {domain: [0, 35000000]}},
color: {
condition: {
field: "Player Name",
title: "Player Name",
selection: "click",
type: "nominal",
legend: false
},
value: "lightgray"
},
tooltip: [
{field: "Player Name", type: "nominal"},
{field: "PTS", type: "quantitative", title: "Points"},
{field: "Salary", type: "quantitative", title: "Player Salary ($)"}
]
},
width: 200,
height: 200
}, {
selection: {click: {encodings: ["color"], type: "multi"}},
transform: [
{filter: {selection: "brush"}}
],
mark: {type: "point", stroke: "true"},
encoding: {
x: {field: "TRB", type: "quantitative", title: "Rebounds", scale: {domain: [0, 1200]}},
y: {field: "Salary", type: "quantitative", title: "Player Salary ($)", scale: {domain: [0, 35000000]}},
color: {
condition: {
field: "Player Name",
title: "Player Name",
selection: "click",
type: "nominal",
legend: false
},
value: "lightgray"
},
tooltip: [
{field: "Player Name", type: "nominal"},
{field: "TRB", type: "quantitative", title: "Total Rebounds"},
{field: "Salary", type: "quantitative", title: "Player Salary ($)"}
]
},
width: 200,
height: 200
}, {
selection: {click: {encodings: ["color"], type: "multi"}},
transform: [
{filter: {selection: "brush"}}
],
mark: {type: "point", stroke: "true"},
encoding: {
x: {field: "AST", type: "quantitative", title: "Assists", scale: {domain: [0, 1000]}},
y: {field: "Salary", type: "quantitative", title: "Player Salary ($)", scale: {domain: [0, 35000000]}},
color: {
condition: {
field: "Player Name",
title: "Player Name",
selection: "click",
type: "nominal",
legend: false
},
value: "lightgray"
},
tooltip: [
{field: "Player Name", type: "nominal"},
{field: "AST", type: "quantitative", title: "Assists"},
{field: "Salary", type: "quantitative", title: "Player Salary ($)"}
]
},
width: 200,
height: 200
}]
}, {
hconcat: [{
selection: {click: {encodings: ["color"], type: "multi"}},
transform: [
{filter: {selection: "brush"}}
],
mark: {type: "point", stroke: "true"},
encoding: {
x: {field: "Height(cm)", type: "quantitative", title: "Height (cm)", scale: {domain: [170, 230]}},
y: {field: "Salary", type: "quantitative", title: "Player Salary ($)", scale: {domain: [0, 35000000]}},
color: {
condition: {
field: "Player Name",
title: "Player Name",
selection: "click",
type: "nominal",
legend: false
},
value: "lightgray"
},
tooltip: [
{field: "Player Name", type: "nominal"},
{field: "Height(cm)", type: "quantitative", title: "Height(cm)"},
{field: "Salary", type: "quantitative", title: "Player Salary ($)"}
]
},
width: 200,
height: 200
}, {
selection: {click: {encodings: ["color"], type: "multi"}},
transform: [
{filter: {selection: "brush"}}
],
mark: {type: "point", stroke: "true"},
encoding: {
x: {field: "Weight", type: "quantitative", title: "Weight (lb)", scale: {domain: [150, 300]}},
y: {field: "Salary", type: "quantitative", title: "Player Salary ($)", scale: {domain: [0, 35000000]}},
color: {
condition: {
field: "Player Name",
title: "Player Name",
selection: "click",
type: "nominal",
legend: false
},
value: "lightgray"
},
tooltip: [
{field: "Player Name", type: "nominal"},
{field: "Weight", type: "quantitative", title: "Weight (lb)"},
{field: "Salary", type: "quantitative", title: "Player Salary ($)"}
]
},
width: 200,
height: 200
}]
}]
})
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.
