Crafting Visual Stories with Data.
data
Inputs.table(data)
zoneData = aq.loadCSV(url)
Inputs.table(zoneData)
dataAttach = FileAttachment("Coding Sheets & Observable - HTML.csv").csv()
aq = require("arquero")
indiaData = aq.from(data).filter((d) => d["country"] === "India")
Inputs.table(indiaData)
vegaEmbed = require("vega-embed")
themeConfig = ({
width: 800,
legend: {
orient: "bottom-left",
gradientDirection: "horizontal",
symbolDirection: "horizontal"
}
})
Visual Representation
Mark: Point
Structure: Rectangular
Encoding:
PositionX -> Scale (Domain Min(0) to Max(10,682) -> Linear -> Extent 0 pixel - 800 pixel)
Color -> Scale (Domain Min(0) to Max(10,682) -> LinearGradient -> Extent Light Blue --- Dark Blue)
vegaEmbed({
width: 800,
data: { values: indiaData },
mark: "point",
encoding: {
x: { field: "altitude", type: "quantitative" },
opacity: { value: 0.3 }
},
config: { legend: { orient: "bottom-left" } }
})
vegaEmbed({
width: 800,
data: { values: indiaData },
mark: "point",
encoding: {
x: { field: "altitude", type: "quantitative" },
color: {
field: "altitude",
type: "quantitative",
legend: { orient: "top-left", offset: 40 }
}
}
})
vegaEmbed({
width: 800,
data: { values: indiaData },
mark: "point",
encoding: {
x: { field: "altitude", type: "quantitative", scale: { type: "symlog" } },
color: { field: "altitude", type: "quantitative" }
},
config: { legend: { orient: "top-left", offset: 40 } }
})
vegaEmbed({
width: 800,
data: { values: indiaData },
mark: "point",
encoding: {
x: { field: "altitude", type: "quantitative", scale: { type: "symlog" } },
color: {
field: "altitude",
type: "quantitative",
bin: true,
legend: { orient: "top-left", offset: 40, direction: "horizontal" }
}
}
})
vegaEmbed(
{
data: { values: indiaData },
mark: "circle",
encoding: {
x: { field: "altitude", type: "quantitative", scale: { type: "symlog" } },
color: {
field: "altitude",
type: "quantitative",
scale: { type: "quantile" },
legend: {
type: "quantile",
orient: "top-left",
offset: 60,
direction: "horizontal"
}
}
}
},
themeConfig
)
vegaEmbed({
width: 800,
data: { values: indiaData },
mark: "circle",
encoding: {
x: { field: "altitude", type: "quantitative", scale: { type: "symlog" } },
size: {
field: "altitude",
type: "quantitative",
scale: { type: "sqrt" },
legend: {
type: "quantile",
orient: "top-left",
offset: 40,
direction: "horizontal"
}
}
}
})
vegaEmbed(
{
width: 400,
height: 400,
projection: { type: "mercator" },
data: { values: indiaData },
mark: "circle",
encoding: {
latitude: { field: "lat", type: "quantitative" },
longitude: { field: "lon", type: "quantitative" },
size: { field: "altitude", type: "quantitative" }
}
},
themeConfig
)
vegaEmbed(
{
width: 400,
height: 400,
data: { values: indiaData },
transform: [{ filter: "datum.altitude > 3000" }],
mark: { type: "arc", padAngle: "0.1" },
encoding: {
radius: { field: "altitude", type: "quantitative" },
theta: { field: "city", type: "nominal", sort: "-radius" }
}
},
themeConfig
)
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.
