The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Sep 2, 2022
18 forks
177 stars
4
Observable for Jupyter users
Observable for Jupyter Users
Visualize a data frame with Observable, in JupyterInteractivity in ObservableJavaScript replacements for Python data science tools
Also listed in…
Observable for Python Users
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
2 ** 3
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const foo = (x) => x + 1;
const arr = [1,2,3];
return arr.map(foo);
}
Insert cell
Insert cell
({hello: "world"})
Insert cell
Insert cell
{
const radius = 12;
return 2 * Math.PI * radius;
}
Insert cell
Math.PI * radius ** 2
Insert cell
Insert cell
Insert cell
z = 123 + 456
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
a = 10
Insert cell
a = 11
Insert cell
Insert cell
b = c + 1
Insert cell
c = b + 2
Insert cell
Insert cell
bits = 18 // change this number and press shift-enter to run!
Insert cell
maxSignedInt = 2 ** (bits - 1) - 1
Insert cell
Insert cell
Insert cell
md`**We need ${'🍕'.repeat(meat)} meat, ${'🍕'.repeat(veggie)} veggie, ${'🍕'.repeat(vegan)} vegan.**`
Insert cell
viewof rsvps = Inputs.range([0, 100], {label: "RSVPs", step: 1})
Insert cell
meat = Math.floor(0.4 * pies) || 1
Insert cell
vegan = Math.floor(0.15 * pies) || 1
Insert cell
veggie = Math.floor(0.45 * pies) || 1
Insert cell
pies = Math.round(people * 2.5 / 8);
Insert cell
people = Math.round(rsvps * .65) // the Meetup Universal Constant
Insert cell
Insert cell
Insert cell
Insert cell
"hello world"
Insert cell
22/7
Insert cell
Insert cell
({
a: 100,
b: 200,
})
Insert cell
Insert cell
Insert cell
{
const div = document.createElement('div')
div.innerText = 'This is a DIV'
div.style.border = 'solid 10px gray';
div.style.textAlign = 'center';
div.style.width = '200px';
return div;
}
Insert cell
Insert cell
Insert cell
svg`<svg width="30" height="30"><circle cx="15" cy="15" r="15" fill="blue"/></svg>`
Insert cell
Insert cell
Insert cell
This ~~txet~~ *text* is rendered as Markdown.
Insert cell
Insert cell
<div style="border: solid 10px gray; text-align: center; width: 200px;">This is a DIV</span>
Insert cell
Insert cell
tex`-b \pm \sqrt{b^2 - 4ac} \over 2a`
Insert cell
-b \pm \sqrt{b^2 - 4ac} \over 2a
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more