Platform
Resources
Pricing
Sign in
Get started
Radamés Ajna
Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations.
Workspace
Fork
Published
Documentação em Português
By
Radamés Ajna
Edited
Aug 30, 2020
Documentação em Português
Introdução aos Views
Introdução aos Generators
Introdução os Imports
Como o Observable Funciona
Introdução aos Dados
Tutorial 2: Fotos de Cachorros
Tutorial 3: Visualizando Dados
Introdução ao HTML
Tutorial 1: Calculadora de almoço
Observable não é JavaScript
Observable: Manual do Usuário em Português
Insert cell
Insert cell
Insert cell
Isso
é
Português
,
não
JavaScript
.
Insert cell
Insert cell
{
throw
new
Error
(
"ops"
)
;
}
Insert cell
Insert cell
{
var
local
=
"Eu sou uma variável local."
;
}
Insert cell
local
// não esta definida
Insert cell
Insert cell
a
+
2
// a é definida abaixo
Insert cell
a
=
1
Insert cell
Insert cell
c1
=
c2
-
1
Insert cell
c2
=
c1
+
1
Insert cell
Insert cell
b
=
Math
.
random
(
)
Insert cell
b
*
b
// updates automatically!
Insert cell
Insert cell
{
invalidation
.
then
(
(
)
=>
console
.
log
(
"Eu fui invalidada."
)
)
;
}
Insert cell
Insert cell
hello
=
new
Promise
(
resolve
=>
{
setTimeout
(
(
)
=>
{
resolve
(
"olá"
)
;
}
,
30000
)
;
}
)
Insert cell
Insert cell
hello
.
split
(
/\s+/g
)
// await implícito
Insert cell
Insert cell
c
=
{
yield
1
;
yield
2
;
yield
3
;
}
Insert cell
c
Insert cell
Insert cell
Insert cell
foo
=
2
Insert cell
Insert cell
{
foo
=
3
}
// não é permitido
Insert cell
Insert cell
dup
=
1
Insert cell
dup
=
2
Insert cell
Insert cell
Insert cell
{
let
sum
=
0
;
for
(
let
i
=
0
;
i
<
10
;
++
i
)
{
sum
+=
i
;
}
return
sum
;
}
Insert cell
Insert cell
label
=
{
foo
:
"bar"
}
Insert cell
object
=
(
{
foo
:
"bar"
}
)
Insert cell
block
=
{
return
{
foo
:
"bar"
}
;
}
Insert cell
Insert cell
viewof
text
=
html
`<input value="edit me">`
Insert cell
text
Insert cell
Insert cell
mutable
coisa
=
0
Insert cell
++
mutable
coisa
// muda o valor da declarção mutavel coisa
Insert cell
Insert cell
coisa
// uma referência reativa
Insert cell
mutable
coisa
// uma referência não reativa
Insert cell
Insert cell
md
`Olá, eu sou um conteúdo *Markdown*!`
Insert cell
Insert cell
import
{
ramp
}
from
"@mbostock/color-ramp"
Insert cell
ramp
(
d3
.
interpolateBrBG
)
Insert cell
Insert cell
numbers
=
Float64Array
.
from
(
{
length
:
1000
}
,
d3
.
randomNormal
(
)
)
Insert cell
height
=
250
Insert cell
import
{
chart
as
histogram
}
with
{
numbers
as
data
,
height
}
from
"@d3/histogram"
Insert cell
histogram
Insert cell
Insert cell
_
=
import
(
"https://cdn.skypack.dev/lodash-es@4"
)
Insert cell
_
.
camelCase
(
"lodash was here"
)
Insert cell
Insert cell
d3
=
require
(
"d3@5"
)
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.
Try it for free
Learn more
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
a
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
c1
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
c2
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
b
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
hello
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
c
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
foo
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dup
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dup
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
label
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
object
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
block
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
text
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
coisa
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
numbers
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
height
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
_
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
d3
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML