10 * 5 * 2
comida = "sushi"
E quem não gosta de ${comida}?
<span style="background:salmon;">
Esse é o template literal <i>HTML</i>.<br>
Ele é usado para criar células com HTML.
</span>
<div><p>Escreva Hello World abaixo:</p></div>
<div id="parent">
</div>
{
d3.select("#parent")
.append("p")
.text("Hello World!");
}
<div id="exercicio">
<p>Célula html</p>
</div>
{
d3.select("#exercicio")
.append("div")
.attr("id", "newDiv")
.style("border", "1px black solid")
.style("background-color", "LightYellow")
.style("font-size", "24px")
.append("p")
.text("Novo parágrafo!");
}
<div class="selectall-example">
<svg width="800" height="300"></svg>
</div>
<style>
.selectall-example {
border: 1px solid black;
display: inline-block;
}
</style>
{
// retorna uma seleção d3 do elemento svg dentro do elemento de classe selectall-example
const svg = d3.select('.selectall-example').select("svg")
svg.append('rect')
.attr("x", "50")
.attr("y", "50")
svg.append('rect')
.attr("x", "300")
.attr("y", "50")
svg.append('rect')
.attr("x", "550")
.attr("y", "50")
svg.selectAll('rect')
.attr("width", "200")
.attr("height", "200")
.style('fill', 'SkyBlue')
.style('stroke', '#777')
.style('stroke-width', '1')
}
barras1 = {
const width = 700
const height = 200
// DOM.svg() é um método específico do Observable para criar um elemento DOM SVG.
const svg = d3.select(DOM.svg(width, height))
const arrayOfNumbers = [10, 15, 30, 50, 80, 65, 55, 30, 20, 10, 8]
svg.selectAll('rect') // Seleciona todos os retângulos filhos de svg (nesse caso, uma seleção vazia)
.data(arrayOfNumbers) // Vincula arrayOfNumbers com DOM elementos <rect/>, produzindo seleções .enter(),.exit()
.enter()// Retorna a parte dos dados que é nova ("entering") e ainda não está vinculada aos elementos DOM
.append('rect') // Para cada item de dado, adiciona um <rect /> ao svg selecionado
.attr('x', (d, i) => i * 30 + 20) // Configura a posição x de acordo com o índice do vetor
.attr('y', (d) => 180 - d*2) // Configura a posição y de cada barra
.attr('width', 20) //Configura a largura de cada barra
.attr('height', d => d*2) // Configura a altura de cada barra
.attr('fill', "DarkSlateGrey") // Configura a cor de preenchimento de cada barra
svg.selectAll("text") // Seleciona todos os retângulos filhos de svg (nesse caso, uma seleção vazia)
.data(arrayOfNumbers) // Vincula arrayOfNumbers com DOM elementos <rect/>, produzindo seleções .enter(),.exit()
.enter()// Retorna a parte dos dados que é nova ("entering") e ainda não está vinculada aos elementos DOM
.append("text") // Para cada item de dado, adiciona um <rect /> ao svg selecionado
.attr('x', (d, i) => i * 30 + 20 + 10) // Configura a posição x de acordo com o índice do vetor
.attr('y', (d) => 175 - d*2) // Configura a posição y de cada barra
.text((d) => d)
.style("font-family","Comic sans")
.style("font-size", "14px")
.style("text-anchor", "middle");
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
barras2 = {
const width = 700
const height = 200
// DOM.svg() é um método específico do Observable para criar um elemento DOM SVG.
const svg = d3.select(DOM.svg(width, height))
const dataset = [
{height: 10, color: 23},
{height: 15, color: 33},
{height: 30, color: 40},
{height: 50, color: 60},
{height: 80, color: 22},
{height: 65, color: 10},
{height: 55, color: 5},
{height: 30, color: 30},
{height: 20, color: 60},
{height: 10, color: 90},
{height: 8, color: 10}
]
let colorScale = d3.scaleLinear()
.domain([0, 100])
.range(["Khaki", "Gold"]); // Escala de cor
svg.selectAll('rect') // Seleciona todos os retângulos filhos de svg (nesse caso, uma seleção vazia)
.data(dataset) // Vincula arrayOfNumbers com DOM elementos <rect/>, produzindo seleções .enter(),.exit()
.enter()// Retorna a parte dos dados que é nova ("entering") e ainda não está vinculada aos elementos DOM
.append('rect') // Para cada item de dado, adiciona um <rect /> ao svg selecionado
.attr('x', (d, i) => i * 30 + 20) // Configura a posição x de acordo com o índice do vetor
.attr('y', (d) => 180 - d.height * 2) // Configura a posição y de cada barra
.attr('width', 20) //Configura a largura de cada barra
.attr('height', (d) => d.height * 2) // Configura a altura de cada barra
.attr('fill', (d) => colorScale(d.color)) // Configura a cor de preenchimento de cada barra
svg.selectAll("text") // Seleciona todos os retângulos filhos de svg (nesse caso, uma seleção vazia)
.data(dataset) // Vincula arrayOfNumbers com DOM elementos <rect/>, produzindo seleções .enter(),.exit()
.enter()// Retorna a parte dos dados que é nova ("entering") e ainda não está vinculada aos elementos DOM
.append("text") // Para cada item de dado, adiciona um <rect /> ao svg selecionado
.attr('x', (d, i) => i * 30 + 20 + 10) // Configura a posição x de acordo com o índice do vetor
.attr('y', (d) => 175 - d.height*2) // Configura a posição y de cada barra
.text((d) => d.height)
.style("font-family","Comic sans")
.style("font-size", "14px")
.style("text-anchor", "middle");
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
{
const array = [3, 2, 11, 7, 6, 4, 10, 8, 15];
const div = d3.select(".array-utils")
div.select("#min").text(d3.min(array))
div.select("#max").text(d3.max(array));
div.select("#extent").text(d3.extent(array));
div.select("#sum").text(d3.sum(array));
div.select("#median").text(d3.median(array));
div.select("#mean").text(d3.mean(array));
div.select("#asc").text(array.sort(d3.ascending));
div.select("#desc").text(array.sort(d3.descending));
div.select("#quantile").text(
d3.quantile(array.sort(d3.ascending), 0.25)
);
}
dataset = d3.json('https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/data.json')
barras3 = {
const width = 600
const height = 400
// DOM.svg() é um método específico do Observable para criar um elemento DOM SVG.
const svg = d3.select(DOM.svg(width, height))
svg.selectAll('rect') // Seleciona todos os retângulos filhos de svg (nesse caso, uma seleção vazia)
.data(dataset) // Vincula arrayOfNumbers com DOM elementos <rect/>, produzindo seleções .enter(),.exit()
.enter()// Retorna a parte dos dados que é nova ("entering") e ainda não está vinculada aos elementos DOM
.append('rect') // Para cada item de dado, adiciona um <rect /> ao svg selecionado
.attr('x', 10) // Configura a posição x de acordo com o índice do vetor
.attr('y', (d, i) => i * 30 + 20) // Configura a posição y de cada barra de acordo com o índice do vetor
.attr('height', 20) //Configura a largura de cada barra
.attr('width', (d) => d.despesa * 2) // Configura a altura de cada barra
.attr('fill', "DarkCyan") // Configura a cor de preenchimento de cada barra
svg.selectAll("text") // Seleciona todos os retângulos filhos de svg (nesse caso, uma seleção vazia)
.data(dataset) // Vincula arrayOfNumbers com DOM elementos <rect/>, produzindo seleções .enter(),.exit()
.enter()// Retorna a parte dos dados que é nova ("entering") e ainda não está vinculada aos elementos DOM
.append("text") // Para cada item de dado, adiciona um <rect /> ao svg selecionado
.attr('x', (d) => d.despesa * 2 + 15) // Configura a posição x de acordo com o índice do vetor
.attr('y',(d, i) => i * 30 + 35) // Configura a posição y de cada barra
.text((d) => d.despesa + " " + d.categoria)
.style("font-family","Arial")
.style("font-size", "14px")
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
comparePorDespesa = (a, b) => a.despesa - b.despesa
sorteddata = d3.json('https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/data.json')
barras4 = {
const width = 600
const height = 400
// DOM.svg() é um método específico do Observable para criar um elemento DOM SVG.
const svg = d3.select(DOM.svg(width, height))
sorteddata.sort(comparePorDespesa) //aqui os dados são ordenados
svg.selectAll('rect') // Seleciona todos os retângulos filhos de svg (nesse caso, uma seleção vazia)
.data(sorteddata) // Vincula arrayOfNumbers com DOM elementos <rect/>, produzindo seleções .enter(),.exit()
.enter()// Retorna a parte dos dados que é nova ("entering") e ainda não está vinculada aos elementos DOM
.append('rect') // Para cada item de dado, adiciona um <rect /> ao svg selecionado
.attr('x', 10) // Configura a posição x de acordo com o índice do vetor
.attr('y', (d, i) => i * 30 + 20) // Configura a posição y de cada barra de acordo com o índice do vetor
.attr('height', 20) //Configura a largura de cada barra
.attr('width', 200) // Configura a altura de cada barra
.attr('fill', "DarkCyan") // Configura a cor de preenchimento de cada barra
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
d3 = require('d3')
key = c =>
html`<span style='border-radius:5px;background:#ddf;display:inline-block;padding:0 4px;'>${c}</span>`
greypin = html`<svg style='vertical-align:middle' viewBox="0 0 16 16" fill='#999999' stroke=none viewBox="0 0 16 16" width=16 height=16>
<path d="M8 1h3v1l-1 1v4l2 .875V9H9v5.125L8 15l-1-.875V9H4V7.875L6 7V3L5 2V1z" />
</svg>`
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.
