Data Visualization Enthusiast, professor of Computer Science at Universidade Federal do Ceara, Fortaleza, Brazil.
Published
Edited
May 4, 2020
53 forks
dataset = generateRandomDataset(50)
scatter1 = {
// DOM.svg() é um método específico do Observable para criar um elemento DOM SVG.
const outersvg = d3.select(DOM.svg(totalwidth, totalheight))
// 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 + ")")
// Depois adicione os elementos círculos
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", d => xScale(d[0]))
.attr("cy", d => yScale(d[1]))
.attr("r", 4)
// Depois adicione os eixos e os labels
svg.append("g")
.attr("transform", "translate(0," + svgheight + ")")
.attr("class", "x axis")
.call(xAxis)
svg.append("text")
.attr("transform", "translate(" + (svgwidth/2) + "," + (svgheight + margin.bottom) + ")")
.attr("class", "label")
.text("Eixo X")
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
svg.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (svgheight / 2))
.attr("dy", "10")
.text("Eixo Y")
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return outersvg.node()
}
// Acrescente o botão aqui
// Primeiro definimos o objeto margin
margin = {
return {top: 40, right: 40, bottom: 40, left: 40}
}
totalwidth = 800
totalheight = 200
// Depois definimos width e height como as dimensões internas
// da área do gráfico (área útil)
svgwidth = totalwidth - margin.left - margin.right
svgheight = totalheight - margin.top - margin.bottom
// Criando as escalas
xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, d => d[0])])
.range([0, svgwidth])
yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, d => d[1])])
.range([svgheight, 0])
xAxis = d3.axisBottom()
.scale(xScale)
.ticks(5)
//.tickValues([0, 150, 300, 450, 600]);
yAxis = d3.axisLeft()
.scale(yScale)
.ticks(5)
generateRandomDataset = function(numDataPoints) {
let dataset = []
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)
dataset.push([newNumber1, newNumber2])
}
return dataset;
}
scatter2 = {
// DOM.svg() é um método específico do Observable para criar um elemento DOM SVG.
const outersvg = d3.select(DOM.svg(totalwidth, totalheight))
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return outersvg.node()
}
vis = {
// Inicialização da Visualização
d3.select(scatter2).select("#chart").remove()
// 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
let svg = d3.select(scatter2).append('g')
.attr("id", "chart")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
svg.append("g")
.attr("transform", "translate(0," + svgheight + ")")
.attr("class", "x axis")
.call(xAxis)
svg.append("text")
.attr("transform", "translate(" + (svgwidth/2) + "," + (svgheight + margin.bottom) + ")")
.attr("class", "label")
.text("Eixo X")
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
svg.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (svgheight / 2))
.attr("dy", "10")
.text("Eixo Y")
return svg
}
d3 = require('d3')
import {button} from "@jashkenas/inputs"
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.
