Published
Edited
Sep 1, 2022
1 star
Insert cell
Insert cell
Insert cell
Insert cell
a.map(d => d-1)
Insert cell
a.filter(d => d >= 10)
Insert cell
a.reduce((s, d) => s + d)
Insert cell
{
let b = [];
a.forEach((d) => b.unshift(d))
return b;
}
Insert cell
Insert cell
function makeAdder(x) {
return function(y) {
return x + y;
};
}
Insert cell
add5 = makeAdder(5)
Insert cell
add10 = makeAdder(10)
Insert cell
add5(2)
Insert cell
add10(2)
Insert cell
Insert cell
{
var divElt = html`<div id="chart">`
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
// var svg = document.createElement("svg");
divElt.appendChild(svg);
svg.setAttribute("height", 400);
svg.setAttribute("width", 600);
// manually create circle
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
// cx, cy, radius
circle.setAttribute("cx", 100);
circle.setAttribute("cy", 100);
circle.setAttribute("r", 50);
circle.setAttribute("fill", "black");
svg.appendChild(circle);
return divElt;
}
Insert cell
{
var divElt = html`<div id="chart">`
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
divElt.appendChild(svg);
svg.setAttribute("height", 400);
svg.setAttribute("width", 600);
// use addEltToSvg
addEltToSvg(svg, "circle", {r: 50, cx: 200, cy: 200});
addEltToSvg(svg, "circle", {r: 50, cx: 300, cy: 300});
return divElt;
}
Insert cell
function addEltToSvg(s, name, attrs) {
var element = document.createElementNS("http://www.w3.org/2000/svg", name);
if (attrs === undefined) attrs = {};
for (var key in attrs) {
element.setAttribute(key, attrs[key]);
}
s.appendChild(element);
}


Insert cell

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.
Learn more