Data Visualization Enthusiast, professor of Computer Science at Universidade Federal do Ceara, Fortaleza, Brazil.
Published
Edited
Sep 14, 2022
128 forks
1 star
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))
// 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 xScale
// crie aqui a escala vertical yScale
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.
// 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.
