The avatar for @1907040109
1907040109
Published
Observable for Jupyter users
Edited
Nov 11, 2021
Fork of Observable for Jupyter Users
2
Insert cell
md`# Observable对于Jupyter用户

Observable像Jupyter一样, 是一个计算的notebook，非常适合做数据科学和可视化，其中“notebook”是指包含prose，代码和可视化的一系列cell,
Observable完全在您的浏览器中运行JavaScript超集，因此它使用的生态系统与您可能习惯的Python生态系统不同。本教程向Jupyter用户展示如何最大限度地利用Observable。

让我们从最大的差异开始`
Insert cell
md`## Observable是运行JavaScript的超集
大多数Jupyter用户使用Python内核，尽管也有[JavaScript](https://github.com/yunabe/tslab)、[Julia](https://github.com/JuliaLang/IJulia.jl), [Haskell](https://github.com/gibiansky/IHaskell)内核。您也可以用Jupyter编写一些在浏览器中执行的JavaScript，但通常Jupyter notebook中的代码是用内核语言编写的，并在运行内核的远程进程中执行。在本教程的其余部分中，我将假定您熟悉Jupyter notebook中的Python。

要最大限度地利用Observable的内容，您需要了解一些JavaScript。我们最喜欢的关于这门语言的完整课程是[Eloquent JavaScript](https://eloquentjavascript.net/2nd_edition/)，但是如果您想利用您的Python知识快速学习一些基本知识，下面是[两种语言之间的差异列表](https://observablehq.com/d/5e82392bae5fb729)。也就是说，如果您有使用Python的经验，那么您也许能够一步一个脚印地寻找不同之处。Observable的[JavaScript风格略有不同](https://observablehq.com/@observablehq/observables-not-javascript)，所以即使是熟悉JavaScript的人也需要学习一些东西。`
Insert cell
md`## Cell 输出显示在代码*上面*`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
9 + 8
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
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
import {slider} from "@jashkenas/inputs"
Insert cell
Insert cell
"hello world"
Insert cell
Insert cell
({
a: 100,
b: 200,
})
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
Insert cell
svg`<svg width="30" height="30"><circle cx="15" cy="15" r="15" fill="blue"/></svg>`
Insert cell
Insert cell
md`> This ~~txet~~ *text* is rendered as markdown`
Insert cell
Insert cell
tex`-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

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