Crafting Visual Stories with Data.
aq = require("arquero")
// Load the data
rawData = aq.loadCSV(dataUrl, {header: false, names: names })
Inputs.table(rawData)
// As an array of objects
data = rawData.objects()
Q1: What is the range of altitude of airports in India?
Step 1: Filter for India
Step 2: Summarize Max and Min of Altitude
Step 3: Calculate / Derive the Difference of Max & Min
Filter
Take the Data
Apply a condition (function)
// India Filter Function
function indiaFilter(d) {
return d["country"] === "India";
}
// Short Arrow function - Think of d as a row
indiaFilterShort = (d) => d.country === "India"
indiaData = rawData.filter(indiaFilter)
indiaDataShort = rawData.filter(indiaFilterShort)
indiaDataFull = rawData.filter((d) => d["country"] === "India")
import { Wrangler, op } from "@observablehq/data-wrangler"
Wrangler(data)
// To use copied code replace "data" with your own variable
indiaDataWrangler = aq
.from(data)
.filter((d) => d["country"] === "India")
.select("iata", "altitude", "city")
.orderby(aq.desc("altitude"))
Inputs.table(indiaDataWrangler)
vegaEmbed = require("vega-embed")
vegaEmbed({
width: width,
data: { values: indiaDataWrangler },
mark: "point",
encoding: {
x: { field: "iata", type: "nominal", sort: "-y" },
y: { field: "altitude", type: "quantitative" }
}
})
vegaEmbed({
width: width,
data: { values: indiaDataWrangler },
mark: "bar",
encoding: {
x: { field: "iata", type: "nominal", sort: "-y" },
y: { field: "altitude", type: "quantitative" }
}
})
vegaEmbed({
width: width,
data: { values: indiaDataWrangler },
mark: "point",
encoding: {
x: { field: "altitude", type: "quantitative" },
tooltip: { field: "city" }
}
})
vegaEmbed({
width: 400,
heigth: 200,
data: { values: indiaDataWrangler },
mark: "tick",
encoding: {
x: { field: "iata", type: "nominal", axis: null },
color: {
field: "altitude",
type: "quantitative",
axis: null,
scale: { scheme: "spectral" }
},
size: { value: 100 }
},
config: { axis: { grid: false } }
})
vegaEmbed({
width: 400,
heigth: 100,
data: { values: indiaDataWrangler },
mark: "tick",
encoding: {
x: { field: "iata", type: "nominal", axis: null },
color: {
field: "altitude",
type: "quantitative",
axis: null,
scale: {
range: [
"#ffd700",
"#ffb14e",
"#fa8775",
"#ea5f94",
"#cd34b5",
"#9d02d7",
"#0000ff"
]
}
},
size: { value: 100 }
},
config: { axis: { grid: false } }
})
Inputs.table(binnedAltitude)
binnedAltitude = aq
.from(data)
.filter((d) => d["country"] === "India")
.select("iata", "altitude")
.groupby({
bin_start: aq.bin("altitude", { step: 200 }),
bin_end: aq.bin("altitude", { step: 200, offset: 1 })
})
.count()
vegaEmbed({
width: 500,
data: { values: binnedAltitude },
mark: "bar",
encoding: {
x: { field: "bin_start", type: "quantitative" },
x2: { field: "bin_end", type: "quantitative" },
y: { field: "count", type: "quantitative" }
}
})
vegaEmbed({
data: { values: indiaDataWrangler },
mark: "bar",
encoding: {
x: { field: "altitude", type: "quantitative", bin: true },
y: { aggregate: "count", type: "quantitative" }
}
})
table = aq
.from(data)
.select("country")
.groupby("country")
.count()
.orderby(aq.desc("count"))
Inputs.table(table)
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.
