Public
Edited
Apr 19, 2023
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
burrito = ["chicken", 4.2, false, "avocado", 11.99, "beans"]
Insert cell
Insert cell
// Access the fourth element in burrito:
burrito[3]
Insert cell
Insert cell
// Find the length of the burrito array:
burrito.length
Insert cell
Insert cell
// Find the index (position) of the value 4.2 in burrito:
burrito.indexOf(4.2)
Insert cell
Insert cell
Insert cell
Insert cell
droids = [
{name: "C-3PO", color: "gold", height: 167},
{name: "R2D2", color: "white/blue", height: 96},
{name: "BB-8", color: "white/orange", height: 26.4}
]
Insert cell
Insert cell
// Find the length of the droids array:
droids.length
Insert cell
Insert cell
// Find the value of "height" for the third element in droids (BB-8's height):
droids[2].height
Insert cell
Insert cell
// Find the keys of the first element in the droids array:
droids[0]
Insert cell
Insert cell
Insert cell
Insert cell
restaurantBills = [{bill: 49.51, tipPercent: 0.15},
{bill: 112.40, tipPercent: 0.22},
{bill: 68.25, tipPercent: 0.18},
{bill: 27.37, tipPercent: 0.12},
{bill: 50.18, tipPercent: 0.17}]
Insert cell
Insert cell
// Calculate tips for each bill here:
restaurantBills.map((d) => d.bill * d.tipPercent)
Insert cell
Insert cell
Insert cell
Insert cell
nyc_water = FileAttachment("nyc_water.csv").csv({typed: true})
Insert cell
nyc_water
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
// Access the third element in the array:
nyc_water[2]
Insert cell
Insert cell
// Access Consumption (HCF) from the ninth element in the array:
nyc_water[8]["Consumption (HCF)"]
Insert cell
Insert cell
// Access Location from the 100th element in the array:
nyc_water[99].Location
Insert cell
Insert cell
// Use Array.map and an arrow array to return and array with the ratio of Current Charges to Consumption (HCF):
ratios = nyc_water.map((d) => d["Current Charges"] / d["Consumption (HCF)"])
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(nyc_water, {
x: "Consumption (HCF)",
y: "Current Charges",
fill: "purple",
opacity: 0.5,
symbol: "star",
r: "Consumption (HCF)"
})
],
x: { domain: [0, 5e4], grid: true, tickFormat: ".1s" },
marginLeft: 100
})
Insert cell
// Create and customize a scatterplot of Consumption (HCF) and Current Charges from the nyc_water data:

Insert cell
Insert cell
import { showMe } from "@observablehq/show-me"
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