Crafting Visual Stories with Data.
x = 1 + 2
viewof y = Inputs.range([0, 100], {label: "Amount", step: 1})
x + y
<h1>Hello Observablehq </h1>
<p> This is written using html</p>
<p> ${y}</p>
Hello Markdown
Subheading h2
Subheading h3
This is written in italics using markdown with bold
You can reference a variable ${y}
List 1
List 2
List 3
45
45 * foo
foo = 56
foo * foo
k = "hello"
z = "world"
k + z
`This is a string on two lines
hello there`
true
5 > 4
truth = 5
myrange = [32, 43, 22, 34, 43, 54]
myrange.length
myrange[0]
superpowers = ["india", "china", "us", "russia", "britian"]
superpowers[3]
Objects {}
superera = ({
india: "past",
china: "upcoming",
us: "present",
russia: "may be not",
britain: "brexit"
})
superera.india
dataColumns = ({
area: ["North", "East", "West", "South", "Central"],
sales: [5, 25, 10, 20, 5],
profit: [2, 6, 8, 3, 5]
})
dataRows = [
{ area: "north", sales: 5, profit: 2 },
{ area: "east", sales: 25, profit: 6 },
{ area: "west", sales: 10, profit: 8 },
{ area: "south", sales: 20, profit: 3 },
{ area: "central", sales: 5, profit: 5 }
]
function sum(a, b) {
return a + b;
}
sum(3, 5)
url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTtkxwSfjDnHU4ngwXiXKzg_cEEoiiC6E1_lL4TkeciLlL36XoEKoSC6HBeO-K80yF-WtqepsbqK9GY/pub?gid=0&single=true&output=csv"
sample = d3.csv(url, d3.autoType)
viewof table = Inputs.table(sample)
Attach Data
exampleData = FileAttachment("Example - data.csv").csv()
viewof param = Inputs.select(["Sales", "Profit"], { label: "Select one" })
Plot.plot({
marks: [
Plot.barY(sample, {
x: "Area",
y: param,
fill: "blue",
sort: { x: "y", reverse: true }
})
]
})
Plot.plot({
marks: [
Plot.barY(sample, {
x: "Area",
y: "Sales",
sort: { x: "y", reverse: true }
}),
Plot.barY(sample, {
x: "Area",
y: "Profit",
fill: "red",
sort: { x: "y", reverse: true }
})
]
})
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.
