Public
Edited
Nov 20, 2023
burrito = ["chicken", 4.2, false, "avocado", 11.99, "beans"]
// Access the fourth element in burrito:
burrito[3]
showMe(`burrito[3]`, { dependencies: { burrito } })
// Find the length of the burrito array:
burrito.length
showMe(`burrito.length`, { dependencies: { burrito } })
// Find the index (position) of the value 4.2 in burrito:
burrito.indexOf(4.2)
showMe(`burrito.indexOf(4.2)`, { dependencies: { burrito } })
droids = [
{name: "C-3PO", color: "gold", height: 167},
{name: "R2D2", color: "white/blue", height: 96},
{name: "BB-8", color: "white/orange", height: 26.4}
]
// Find the length of the droids array:
droids.length
showMe(`droids.length`, { dependencies: { droids } })
// Find the value of "height" for the third element in droids (BB-8's height):
droids[2].height
showMe(`droids[2].height`, { dependencies: { droids } })
// Find the keys of the first element in the droids array:
Object.keys(droids[0])
showMe(`Object.keys(droids[0])`, { dependencies: { droids } })
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}]
// Calculate tips for each bill here:
restaurantBills.map(d => d.bill * d.tipPercent)
showMe(`restaurantBills.map((d) => d.bill * d.tipPercent)`, {
dependencies: { restaurantBills }
})
nyc_water = FileAttachment("nyc_water.csv").csv({typed: true})
// Access the third element in the array:
nyc_water[2]
showMe(`nyc_water[2]`, { dependencies: { nyc_water } })
// Access Consumption (HCF) from the ninth element in the array:
nyc_water[8]["Consumption (HCF)"]
showMe(`nyc_water[8]["Consumption (HCF)"]`, { dependencies: { nyc_water } })
// Access Location from the 100th element in the array:
nyc_water[99].Location
showMe(`nyc_water[99].Location`, { dependencies: { nyc_water } })
// Use Array.map and an arrow array to return and array with the ratio of Current Charges to Consumption (HCF):
prices = nyc_water.map(d => d["Current Charges"] / d["Consumption (HCF)"])
showMe(
`prices = nyc_water.map( d => d["Current Charges"] / d["Consumption (HCF)"])`,
{ dependencies: { nyc_water } }
)
// Plot.plot({
// marks: [Plot.dot(nyc_water, {x: "Consumption (HCF)", y: "Current Charges", fill:"purple", r: "Consumption (HCF)"})],
// x: { domain: [0, 5e4] }
// })
Plot.plot({
marks: [
Plot.dot(nyc_water, {
x: "Consumption (HCF)",
y: "Current Charges",
fill: "gold",
opacity: 0.5,
symbol: "hearts",
r: "Consumption (HCF)"
})
],
x: { domain: [0, 5e4], grid: true, tickFormat: ".1s" },
marginLeft: 100
})
import { showMe } from "@observablehq/show-me"
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.
