Crafting Visual Stories with Data.
Published
Edited
Aug 23, 2018
md`
# Workshop
*Introduction* to **Visualisation**
- Bullet 1
- Bullet 2
[Link to amitkaps website](http://amitkaps.com)
`
vegalite({
data: {url: dataUrl},
mark: "circle",
encoding:{
x: {field: "sales", type: "Q"},
y: {field: "profit", type: "Q"},
color: {field: "area", type: "N"},
size: {field: "profit", type: "Q"},
}
})
vegalite({
width: 400,
height: 300,
data: {url: dataUrl},
transform: [
{filter: "datum.sales > 10"}
],
mark: "bar",
encoding:{
x: {field: "area", type: "N"},
y: {field: "sales", type: "Q"},
color: {field: "profit", type: "Q"}
}
})
vegalite({
width: 400,
height: 300,
data: {url: dataUrl},
mark: {type: "line", color: "green", point: {color: "red"}},
encoding:{
x: {field: "area", type: "N"},
y: {field: "sales", type: "Q"}
}
})
vegalite({
width: 400,
height: 300,
data: {url: dataUrl},
selection: {"barSelect": {type: "single", on: "mouseover"}},
mark: "bar",
encoding:{
x: {field: "area", type: "N"},
y: {field: "sales", type: "Q"},
color: {condition: {selection: "barSelect", field: "profit", type: "Q"}, value: "red"}
}
})
dataUrl = "https://visdown.com/data/sample.csv"
vegalite = require("@observablehq/vega-lite@0.1")
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.
