Public
Edited
Sep 4, 2024
Importers
1 star
{
const greeting = "Hello!";
return greeting;
}
observableGreeting = "Welcome"
observableSentence = observableGreeting + " to coding!"
{
const greeting = "Hello!";
return greeting.length;
}
{
const greeting = "👋";
return greeting.length;
}
{
const secondsPerMinute = 60;
const minutesPerHour = 60;
const hoursPerDay = 24;
const daysPerWeek = 7;
const weeksPerYear = 52;
const secondsPerYear =
secondsPerMinute *
minutesPerHour *
hoursPerDay *
daysPerWeek *
weeksPerYear;
return secondsPerYear;
}
{
const illinoisRetailTax = 0.0625;
const cookCountyRetailTax = 0.0175;
const chicagoRetailTax = 0.0125;
const regionalTransitTax = 0.01;
const totalTaxRate =
illinoisRetailTax +
cookCountyRetailTax +
chicagoRetailTax +
regionalTransitTax;
const subTotal = 99.99;
const taxedTotal = subTotal * (1 + totalTaxRate);
return taxedTotal;
}
{
const illinoisRetailTax = 0.0625;
const cookCountyRetailTax = 0.0175;
const chicagoRetailTax = 0.0125;
const regionalTransitTax = 0.01;
const totalTaxRate =
illinoisRetailTax +
cookCountyRetailTax +
chicagoRetailTax +
regionalTransitTax;
const subTotal = 99.99;
const taxedTotal = subTotal * (1 + totalTaxRate);
return "$" + taxedTotal.toFixed(2);
}
{
const illinoisRetailTax = 0.0625;
const cookCountyRetailTax = 0.0175;
const chicagoRetailTax = 0.0125;
const regionalTransitTax = 0.01;
const totalTaxRate =
illinoisRetailTax +
cookCountyRetailTax +
chicagoRetailTax +
regionalTransitTax;
const subTotal = 99.99;
const taxedTotal = subTotal * (1 + totalTaxRate);
return "The grand total is: $" + taxedTotal.toFixed(2);
}
{
return "When we add one and one, we would probably expect the answer to be " + (1 + 1) + ", but sometimes we might want " + ("1" + "1") + " instead.";
}
{
return "pi is the floating point number " + Math.PI +
"\n but it can be representated as a String: " + String(Math.PI) +
"\n or as an integer: " + parseInt(Math.PI) +
"\n or as a fixed precision float: " + parseFloat(Math.PI).toFixed(2) +
"\n or as a Greek letter: " + "π" +
"\n or as an emoji: " + "🥧";
}
{
const worldGreetings = [
"bonjour",
"salut",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"aloha"
];
return worldGreetings;
}
{
const worldGreetings = [
"bonjour",
"salut",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"aloha"
];
return (
"This dataset includes " + worldGreetings.length + " words for 'hello'."
);
}
{
const worldGreetings = [
"bonjour",
"salut",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"aloha"
];
return (
"The first item in the array is " +
worldGreetings[0] +
" and the third item is " +
worldGreetings[2]
);
}
{
const worldGreetings = [
"bonjour",
"salut",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"aloha"
];
return worldGreetings;
}
{
const worldGreetings = [
"bonjour",
"salut",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"aloha"
];
const finalIndex = worldGreetings.length - 1;
return "The last item in the array is " + worldGreetings[finalIndex];
}
{
const worldGreetings = [
"bonjour",
"salut",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"aloha"
];
worldGreetings.push("kamusta");
return worldGreetings;
}
{
const worldGreetings = [
"bonjour",
"salut",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"aloha"
];
worldGreetings[1] = "ola";
worldGreetings[3] = "konnichi wa";
return worldGreetings;
}
{
const worldGreetings = [
"bonjour",
"salut",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"kwey",
"aloha"
];
worldGreetings[200] = "ola";
return worldGreetings.length;
}
{
const worldGreetings = [
"bonjour",
"salut",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"kwey",
"aloha"
];
worldGreetings[200] = "ola";
return worldGreetings[50];
}
{
const countUp = [];
for (let i = 0; i < 5; i = i + 1) {
countUp.push(i);
}
return countUp;
}
{
const decreasingEven36to22 = [];
for (let i = 36; i >= 22; i = i - 2) {
decreasingEven36to22.push(i);
}
return decreasingEven36to22;
}
{
const worldGreetings = [
"bonjour",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"aloha"
];
const languages = [
"french",
"swahili",
"thai",
"turkish",
"quechua",
"twi",
"mandarin",
"hawaiian"
];
const factoids = [];
for (let i = 0; i < worldGreetings.length; i = i + 1) {
factoids.push(
"The word for hello in " + languages[i] + " is " + worldGreetings[i]
);
}
return factoids;
}
{
const worldGreetings = [
"bonjour",
"konnichiwa", //extra item!!!
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"aloha"
];
const languages = [
"french",
"swahili",
"thai",
"turkish",
"quechua",
"twi",
"mandarin",
"hawaiian"
];
const factoids = [];
for (let i = 0; i < worldGreetings.length; i = i + 1) {
factoids.push(
"The word for hello in " + languages[i] + " is " + worldGreetings[i]
);
}
return factoids;
}
{
const swahili = { name: "swahili", greeting: "jambo", speakers: 150000000 };
return swahili;
}
{
const swahili = { name: "swahili", greeting: "jambo", speakers: 150000000 };
return swahili.greeting;
}
{
const languages = [
{ name: "french", greeting: "bonjour" },
{ name: "japanese", greeting: "konnichiwa" },
{ name: "swahili", greeting: "jambo" },
{ name: "thai", greeting: "swasdi" },
{ name: "turkish", greeting: "merhaba" },
{ name: "quechua", greeting: "allianchu" },
{ name: "twi", greeting: "maakye" },
{ name: "mandarin", greeting: "nihao" },
{ name: "hawaiian", greeting: "aloha" }
];
const factoids = [];
for (let i = 0; i < languages.length; i = i + 1) {
factoids.push(
"The word for hello in " +
languages[i].name +
" is " +
languages[i].greeting
);
}
return factoids;
}
{
//svg variables
const width = 800;
const height = 100;
//create SVG artboard
const svg = d3.create("svg").attr("width", width).attr("height", height);
//find the SVG artboard we created, and add an SVG circle
svg
.append("circle")
.attr("cx", 100)
.attr("cy", 50)
.attr("r", 25)
.style("fill", "teal");
//find the SVG artboard we created, and add an SVG polyline
svg
.append("polyline")
.attr("points", [
[200, 50],
[250, 20],
[350, 70],
[400, 50]
])
.attr("cy", 50)
.attr("r", 30)
.style("fill", "none")
.style("stroke", "#CC00AA")
.style("stroke-width", 3);
//find the SVG artboard we created, and add an SVG rectangle
svg
.append("rect")
.attr("x", 450)
.attr("y", 20)
.attr("width", 150)
.attr("height", 60)
.style("fill", "none")
.style("stroke-width", 3)
.style("stroke", "f00");
//find the SVG artboard we created, and add SVG text
svg
.append("text")
.attr("x", 725)
.attr("y", 50)
.style("text-anchor", "middle")
.style("alignment-baseline", "middle")
.text("🌑🌒🌓🌔🌕🌖🌗🌘🌑");
//show visualization in Observable
return svg.node();
}
{
//svg variables
const width = 800;
const height = 100;
//data
const meaninglessData = [15, 12, 3, 21, 16, 21, 8, 2, 25];
//create SVG artboard
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const spacing = width / meaninglessData.length;
const margin = spacing / 2;
for (let i = 0; i < meaninglessData.length; i = i + 1) {
svg
.append("circle")
.attr("cx", i * spacing + margin)
.attr("cy", height / 2)
.attr("r", meaninglessData[i])
.attr("fill", "blue");
}
//show visualization in Observable
return svg.node();
}
solarSystemSimple = {
//svg variables
const width = 1000;
const height = 200;
const margin = 25;
//planetary data
const planets = [
{
name: "Mercury",
size: 4879,
distance: 0.39,
outerColor: "#666699",
coreColor: "#cccccc"
},
{
name: "Venus",
size: 12104,
distance: 0.723,
outerColor: "#ffcc00",
coreColor: "#995522"
},
{
name: "Earth",
size: 12742,
distance: 1,
outerColor: "#33ccff",
coreColor: "#228800"
},
{
name: "Mars",
size: 6787,
distance: 1.524,
outerColor: "#ff6666",
coreColor: "#774422"
},
{
name: "Jupiter",
size: 139820,
distance: 5.203,
outerColor: "#ff9977",
coreColor: "#997755"
},
{
name: "Saturn",
size: 120660,
distance: 9.539,
outerColor: "#ddcc66",
coreColor: "#666666"
},
{
name: "Uranus",
size: 51118,
distance: 19.18,
outerColor: "#99ccff",
coreColor: "#6688ff"
},
{
name: "Neptune",
size: 48600,
distance: 30.06,
outerColor: "#33cccc",
coreColor: "#55ffff"
}
];
//create SVG artboard
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
//black background
const bg = svg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("fill", "#000");
//create random white stars in the background
for (let i = 0; i < 100; i++) {
const star = svg
.append("circle")
.attr("cx", Math.random() * width)
.attr("cy", Math.random() * height)
.attr("r", Math.random() * 2)
.attr("opacity", Math.random())
.attr("fill", "#fff");
}
//loop through planets and draw circles for each
for (let i = 0; i < planets.length; i++) {
const planet = svg
.append("circle")
//The svg is 1000 units wide. Neptune is farthest, ~30 AU. We might want to place it at ~900 pixels. 30 * 30 = 900
.attr("cx", planets[i].distance * 30)
.attr("cy", height / 2)
//The biggest planet is Jupiter, it has a size of 139820. Arbitrarily, 30 pixels seemed like a good max radius. 139820/30 = ~5000
.attr("r", planets[i].size / 5000)
.attr("fill", planets[i].outerColor);
}
//draw sun as rectangle on the very edge of the artboard, since it is such a big circle!
const sol = svg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 5)
.attr("height", height)
.attr("fill", "#fd0");
//show visualization in Observable
return svg.node();
}
solarSystem = {
//svg variables
const width = 800;
const height = 200;
const margin = 25;
//planetary data
const planets = [
{
name: "Mercury",
size: 4879,
distance: 0.39,
outerColor: "#666699",
coreColor: "#cccccc"
},
{
name: "Venus",
size: 12104,
distance: 0.723,
outerColor: "#ffcc00",
coreColor: "#995522"
},
{
name: "Earth",
size: 12742,
distance: 1,
outerColor: "#33ccff",
coreColor: "#228800"
},
{
name: "Mars",
size: 6787,
distance: 1.524,
outerColor: "#ff6666",
coreColor: "#774422"
},
{
name: "Jupiter",
size: 139820,
distance: 5.203,
outerColor: "#ff9977",
coreColor: "#997755"
},
{
name: "Saturn",
size: 120660,
distance: 9.539,
outerColor: "#ddcc66",
coreColor: "#666666"
},
{
name: "Uranus",
size: 51118,
distance: 19.18,
outerColor: "#99ccff",
coreColor: "#6688ff"
},
{
name: "Neptune",
size: 48600,
distance: 30.06,
outerColor: "#33cccc",
coreColor: "#55ffff"
}
];
//create SVG artboard
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
//black background
const bg = svg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("fill", "#000");
//create random white stars in the background
for (let i = 0; i < 100; i++) {
const star = svg
.append("circle")
.attr("cx", Math.random() * width)
.attr("cy", Math.random() * height)
.attr("r", Math.random() * 2)
.attr("opacity", Math.random())
.attr("fill", "#fff")
.attr("class", "stars");
}
//create definitions element to hold gradient definitions
const defs = svg.append("defs");
//loop through planets and create gradients
for (let i = 0; i < planets.length; i++) {
const gradient = defs.append("radialGradient").attr("id", planets[i].name);
gradient
.append("stop")
.attr("offset", "0%")
.attr("stop-color", planets[i].coreColor);
gradient
.append("stop")
.attr("offset", "100%")
.attr("stop-color", planets[i].outerColor);
}
//converters that take in data, and spit out pixel coordinates
const sizeScale = d3
.scaleLinear()
.domain(d3.extent(planets, (d) => d.size))
.range([3, 50]);
const distanceScale = d3
.scaleLinear()
.domain(d3.extent(planets, (d) => d.distance))
.range([margin, width - margin]);
//loop through planets and draw circles for each
for (let i = 0; i < planets.length; i++) {
const planet = svg
.append("circle")
.attr("cx", distanceScale(planets[i].distance))
.attr("cy", height / 2)
.attr("r", sizeScale(planets[i].size))
.attr("id", planets[i].name)
.style("fill", "url(#" + planets[i].name + ")");
}
//draw sun as rectangle on the very edge of the artboard, since it is such a big circle!
const sol = svg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 5)
.attr("height", height)
.attr("fill", "#fd0");
//show visualization in Observable
return svg.node();
}
helloDataset[0]
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.
