html`
<div style="height:2em; padding:.5em; background:#C39BD3;">
<h2 style="color:white;">Hello ! I am some HTML code page inside Observable</h2>
</div>
`
//Writing SVG code is exacly like writing HTML code.
html`
<svg width="200" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:pink;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
`
x * 2 // x is defined below
x = 100 // x value is used above
{
let x = 0;
for (let i = 1; i <= 5; ++i) {
x += i; // adding numbers from 1 - 5
}
return x;
}
({top: 50, right: 50, bottom: 50, left: 50}) //defining object
data = [1,2,3,4,5,6] //defining array
//defining a javascript function
function Program(name) {
return `Program: ${name}`;
}
Program("Masters in Computer Science") // calling function
flare = d3.csv("https://gist.githubusercontent.com/mbostock/4063570/raw/11847750012dfe5351ee1eb290d2a254a67051d0/flare.csv")
DOM.download(new Blob([d3.csvFormat(flare)], {type: "text/csv"}), "flare.csv")
d3 = require("d3@5") // Use the latest Version
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.
