Data Scientist, Author, DataVis, Educator, Speaker, Public Service @ClintonBrownley
https://cbrownley.github.io
Public
Edited
May 24, 2021
{
const selection = vl.selectPoint().on("mouseover");
return vl
.markPoint({ filled: true })
.data(df)
.params(selection)
.encode(
vl.x().fieldQ("value_eur").title("Value in euros"),
vl.y().fieldQ("potential").title("Potential"),
vl
.size()
.fieldO("international_reputation")
.scale({ range: [10, 50, 100, 150, 300] }), // [15, 20, 25, 30, 35]
vl
.color()
.fieldO("international_reputation")
.scale({
range: ["#A18D43", "#DFBC69", "#E9D9A0", "#AAF47A", "#5dDF09"]
})
.title("International reputation")
.legend(null),
vl.opacity().if(selection, vl.value(0.8)).value(0.2),
vl.tooltip(["value_eur", "potential", "international_reputation"])
)
.title("Player Potential vs Value (in Euros) and Reputation")
.width(800)
.height(400)
.render();
}
VegaLite({
width: 800,
height: 400,
data: { values: df },
mark: {
type: "point",
filled: true
},
selection: {
highlight: { type: "single", on: "mouseover" }
},
encoding: {
x: {
field: "value_eur",
type: "quantitative",
title: "Value in euros"
},
y: {
field: "potential",
type: "quantitative",
title: "Potential"
},
size: {
field: "international_reputation",
type: "ordinal",
legend: null,
scale: { range: [10, 50, 100, 150, 300] } // [15, 20, 25, 30, 35]
},
color: {
field: "international_reputation",
type: "ordinal",
title: "International reputation",
scale: { range: ["#A18D43", "#DFBC69", "#E9D9A0", "#AAF47A", "#5dDF09"] }
},
opacity: {
condition: { selection: "highlight", value: 0.8 },
value: 0.2
},
tooltip: [
{ field: "value_eur", type: "quantitative", title: "Value in euros" },
{ field: "potential", type: "quantitative", title: "Potential" },
{
field: "international_reputation",
type: "ordinal",
title: "International reputation"
}
]
}
})
df = FileAttachment("players_20.csv").csv({ typed: true })
//df = d3.csvParse(await FileAttachment("players_20.csv").text(), d3.autoType)
import { vl } from "@vega/vega-lite-api-v5"
VegaLite = require("vega-embed@5")
d3 = require("d3@6")
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.
