Public
Edited
Jul 1, 2023
1 fork
1 star
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.
Learn more