Published
Edited
Sep 23, 2019
1 fork
vl.markBar({stroke:"black",fill:"pink"})
.width(500)
.data(data)
.encode(
vl.x().fieldN("nameLast").sort({field:"HR",order:"descending"}),
vl.y().fieldQ("HR"),
vl.color().fieldN("yearID"),
vl.tooltip(["HR","yearID","nameLast"]),
vl.order().fieldQ("yearID")
)
.render()
data = [
{
"nameLast": "Allen",
"yearID": 1976,
"HR": 15
},
{
"nameLast": "Boone",
"yearID": 1976,
"HR": 4
},
{
"nameLast": "Boone",
"yearID": 1977,
"HR": 11
},
{
"nameLast": "Boone",
"yearID": 1978,
"HR": 12
},
{
"nameLast": "Boone",
"yearID": 1979,
"HR": 9
},
{
"nameLast": "Boone",
"yearID": 1980,
"HR": 9
},
{
"nameLast": "Hebner",
"yearID": 1977,
"HR": 18
},
{
"nameLast": "Hebner",
"yearID": 1978,
"HR": 17
},
{
"nameLast": "Johnstone",
"yearID": 1976,
"HR": 5
},
{
"nameLast": "Johnstone",
"yearID": 1977,
"HR": 15
},
{
"nameLast": "Johnstone",
"yearID": 1978,
"HR": 0
},
{
"nameLast": "Luzinski",
"yearID": 1976,
"HR": 21
},
{
"nameLast": "Luzinski",
"yearID": 1977,
"HR": 39
},
{
"nameLast": "Luzinski",
"yearID": 1978,
"HR": 35
},
{
"nameLast": "Luzinski",
"yearID": 1979,
"HR": 18
},
{
"nameLast": "Luzinski",
"yearID": 1980,
"HR": 19
},
{
"nameLast": "Maddox",
"yearID": 1976,
"HR": 6
},
{
"nameLast": "Maddox",
"yearID": 1977,
"HR": 14
},
{
"nameLast": "Maddox",
"yearID": 1978,
"HR": 11
},
{
"nameLast": "Maddox",
"yearID": 1979,
"HR": 13
},
{
"nameLast": "Maddox",
"yearID": 1980,
"HR": 11
},
{
"nameLast": "Martin",
"yearID": 1976,
"HR": 2
},
{
"nameLast": "Martin",
"yearID": 1977,
"HR": 6
},
{
"nameLast": "Martin",
"yearID": 1978,
"HR": 9
},
{
"nameLast": "McBride",
"yearID": 1977,
"HR": 11
},
{
"nameLast": "McBride",
"yearID": 1978,
"HR": 10
},
{
"nameLast": "McBride",
"yearID": 1979,
"HR": 12
},
{
"nameLast": "McBride",
"yearID": 1980,
"HR": 9
},
{
"nameLast": "Schmidt",
"yearID": 1976,
"HR": 38
},
{
"nameLast": "Schmidt",
"yearID": 1977,
"HR": 38
},
{
"nameLast": "Schmidt",
"yearID": 1978,
"HR": 21
},
{
"nameLast": "Schmidt",
"yearID": 1979,
"HR": 45
},
{
"nameLast": "Schmidt",
"yearID": 1980,
"HR": 48
},
{
"nameLast": "Trillo",
"yearID": 1979,
"HR": 6
},
{
"nameLast": "Trillo",
"yearID": 1980,
"HR": 7
}
]
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.
