Platform
Resources
Pricing
Sign in
Get started
Roberto Stelling
Data Visualization and Data Science consultant. Currently at UFRJ/PPGI Master's program in Computer Science (Data Visualization and Machine Learning).
Workspace
Fork
Published
Introdução
By
Roberto Stelling
Edited
Oct 11, 2018
1 fork
Importers
Introdução
Introdução aos Notebooks
Introdução ao Código
Introdução de 5 minutos
Insert cell
Insert cell
Insert cell
{
let
soma
=
0
;
for
(
let
i
=
0
;
i
<=
100
;
++
i
)
{
soma
+=
i
;
}
return
soma
;
}
Insert cell
Insert cell
cor
=
"vermelho"
Insert cell
`Minha cor favorita é ${
cor
}.`
Insert cell
Insert cell
html
`<span style="background:gray;">
Minha linguagem favorita é <i>HTML</i>.
</span>`
Insert cell
Insert cell
md
`Minha linguagem favorita é *Markdown*.`
Insert cell
Insert cell
html
`Minha cor favorita é <i style="background:${
mapaCores
[
cor
]
};">${
cor
}</i>.`
Insert cell
Insert cell
Insert cell
status
=
new
Promise
(
resolve
=>
{
setTimeout
(
(
)
=>
{
resolve
(
{
resolved
:
new
Date
}
)
;
}
,
2000
)
;
}
)
Insert cell
Insert cell
status
.
resolved
Insert cell
Insert cell
d3
=
require
(
"d3-fetch@1"
)
Insert cell
Insert cell
countries
=
(
await
d3
.
tsv
(
"https://unpkg.com/world-atlas@1/world/110m.tsv"
)
)
.
sort
(
(
a
,
b
)
=>
b
.
pop_est
-
a
.
pop_est
)
// Sort by descending estimated population.
.
slice
(
0
,
10
)
// Take the top ten.
Insert cell
Insert cell
i
=
{
let
i
=
0
;
while
(
true
)
{
yield
++
i
;
}
}
Insert cell
`O valor atual de i é ${
i
}.`
Insert cell
Insert cell
date
=
{
while
(
true
)
{
yield
new
Promise
(
resolve
=>
{
setTimeout
(
(
)
=>
resolve
(
new
Date
)
,
1000
)
;
}
)
;
}
}
Insert cell
Insert cell
slider
=
html
`<input type=range>`
Insert cell
sliderValue
=
Generators
.
input
(
slider
)
Insert cell
Insert cell
viewof
value
=
html
`<input type=range>`
Insert cell
value
Insert cell
Insert cell
import
{
viewof
selection
as
carros
}
from
"@mbostock/d3-brushable-scatterplot"
Insert cell
viewof
carros
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.
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
cor
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
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
mapaCores
Edit
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
status
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
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
countries
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
i
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
date
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
slider
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
sliderValue
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
value
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML