The avatar for @ccalobeto
Carlos Leon
Engineer & data visualization lover | Tae Bo Enthusiast
Public
Edited
Mar 7, 2023
1
Insert cell
# Series: Learning Observable
Insert cell
### Observable en Español
Insert cell
Insert cell
vegaDatasets = require("vega-datasets@2")
Insert cell
vegaDatasets
Insert cell
To run in a javascript server type www.codepen.io or look inside observable, with handy embed generator
Insert cell
## 1. Notebooks and cells
Insert cell
Plot.plot({
marks: [
Plot.dot(cars, {x: "power (hp)", y: "economy (mpg)"})
]
})
Insert cell
Insert cell
Insert cell
total = amount * (years **(1 + interest /100))
Insert cell
viewof years = Inputs.select(["10", "15", "20", "30"], {label:"Years"})
Insert cell
viewof interest = Inputs.radio(["1", "2", "3", "5", "7.5", "12"], {label: "Interest rate (%)", value: "3"})
Insert cell
Insert cell
md`move cells 2`
Insert cell
Insert cell
viewof df = Inputs.table(olympians)
Insert cell
df
Insert cell
viewof df1 = Inputs.table(lasers)
Insert cell
import {lasers} from "@observablehq/faa-laser-reports-data"
Insert cell
HR_dataset.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Importing data From API
Insert cell
d3.csv("https://data.ny.gov/api/views/vxuj-8kew/rows.csv")
Insert cell
## 3. Plot Overview
Insert cell
Plot.plot({
marks: [
Plot.linearRegressionY(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", stroke: "species"})
]
})
Insert cell
Plot.plot({
marks: [
Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight"})),
Plot.ruleY([0])
]
})
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more