Crafting Visual Stories with Data.
y = x * 3
x = 67
z = 67
We can link the cells using dollar and curly bracket syntax
I am calculating the three multiple for ${x}, which is ${y}
<p style="font-size: 24px; color: red"> I am calculating the three multiple for ${x}, which is ${y} </p>
text = "hello"
// Here we are pasting our data
data = `area,sales,profit
north,5,2
east,25,8
west,15,6
south,20,5
central,10,3`
manualData = d3.csvParse(data, d3.autoType)
url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTPCMJ8uhkpU11KCRyov3p0uy5Tazcumq-al0HcMx-4fx3cvxZTYJ2WBqy5yGZUFoDo8TK5BC-4rS-c/pub?gid=0&single=true&output=csv"
sheetsData = d3.csv(url, d3.autoType)
Inputs.table(sheetsData, { width: 400 })
// Mark: barY
// Channel x: area
// Channel y: sales
Plot.barY(sheetsData, { x: "area", y: "sales" }).plot()
Plot.plot({
marks: [
Plot.barY(sheetsData, { x: "area", y: "profit", fill: color }),
Plot.barY(sheetsData, { x: "area", y: "sales", opacity: 0.5 })
]
})
viewof color = Inputs.radio(["red", "green", "yellow"], {
label: "Choose a color",
value: "red"
})
// Mark: barY
// Channel x: area
// Channel y: sales
// Channel color: red
Plot.barY(sheetsData, {
x: "area",
y: "sales",
fill: "profit",
opacity: 0.5,
stroke: "black"
}).plot()
Plot.dot(sheetsData, { x: "profit", y: "sales" }).plot()
foldedData = aq.from(sheetsData).fold(["sales", "profit"]).objects()
Inputs.table(foldedData, { width: 400 })
vegaEmbed({
width: 600,
height: 400,
data: { values: foldedData },
mark: "bar",
encoding: {
x: { field: "area", type: "nominal", axis: { labelAngle: 0 } },
y: { field: "value", type: "quantitative" },
xOffset: { field: "key" },
color: { field: "key" }
}
})
vegaEmbed = require("vega-embed")
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.
