dataset = [ [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))
svg.selectAll('circle')
.data(dataset)
.enter()
.append('circle')
.attr('cx', d => xScale(d[0]))
.attr('cy', d => yScale(d[1]))
.attr('r', 3)
// 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.
// 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]-5))
.attr('y', d=>yScale(d[1]-10))
.attr('fill', 'red')
.text((d)=>d[0] + ',' + d[1])
.style("font-family", "sans-serif")
.style("font-size", "10px")
// 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])
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.
// 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 + ")")
// 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.
// DOM.svg() é um método específico do Observable para criar um elemento DOM SVG.
svg.selectAll('circle')
.data(dataset1)
.enter()
.append('circle')
.attr('cx', d => xScale(d[0]))
.attr('cy', d => yScale(d[1]))
.attr('r', 3)
// 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.
// 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(dataset1)
.enter()
.append('text')
.attr('x', d=>xScale(d[0]-5))
.attr('y', d=>yScale(d[1]-10))
.attr('fill', 'red')
.text((d)=>d[0] + ',' + d[1])
.style("font-family", "sans-serif")
.style("font-size", "10px")
// 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(xAxis)
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("g")
.call(yAxis)
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return outersvg.node()
}
xAxis = d3.axisBottom()
.tickValues([0,200,400])
.scale(xScale);
yAxis = d3.axisLeft()
.tickValues([0,45,90])
.scale(yScale);
dataset1 = {
let dataset1 = []
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)
dataset1.push([newNumber1, newNumber2])
}
return dataset1;
}
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.
