dataset = [ [650,100],[5, 20], [480, 90], [250, 50],
[100, 33], [330, 95], [410, 12],
[475, 44], [25, 67], [85, 21],
[220, 88] ]
svgwidth = 500
svgheight = 150
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)
svg.selectAll('text')
.data(dataset)
.enter()
.append('text')
.attr('x', d=> d[0])
.attr('y', d=> d[1])
.text(d=>`[${d[0]},${d[1]}]`)
.style('fill', 'red')
// 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.
// 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(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]. O raio de cada círculo (r) 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)
svg.selectAll('text')
.data(dataset)
.enter()
.append('text')
.attr('x', d=> xScale(d[0]))
.attr('y', d=> yScale(d[1]))
.text(d=>`[${d[0]},${d[1]}]`)
.style('fill', 'red')
// 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.
// 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;
}
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('circle')
.data(dataset)
.enter()
.append('circle')
.attr('cx', d=> xScale(d[0]))
.attr('cy', d=> yScale(d[1]))
.attr('r', 5)
svg.selectAll('text')
.data(dataset)
.enter()
.append('text')
.attr('x', d=> xScale(d[0]))
.attr('y', d=> yScale(d[1]))
.text(d=>`[${d[0]},${d[1]}]`)
.style('fill', 'red')
svg.append("g")
.attr("transform", "translate(" + (svgwidth/2) + "," + margin.top + ")")
.call(xAxis)
svg.append("g")
.attr("transform", "translate(" + svgheight + "," + margin.top + ")")
.call(yAxis)
// 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.
// 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
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return outersvg.node()
}
yAxis = d3.axisLeft(yScale);
xAxis = d3.axisBottom(xScale);
moviesdataset = d3.json('https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/movies.json')
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 + ")")
// Escreva aqui o código
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return outersvg.node()
}
Escreva sua resposta aqui.
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.
