Platform
Solutions
Resources
Pricing
Sign in
Sign up
Alexandre R. Cajazeira Ramos
Mestre em Ciência da Computação (UFC / MDCC), Especialista em Gestão de TI (UCAM) e Bacharel em Sistemas de Informação (UFPI / CSHNB). Atualmente é Cientista de Dados na central de jornalismo de dados do O POVO - DATADOC.
Workspace
Fork
Public
By
Alexandre R. Cajazeira Ramos
Edited
Jul 1, 2023
1 fork
1 star
2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
aluno
=
(
{
nome
:
'joão'
,
idade
:
15
}
)
Insert cell
aluno
.
nome
Insert cell
aluno
.
nome
Insert cell
aluno
.
nome
=
"Outro Nome para o Aluno"
Insert cell
aluno
.
nome
Insert cell
aluno
.
nota
=
7
Insert cell
aluno
Insert cell
Object
.
keys
(
aluno
)
Insert cell
Object
.
values
(
aluno
)
Insert cell
Object
.
entries
(
aluno
)
Insert cell
Object
.
entries
(
aluno
)
Insert cell
Insert cell
array1
=
[
'oi'
,
100
,
{
nome
:
'João'
,
idade
:
10
}
,
[
'outro array'
,
1
]
]
Insert cell
array1
[
-
1
]
Insert cell
array_de_objetos
=
[
{
cidade
:
'São Paulo'
,
pop
:
12330000
}
,
{
cidade
:
'Rio de Janeiero'
,
pop
:
6748000
}
,
{
cidade
:
'Salvador'
,
pop
:
2886698
}
,
{
cidade
:
'São Raimundo Nonato'
,
pop
:
35035
}
]
Insert cell
array_de_objetos
.
filter
(
c
=>
c
.
pop
>
1000000
)
Insert cell
array_de_objetos
.
map
(
c
=>
c
.
pop
/
100
)
Insert cell
Insert cell
array_simples
=
[
1
,
3
,
5
,
6
,
7
,
8
,
10
]
Insert cell
array_simples
.
indexOf
(
55
)
Insert cell
array_simples
.
indexOf
(
8
)
Insert cell
array_simples
.
includes
(
1
)
Insert cell
{
array_simples
.
push
(
55
)
;
return
array_simples
.
pop
(
)
;
}
Insert cell
soma
=
{
let
s
=
0
;
array_simples
.
forEach
(
n
=>
{
s
+=
n
;
}
)
return
s
;
}
Insert cell
array_simples
.
filter
(
d
=>
d
>=
0
)
Insert cell
array_simples
Insert cell
array_simples
.
map
(
n
=>
{
let
prop
=
n
/
soma
;
return
prop
*
100
+
'%'
}
)
Insert cell
Insert cell
Insert cell
alunos
Insert cell
atribuicao_com_medias
=
{
alunos
.
push
(
{
aluno
:
"Pedro2"
,
nota_1
:
7
,
nota_2
:
8
}
)
alunos
.
forEach
(
(
a
,
i
)
=>
{
a
.
media
=
(
a
.
nota_1
+
a
.
nota_2
)
/
2
;
a
.
id
=
i
}
)
;
return
alunos
;
}
Insert cell
alunos
.
filter
(
a
=>
a
.
media
>
7
)
Insert cell
alunos
.
map
(
a
=>
`O aluno ${
a
.
aluno
} tirou ${
a
.
media
} e ficou ${
a
.
media
>=
7
?
'aprovado'
:
'reprovado;'
}`
)
Insert cell
Insert cell
Insert cell
A
=
10
Insert cell
Insert cell
cor
=
'red'
Insert cell
celulaX
=
10
Insert cell
<
p
style
=
"color:${cor}"
>
Nesta célula html, estamos codificando um css com o valor da célula "cor", definida acima.
</
p
>
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
circulo
=
htl
.
html
`<h4>Também é possível fazer referência ao valor de um <i>input</i> em células HTML, como neste exemplo: </h4>
<p>Vamos utilizar o valor do <i>range</i> acima (${
range
}) para codificar o raio de círculo</p>
<svg>
<circle cx="100" cy="80" r=${
range
} stroke="black" stroke-width="3" fill=${
color
} />
</svg>`
Insert cell
Insert cell
viewof
checkboxes
=
Inputs
.
checkbox
(
opcoes
,
{
label
:
"Select some"
,
value
:
[
"A"
,
"C"
]
}
)
Insert cell
checkboxes
Insert cell
Insert cell
Insert cell
viewof
radios
=
Inputs
.
radio
(
dias
,
{
label
:
"Selecione uma opção"
}
)
Insert cell
Insert cell
Insert cell
Insert cell
viewof
select1
=
Inputs
.
select
(
[
"A"
,
"B"
]
,
{
label
:
"Select one"
}
)
Insert cell
Insert cell
Insert cell
select2
.
map
(
d
=>
htl
.
html
`<p>${
d
}</p>`
)
Insert cell
<
h4
>
A seguir definimos uma lista em HTML com o resultado do
<
i
>
select
</
i
>
:
</
h4
>
<
ul
>
${select2.map(d=> html`
<
li
>
${d}
</
li
>
`)}
</
ul
>
Insert cell
Insert cell
Insert cell
viewof
pessoa
=
Inputs
.
select
(
array_obj
,
{
label
:
"Selecione:"
,
format
:
p
=>
p
.
nome
}
)
Insert cell
Insert cell
pessoa
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
arquivo
=
d3
.
csv
(
url_arquivo
)
Insert cell
arquivo
.
columns
Insert cell
arquivo
.
map
(
d
=>
+
d
[
'Quantidade de candidatos'
]
)
Insert cell
d3
.
mean
(
arquivo
.
map
(
d
=>
+
d
[
'Quantidade de candidatos'
]
)
)
Insert cell
d3
.
mean
(
arquivo
.
filter
(
d
=>
d
[
"Cor/Raça"
]
==
"Indígena"
)
.
map
(
d
=>
+
d
[
'Quantidade de candidatos'
]
)
)
Insert cell
escala_de_cores
=
d3
.
scaleOrdinal
(
)
.
domain
(
[
"Indígena"
,
"Branca"
,
"Parda"
,
"Amarela"
,
"Preta"
]
)
.
range
(
[
'#66c2a5'
,
'#fc8d62'
,
'#8da0cb'
,
'#e78ac3'
,
'#a6d854'
]
)
Insert cell
escala_de_cores
(
"Indígena"
)
Insert cell
Insert cell
Insert cell
Insert cell
Type Markdown, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof
AIS
=
Inputs
.
select
(
[
"Todas"
]
.
concat
(
lista_ais
.
sort
(
)
)
,
{
label
:
"Selecione uma AIS"
}
)
Insert cell
Insert cell
dataset_com_filtros
=
dataset
.
filter
(
d
=>
(
AIS
==
'Todas'
||
d
.
AIS
==
AIS
)
&&
(
dias_da_semana
.
includes
(
d
[
'Dia da Semana'
]
)
)
)
Insert cell
Insert cell
Insert cell
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.
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
s1
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
aluno
Add comment
Copy import
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
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
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
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
array1
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
array_de_objetos
Add comment
Copy import
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
array_simples
Add comment
Copy import
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
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
soma
Add comment
Copy import
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
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
alunos
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
atribuicao_com_medias
Add comment
Copy import
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
s2
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
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
cor
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
celulaX
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
val_min
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
val_max
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
range
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
circulo
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
checkboxes
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
opcoes
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
radios
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dias
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
select
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
select1
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
select2
Edit
Add comment
Copy import
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
array_obj
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
pessoa
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
estados_brasileiros
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
colunas
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
estados_seleciconados
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
color
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
media_movel
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
Edit
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
Edit
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
s3
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
url_arquivo
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
arquivo
Add comment
Copy import
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
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
escala_de_cores
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
total_ano
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
ano
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
grafico
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
s4
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
data_url
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dataset
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
summary
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
tabela_dos_dados
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
lista_ais
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
lista_dias
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
AIS
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dias_da_semana
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dataset_com_filtros
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
total_registros_com_filtro
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
filtro
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
titulo
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
g2_hist_idade
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
resumo_por_raca
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
barGroup
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
g1_Raca
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
d3
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML