The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Sep 19, 2022
8 stars
html`<h2 style='color:${yourColor}'>Hello, ${yourName}!</h2>`
viewof yourName = html`<input type=text value=${myName}>`
myName = "Anjana"
viewof yourColor = color({value: "#21abc0", title:"Your favorite color"})
import {color} from "@jashkenas/inputs"
letterFrequencyChart = vl.markBar() // Make a bar chart
.data(yourLetters) // Using letter frequency data
.encode(
vl.x().fieldO("letter"), // Show letters in sequential order on the x-axis
vl.y().fieldQ("frequency").axis({ format: "%" }), // Show frequency on the y-axis, formatted as percent
vl.color().value(yourColor) // Set the bar color
)
.render()
// Source: https://observablehq.com/@observablehq/vega-lite-chart-types#simpleBar
yourLetters = letterFrequencies.filter(row => yourName.toUpperCase().includes(row.letter))
import {vl, alphabet as letterFrequencies} from '@observablehq/vega-lite-chart-types'
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.
