I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
data = FileAttachment("fifaData.csv").csv({ typed: true })
Inputs.table(data)
{
const base = vl
.markBar()
.encode(vl.y().fieldN("Position"), vl.x().count())
.height(200)
.width(200);
return vl
.concat(base, base.encode(vl.y().fieldN("Nationality")))
.data(data)
.render();
}
{
const histGenerator = (attr) =>
vl
.markBar()
.encode(vl.y().fieldN(attr), vl.x().count())
.height(200)
.width(200);
return vl
.concat(
histGenerator("Position"),
histGenerator("Nationality"),
histGenerator("Preferred Foot")
)
.columns(2)
.data(data)
.render();
}
{
const scatGenerator = (x, y) =>
vl
.markPoint({ tooltip: true })
.encode(
vl.y().fieldQ(y),
vl.x().fieldQ(x),
vl.tooltip(["Name", "Overall", "Potential"])
)
.height(100)
.width(100);
return vl
.concat(
scatGenerator("Overall", "Overall"),
scatGenerator("Potential", "Overall"),
scatGenerator("Finishing", "Overall"),
scatGenerator("Overall", "Potential"),
scatGenerator("Potential", "Potential"),
scatGenerator("Finishing", "Potential"),
scatGenerator("Overall", "Finishing"),
scatGenerator("Potential", "Finishing"),
scatGenerator("Finishing", "Finishing")
)
.columns(3)
.data(data)
.render();
}
import { vl } from "@vega/vega-lite-api-v5"
md`## Vega-Lite API Layering`
{
const base = vl
.markCircle({ tooltip: true, opacity: 0.3, size: 10 })
.encode(
vl.x().fieldQ("Overall").scale({ zero: false }),
vl.y().fieldQ("Finishing").scale({ zero: false }),
vl.color().fieldN("Preferred Foot")
);
return base.data(data).render();
}
{
const base = vl
.markCircle({ tooltip: true, opacity: 0.1, size: 10 })
.encode(
vl.x().fieldQ("Overall").scale({ zero: false }),
vl.y().fieldQ("Finishing").scale({ zero: false }),
vl.color().fieldN("Preferred Foot"),
vl
.facet()
.fieldN("Position")
.columns(Math.floor((width * 0.7) / 100))
)
.width(100)
.height(100);
return base.data(data).render();
}
{
const base = vl
.markBar()
.encode(vl.y().fieldN("Position"), vl.x().count())
.height(300);
return vl
.layer(
base.encode(
vl
.color()
.if("datum.Position == 'LB'", vl.value("firebrick"))
.value("steelblue")
),
base
.markText({ align: "left", dx: 3, fontSize: 8 })
.encode(vl.text().count())
// base.markRule().encode(vl.x().value(800))
)
.data(data)
.render();
}
md`## Vega-Lite API Interactions`
viewof myAwesomeChart = {
const brush = vl.selectInterval();
const base = vl
.markBar({ tooltip: true })
.select(brush)
.encode(
vl.y().fieldN("Position"),
vl.x().count(),
vl.color().if(brush, vl.value("steelblue")).value("#777")
)
.height(200)
.width(200);
const scatterBase = vl
.markPoint({ opacity: 0.01 })
.encode(
vl.x().fieldQ("Overall"),
vl.y().fieldQ("Finishing"),
vl.color().value("#777")
);
const scatterLayered = vl.layer(
scatterBase,
scatterBase
.markPoint({ opacity: 0.3 })
.transform(vl.filter(brush))
.encode(vl.color().value("steelblue"))
);
return vl.concat(base, scatterLayered).data(data).render();
}
vegaDataViewer(myAwesomeChart)
import {vegaDataViewer} from "@john-guerra/vega-data-viewer"
vegaCrossfilter(data.slice(0, 1100), ["Position", "Overall"])
import { vegaCrossfilter } from "@john-guerra/vega-crossfilter"
brushable = {
const brush = vl.selectInterval();
const base = vl
.markBar({ tooltip: true })
.select(brush)
.encode(
vl.y().fieldN("Position"),
vl.x().count(),
vl.color().if(brush, vl.value("steelblue")).value("#777")
)
.height(200)
.width(200);
const scatterBase = vl
.markPoint({ opacity: 0.01 })
.encode(
vl.x().fieldQ("Overall"),
vl.y().fieldQ("Finishing"),
vl.color().value("#777")
);
const scatterLayered = vl.layer(
scatterBase,
scatterBase
.markPoint({ opacity: 0.3 })
.transform(vl.filter(brush))
.encode(vl.color().value("steelblue"))
);
return vl.concat(base, scatterLayered).data(data).toSpec();
}
viewof selectedElements = vegaSelected(brushable)
selectedElements
import { vegaSelected } from "@john-guerra/vega-selected"
md`## Notebook versioning`
md`
|Related resources |
| -- | -- |
| Vega-Lite API Custom Charts | <iframe width="200" src="https://www.youtube.com/embed/hJUFg3Ldmks" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| Marks and Channels with Vega-Lite | <iframe width="200" src="https://www.youtube.com/embed/B8Cq-dfgELQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| Donut chart with Vega-Lite API | <iframe width="200" src="https://www.youtube.com/embed/mUJ-WTvKAtU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| Temporal Visualizations with Vega-Lite API | <iframe width="200" src="https://www.youtube.com/embed/epsBLcPaSNk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| Node Link Network Visualizations with Vega-Lite and D3 | <iframe width="200" src="https://www.youtube.com/embed/sZ3dwB-weg8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| Trees with Vega-Lite API | <iframe width="200" src="https://www.youtube.com/embed/xswb_WjYFj0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| Maps with Vega-Lite API | <iframe width="200" src="https://www.youtube.com/embed/wx5SZG-aPDI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| Animations with Vega-Lite API | <iframe width="200" src="https://www.youtube.com/embed/hfE_iuzDYwY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| Faceting into multiple views with Vega-Lite API | <iframe width="200" src="https://www.youtube.com/embed/Bo9BV9BsPwU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
_Break_
11:50 - 12:00
`
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.
