Crafting Visual Stories with Data.
simple = `Area,Sales,Profit\nNorth,5,2\nEast,25,8\nWest,15,6\nSouth,20,5\nCentral,10,3`
// Read the data as a simple string into a table
table = d3.csvParse(simple, d3.autoType)
// Show the data as a table
Inputs.table(table)
vl = require("vega-embed")
vl({
width: 300,
height: 300,
data: { values: table },
mark: "bar",
encoding: {
x: { field: "Area", type: "nominal" },
y: { field: "Sales", type: "quantitative" }
}
})
vl({
width: 300,
height: 300,
title: "East & South region are the leaders in Sales",
data: { values: table },
layer: [
{
params: [
{
name: "colorChanger",
select: {
type: "point",
on: "mouseover",
nearest: true
}
}
],
mark: "bar",
encoding: {
x: {
field: "Area",
type: "nominal",
sort: "-y",
axis: { labelAngle: 0, title: "Areas of Operations" }
},
y: {
field: "Sales",
type: "quantitative",
axis: { grid: false, title: "Sales & Average (in INR)" }
},
color: { field: "Sales", type: "quantitative" },
opacity: {
value: 0.5,
condition: {
param: "colorChanger",
value: 1
}
},
size: { value: 40 }
}
},
{
mark: { type: "rule", strokeDash: [1, 0], color: "red" },
encoding: {
y: {
field: "Sales",
type: "quantitative",
aggregate: "mean",
axis: { grid: false }
},
size: { value: 3 },
color: { value: "black" }
}
}
]
})
vl({
width: 300,
height: 300,
data: { values: table },
mark: "rule",
encoding: {
y: {
field: "Sales",
type: "quantitative",
aggregate: "mean",
axis: { grid: false }
}
}
})
vl({
width: 300,
height: 300,
data: { values: table },
mark: "circle",
encoding: {
x: { field: "Area", type: "nominal" },
y: { field: "Sales", type: "quantitative" },
size: { value: 400 },
color: { value: "red" }
}
})
vl({
width: 300,
height: 300,
data: { values: table },
mark: "text",
encoding: {
x: { field: "Area", type: "nominal" },
y: { field: "Sales", type: "quantitative" },
text: { field: "Area", type: "nominal" },
size: { field: "Profit", type: "quantitative" },
color: { value: "red" }
}
})
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.
