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)
// 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,
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.
