svgwidth = 800 - margin.left - margin.right
svgheight = 200 - margin.top - margin.bottom
scatter1 = {
// DOM.svg() é um método específico do Observable para criar um elemento DOM SVG.
const svg = d3.select(DOM.svg(svgwidth, svgheight))
// Usando a variável svg, faça a vinculação com o dataset, criando círculos para a seleção enter
// Veja o notebook da aula da semana passada para relembrar como fazer isso
// O centro de cada círculo, atributos cx e cy deve ser posicionado de acordo com as
// coordenadas do vetor d[0] e d[1]. O raio de cada círculo (r) deve ser 5.
svg.selectAll('circle')
.data(dataset)
.enter()
.append('circle')
.attr('cx', d=>d[0])
.attr('cy', d=>d[1])
.attr('r',5)
// A partir da variável svg,faça novamente a vinculação com o dataset, criando elementos de texto
// nas mesmas posições dos centros dos círculos. Cada texto mostrará as coordenadas do seu ponto
// correspondente.
svg.selectAll('text')
.data(dataset)
.enter()
.append('text')
.attr('x', d=>d[0])
.attr('y', d=>d[1])
.attr('font-family','sans-serif')
.attr('font-size','11px')
.attr('fill','red')
.text(d=>d[0] + ',' + d[1])
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
scale = d3.scaleLinear()
.range([0,120])
.domain([25,85])
scale(55)
scaleAtividade = d3.scaleLinear().domain([20,60,180]).range([0,120,150])
scaleAtividade(182)
scale2 = d3.scaleLinear().domain([25, 45, 85]).range([0, 80, 120])
scale(100) // retorna 150
value = {
scale.clamp(false); // set clamp to true
return scale(100); //retorna 120
}
// crie aqui a escala horizontal xScale
xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, d => d[0])])
.range([0,svgwidth])
// crie aqui a escala vertical yScale
yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, d => d[1])])
.range([svgheight,0])
scatter2 = {
// DOM.svg() é um método específico do Observable para criar um elemento DOM SVG.
const svg = d3.select(DOM.svg(svgwidth, svgheight))
// Usando a variável svg, faça a vinculação com o dataset, criando círculos para a seleção enter
// Veja o notebook da aula da semana passada para relembrar como fazer isso
// O centro de cada círculo, atributos cx e cy deve ser posicionado de acordo com as
// coordenadas do vetor d[0] e d[1] na escala de eixos. O raio de cada círculo deve ser 5.
svg.selectAll('circle')
.data(dataset)
.enter()
.append('circle')
.attr('cx', d=>xScale(d[0]))
.attr('cy', d=>yScale(d[1]))
.attr('r',5)
// A partir da variável svg,faça novamente a vinculação com o dataset, criando elementos de texto
// nas mesmas posições dos centros dos círculos. Cada texto mostrará as coordenadas do seu ponto
// correspondente.
svg.selectAll('text')
.data(dataset)
.enter()
.append('text')
.attr('x', d=>xScale(d[0]))
.attr('y', d=>yScale(d[1]))
.attr('font-family','sans-serif')
.attr('font-size','11px')
.attr('fill','red')
.text(d=>d[0] + ',' + d[1])
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
margin = {
//Definimos o objeto margin
let margin = {top: 40, right: 40, bottom: 40, left: 40};
return margin;
}
xAxis = d3.axisBottom().scale(xScale)
yAxis = d3.axisLeft().scale(yScale)
dataset = {
let dataset = []
let numDataPoints = 50
let xRange = Math.random() * 1000
let yRange = Math.random() * 1000
for (let i=0; i < numDataPoints; i++) {
let newNumber1 = Math.floor(Math.random() * xRange)
let newNumber2 = Math.floor(Math.random() * yRange)
dataset.push([newNumber1, newNumber2])
}
return dataset;
}
scatter3 = {
// DOM.svg() é um método específico do Observable para criar um elemento DOM SVG.
const outersvg = d3.select(DOM.svg(svgwidth + margin.left + margin.right,
svgheight + margin.top + margin.bottom))
// Depois adicionamos um elemento g no svg que vai transladar a origem
// do gráfico como sendo a origem da área útil do gráfico
const svg = outersvg.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
// Usando a variável svg, faça a vinculação com o dataset, criando círculos para a seleção enter
// Veja o notebook da aula da semana passada para relembrar como fazer isso
// O centro de cada círculo, atributos cx e cy deve ser posicionado de acordo com as
// coordenadas do vetor d[0] e d[1] na escala de eixos. O raio de cada círculo deve ser 5.
svg.selectAll('circle')
.data(dataset)
.enter()
.append('circle')
.attr('cx', d=>xScale(d[0]))
.attr('cy', d=>yScale(d[1]))
.attr('r',5)
// A partir da variável svg,faça novamente a vinculação com o dataset, criando elementos de texto
// nas mesmas posições dos centros dos círculos. Cada texto mostrará as coordenadas do seu ponto
// correspondente.
// svg.selectAll('text')
// .data(dataset)
// .enter()
// .append('text')
// .attr('x', d=>xScale(d[0]))
// .attr('y', d=>yScale(d[1]))
// .attr('font-family','sans-serif')
// .attr('font-size','11px')
// .attr('fill','red')
//.text(d=>d[0] + ',' + d[1])
svg.append('g')
.attr("transform", "translate(0," + svgheight + ")")
.call(xAxis)
svg.append('g')
.call(yAxis)
// Título eixo horizontal
svg.append("text")
.attr("transform", "translate(" + (svgwidth/2) + "," + (svgheight + margin.bottom) + ")")
.style("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.text("Eixo X");
// Título eixo vertical
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (svgheight / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.text("Eixo Y");
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return outersvg.node()
}
xScaleMovie = d3.scaleLinear()
.domain([0, d3.max(moviesdataset, d => d.Budget_M)])
.range([0,svgwidth])
yScaleMovie = d3.scaleLinear()
.domain([0, d3.max(moviesdataset, d => d.Worldwide_Gross_M)])
.range([svgheight,0])
moviesdataset = d3.json('https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/movies.json')
xAxisMovie = d3.axisBottom().scale(xScaleMovie)
yAxisMovie = d3.axisLeft().scale(yScaleMovie).ticks(4)
movies = {
// DOM.svg() é um método específico do Observable para criar um elemento DOM SVG.
const outersvg = d3.select(DOM.svg(svgwidth + margin.left + margin.right,
svgheight + margin.top + margin.bottom))
// Depois adicionamos um elemento g no svg que vai transladar a origem
// do gráfico como sendo a origem da área útil do gráfico
const svg = outersvg.append('g')
.attr("transform", "translate(" + (margin.left+10) + "," + margin.top + ")")
svg.selectAll('circle')
.data(moviesdataset)
.enter()
.append('circle')
.attr('cx', d=>xScaleMovie(d.Budget_M))
.attr('cy', d=>yScaleMovie(d.Worldwide_Gross_M))
.attr('r',4)
.attr('fill', '#333')
//Calcular a soma
let sumWorldwide_Gross_M = 0
let indice
moviesdataset.map(
(d,i) => {
sumWorldwide_Gross_M += d.Worldwide_Gross_M
indice = i+1
}
)
const media = sumWorldwide_Gross_M/indice
const quartil1 = d3.quantile(moviesdataset.map(d=>d.Worldwide_Gross_M), 0.25)
const quartil3 = d3.quantile(moviesdataset.map(d=>d.Worldwide_Gross_M), 0.75)
const iqr = quartil1 - quartil3
const limiteSuperior = media + iqr*1.5
const limiteInferior = media - iqr*1.5
// svg.selectAll('text')
// .data(moviesdataset)
// .enter()
// .append('text')
// .attr('x', d=>xScaleMovie(d.Budget_M))
// .attr('y', d=>yScaleMovie(d.Worldwide_Gross_M))
// .attr('font-family','sans-serif')
// .attr('font-size','11px')
// .text(d=>d.Worldwide_Gross_M)
svg.append('g')
.attr("transform", "translate(0," + svgheight + ")")
.call(xAxisMovie)
svg.append('g')
.call(yAxisMovie)
// Título eixo horizontal
svg.append("text")
.attr("transform", "translate(" + (svgwidth/2) + "," + (svgheight + margin.bottom-5) + ")")
.style("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.text("Budget $(M)");
// Título eixo vertical
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -12 - margin.left)
.attr("x", 0 - (svgheight / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.text("Worldwide Gross $(M)");
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return outersvg.node()
}
md`No Scatterplot existem dois *outliers* com base no atributo *Worldwide_Gross_M*, que são 1328 e 2784. Esses *outliers* foram considerados com base no limite inferior(624.3) e superior(1153.8) do Scatterplot. Esses limites foram calculados com base na média, quartil1, quartil3 e iqr (quartil1 - quartil3). Não visualizei uma correlação entre os atributos *Worldwide_Gross_M* e *Budget_M*.`
d3 = require('d3')
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.