Published
Edited
Apr 8, 2020
Insert cell
md`# React Test`
Insert cell
alphabet = d3.csvParse(await FileAttachment("alphabet.csv").text())

Insert cell
viewof simpleBar = vl.markBar() // Make a bar chart
.data(alphabet) // Using the alphabet data
.encode(
vl.x().fieldO("letter"), // .sort(vl.fieldQ("frequency").order("descending")), // Letters are ordinal on the x-axis
vl.y().fieldQ("frequency").axis({ format: "%" }) // Frequency on the y-axis, formatted as percent
)
.render()
Insert cell
d3 = require("d3-dsv@1", "d3-fetch@1")
Insert cell
import { vl } from "@vega/vega-lite-api"
Insert cell

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.
Learn more