Crafting Visual Stories with Data.
Data & Visual
Simple DataSet
// Converting this String into a RowDataSet
// Every Row is a Data
// Every Key / Columns of the row is the Datum
data = d3.csvParse(simple, d3.autoType)
table = Inputs.table(data, { width: 300 })
For our Simple Data, How have we measured it
Area: STRING: Nominal, Geographic (Interval Scale)
Sales: NUMBER: Quantitative
Profit: NUMBER: Quantitative
Sales Column has some relationship between Profit Column
Profit is part of the Sales
vegaEmbed = require("vega-embed")
vegaEmbed({
width: 300,
data: { values: [7, 2, 5, 6, 10] },
mark: "point",
encoding: {
x: { field: "data", type: "N", sort: "descending" }
}
})
vegaEmbed({
width: 300,
data: { values: [1, 2, 5, 6, 10] },
mark: "point",
encoding: {
x: { field: "data", type: "Q" }
}
})
bar = vl
.spec({
data: { values: data },
mark: "bar",
encoding: {
x: { field: "Area", type: "N" },
y: { field: "Sales", type: "Q" }
}
})
.render()
vegaEmbed({
data: { values: data },
mark: "bar",
encoding: {
x: { field: "Area", type: "N" },
y: { field: "Sales", type: "Q" }
}
})
vegaEmbed({
data: { values: data },
mark: { type: "circle", fill: "red", size: 100 },
encoding: {
x: { field: "Area", type: "N" },
y: { field: "Sales", type: "Q" }
}
})
vegaEmbed({
data: { values: data },
layer: [
{ mark: { type: "bar", fill: "blue" } },
{ mark: { type: "circle", fill: "red", size: 150 } }
],
encoding: {
x: { field: "Area", type: "N" },
y: { field: "Sales", type: "Q" }
}
})
vegaEmbed({
width: 400,
data: { values: data },
layer: [
{
mark: { type: "bar", fill: "blue" },
encoding: {
x: { field: "Area", type: "N" },
y: { field: "Sales", type: "Q" }
}
},
{
mark: { type: "circle", fill: "red", size: 150 },
encoding: {
x: { field: "Area", type: "N" },
y: { field: "Profit", type: "Q" }
}
}
]
})
vegaEmbed({
width: 400,
data: { values: data },
layer: [
{
mark: { type: "bar", fill: "blue" },
encoding: {
x: { field: "Area", type: "N" },
y: { field: "Sales", type: "Q" }
}
},
{
mark: { type: "circle", fill: "red", size: 150 },
encoding: {
x: { field: "Area", type: "N" },
y: { field: "Profit", type: "Q" }
}
}
],
resolve: { scale: { y: "independent" } }
})
Data Transformation
Sorting (Ordering)
Filtering
Data which is "Sales > 10"
Aggregating
Line for the Mean Sales
vegaEmbed({
data: { values: data },
transform: [{ filter: "datum.Sales > 10" }],
mark: "bar",
encoding: {
x: { field: "Area", type: "N" },
y: { field: "Sales", type: "Q" }
}
})
// Aggregation
vegaEmbed({
data: { values: data },
transform: [
{ aggregate: [{ op: "mean", field: "Sales", as: "Mean_Sales" }] }
],
mark: "rule",
encoding: {
y: { field: "Mean_Sales", type: "Q" }
}
})
vegaEmbed({
data: { values: data },
mark: "rule",
encoding: {
y: { field: "Sales", type: "Q", aggregate: "mean" }
}
})
vegaEmbed({
width: 300,
data: { values: data },
params: [
{
name: "limit",
value: 10,
bind: { input: "range", min: 0, max: 20, step: 1 }
}
],
transform: [{ filter: "datum.Sales > limit" }],
layer: [
{
mark: "bar",
encoding: {
x: { field: "Area", type: "N" },
y: { field: "Sales", type: "Q" }
}
},
{
mark: { type: "rule", stroke: "red", size: 3 },
encoding: {
y: { field: "Sales", type: "Q", aggregate: "mean" }
}
}
]
})
Grid Layout
Structure: Grid
Mark: Circle
Encoding:
Size: Sales
Size: Profit
vegaEmbed({
width: 100,
data: { values: data },
mark: "circle",
encoding: {
size: { field: "Sales", type: "Q" },
column: { field: "Area", type: "N" }
}
})
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.
