dataset = [ [5, 20], [480, 90], [250, 50],
[100, 33], [330, 95], [410, 12],
[475, 44], [25, 67], [85, 21],
[220, 88], [650, 100] ]
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) => 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])
.attr('font-family', 'arial')
.attr('font-size', '11px')
.attr('fill', 'red')
.text((d) => `${d[0]},${d[1]}`)
// 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.
// 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 xScaxle
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));
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]))
.attr("font-family", "arial")
.attr("font-size", "11px")
.attr("fill", "red")
.text((d) => `${d[0]},${d[1]}`);
// 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 = {
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
// 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]))
.attr("font-family", "arial")
.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");
// 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();
}
// 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()
}
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.
