c2 = operation(88, 11, subtract)
b = 10
arr = ["tom turbo", "fritz phantom", "anna"]
myObj = ({name: 'Patrick', age: 30})
function add(a,b) {
return a+b;
}
add(1, 3)
function subtract(a, b) {
return a - b;
}
function operation(a,b,op) {
return op(a,b)
}
c1 = operation(a, b, subtract)
hello = new Promise((resolve) => setTimeout(() => resolve("Hi"), 2000))
{
let a = 5;
let string = "";
for (let i = 0; i < a; i++) {
string += "a";
}
return string;
}
d3 = require("d3")
html`<h4>HTML</h4>`
html`<p>My favorite color is <span style="color:${color}">${color}</span></p>`
color = "purple"
md`My result for c1: ${c1}`
html`<h4 style="color:${myColor}">Hello ${yourName}</h4>`
myName = "Klaus"
viewof yourName = html`<input type="text">`
viewof yourColor = html`<input type="color">`
viewof myColor = Inputs.color({ label: "Favorite color", value: "#4682b4" })
viewof radios = Inputs.radio(["A", "B"], {label: "Select one"})
md`My selection is: ${radios}`
import { chart as chartMoon, viewof year } from "@mbostock/phases-of-the-moon"
moonYear = viewof year
moons = chartMoon
import { chart } with { myData as alphabet } from "@d3/bar-chart"
chart
myData = [
{ letter: "Thumb", frequency: 0.6 },
{ letter: "Index", frequency: 0.85 },
{ letter: "Middle", frequency: 1 },
{ letter: "Ring", frequency: 0.9 },
{ letter: "Pinky", frequency: 0.75 }
]
movie = [
{ title: "Deadpool", year: 2016 },
{ title: "Jurassic Park", year: 1993 },
{ title: "Star Wars", year: 1977 },
{ title: "The Godfather", year: 1972 },
{ title: "Snow White and the Seven Dwarfs", year: 1927 }
]
dataIris = FileAttachment("iris.csv").csv()
dataPokemon = FileAttachment("pokemon.csv").csv()
jsonIris = FileAttachment("iris.json").json()
import { alphabet } from "@d3/bar-chart"
alphabet
url = "https://data.sfgov.org/resource/xdgd-c79v.json"
response = fetch(url)
// Bad to use .json() on a fetch respose can only be executed once.
// response.json()
jsonData = (await fetch(url)).json()
jsonDataD3 = d3.json(url)
weatherData = d3.csv(
"https://raw.githubusercontent.com/vega/vega-datasets/master/data/weather.csv"
)
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.
