dataset = [ [5, 20], [480, 90], [250, 50],
[100, 33], [330, 95], [410, 12],
[475, 44], [25, 67], [85, 21],
[220, 88] ]
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("circles")
.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)
scale2 = d3.scaleLinear().domain([25, 45, 85]).range([0, 80, 120])
scale(100) // retorna 150
value = {
scale.clamp(true); // 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("circles")
.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(xScale)
yAxis = d3.axisLeft(yScale)
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 + ")")
svg.selectAll("circles")
.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]);
// Chamadas para desenhar os eixos
svg.append("g")
.attr("transform", "translate(0,"+svgheight+")")
.call(xAxis)
svg.append("g")
.call(yAxis)
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");
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x", 0 - (svgheight/2))
.attr("dy", "1em")
.attr("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()
}
moviesdataset = d3.json('https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/movies.json')
xMovieScale = d3.scaleLinear().domain([0, d3.max(moviesdataset, d => d.Worldwide_Gross_M)]).range([0, svgwidth])
yMovieScale = d3.scaleLinear().domain([0, d3.max(moviesdataset, d => d.Budget_M)]).range([svgheight, 0])
xMovieAxis = d3.axisBottom(xMovieScale)
yMovieAxis = d3.axisLeft(yMovieScale)
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 + "," + margin.top + ")")
svg.selectAll("circles")
.data(moviesdataset).enter()
.append("circle")
.attr("cx", d => xMovieScale(d.Worldwide_Gross_M))
.attr("cy", d => yMovieScale(d.Budget_M))
.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.
// Chamadas para desenhar os eixos
svg.append("g")
.attr("transform", "translate(0,"+svgheight+")")
.call(xMovieAxis)
svg.append("g")
.call(yMovieAxis)
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("Worldwide_Gross_M");
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x", 0 - (svgheight/2))
.attr("dy", "1em")
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.text("Budget_M")
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return outersvg.node()
}
Nope. Não há uma correlação entre essas variáveis. Como outlier, temos presente o filme "Avatar", com um altíssimo investimento superior a 2600.
d3 = require('d3')
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.
