10 * 5 * 5
md`E quem não gosta de ${comida}?`
html`<span style="background:salmon;">
Esse é o template literal <i>HTML</i>.<br>
Ele é usado para criar células com HTML.
</span>`
{
d3.select("#parent")
.append("p")
.text("Hello World!");
}
html`
<div id="exercicio">
<p>Célula html</p>
</div>`
{
// escreva seu código aqui
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!")
}
html`
<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]
const maxOfNumbers = d3.max(arrayOfNumbers)
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 + 35) // Configura a posição x de acordo com o índice do vetor
.attr('y', d => (maxOfNumbers - d) *2 + 30 ) // 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")
.data(arrayOfNumbers)
.enter()
.append('text')
.attr('x', (d, i) => i * 30 + 45)
.attr('y', d => (maxOfNumbers - d) *2 + 28 )
.attr('text-anchor', 'middle')
.style("font", "bold 14px arial")
.text(d=>d)
// 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
let maxOfNumbers = d3.max(dataset.map(d=>d.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', (d, i) => i * 30 + 35) // Configura a posição x de acordo com o índice do vetor
.attr('y', d => (maxOfNumbers - d.height) *2 + 30 ) // 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")
.data(dataset)
.enter()
.append('text')
.attr('x', (d, i) => i * 30 + 45)
.attr('y', d => (maxOfNumbers - d.height) *2 + 28 )
.attr('text-anchor', 'middle')
.style("font", "bold 14px arial")
.text(d=>d.height)
// 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*3) // 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')
.attr('x', (d, i) => d.despesa*3 + 15)
.attr('y', (d, i) => i * 30 + 35)
.style('font', 'normal 14px arial')
.text(d=>d.categoria)
// 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')
sorteddata.sort(comparePorDespesa)
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)
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', d=> d.despesa*3)
.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(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('text')
.attr('x', (d, i) => d.despesa*3 + 15)
.attr('y', (d, i) => i * 30 + 35)
.style('font', 'bold 14px arial')
.text(d=>d.categoria)
// 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>`
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.