Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
dataset = {
numPoints;
return generateRandomDataset(numPoints)
}
scatter1 = {
// DOM.svg() é um método específico do Observable para criar um elemento DOM SVG.
const outersvg = d3.select(DOM.svg(width + margin.left + margin.right,
height + 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 + ")")
// atualizamos as escalas
xScale.domain([0, d3.max(dataset, d => d[0])])
.range([0, width])
yScale.domain([0, d3.max(dataset, d => d[1])])
.range([height, 0])
// 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)
.on("mouseenter",function(){
d3.select(this).attr("fill","red")
})
.on("mouseout",function(){
d3.select(this).attr("fill","black")
})
// Depois adicione os eixos e os labels
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.attr("class", "x axis")
.call(xAxis)
svg.append("text")
.attr("transform", "translate(" + (width/2) + "," + (height + 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 - (height / 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()
}
viewof numPoints = number({value: 50,
title: "Número de pontos",
submit: "Atualizar"})
// Primeiro definimos o objeto margin
margin = {
return {top: 40, right: 40, bottom: 40, left: 40}
}
// Depois definimos width e height como as dimensões internas
// da área do gráfico (área útil)
width = 800 - margin.left - margin.right
height = 200 - margin.top - margin.bottom
// Criando as escalas
xScale = d3.scaleLinear()
yScale = d3.scaleLinear()
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
}
dataset2 = generateRandomDataset(points)
scatter2 = {
// DOM.svg() é um método específico do Observable para criar um elemento DOM SVG.
const outersvg = d3.select(DOM.svg(width + margin.left + margin.right,
height + margin.top + margin.bottom))
// const svg = outersvg.append('g')
// .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return outersvg.node()
}
viewof points = number({value: 50,
title: "Número de pontos",
submit: "Atualizar"})
updateScatter(dataset2)
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 + ")")
// // atualizamos as escalas
// xScale.domain([0, d3.max(dataset2, d => d[0])])
// .range([0, width])
// yScale.domain([0, d3.max(dataset2, d => d[1])])
// .range([height, 0])
// // Depois adicione os elementos círculos
// svg.selectAll("circle")
// .data(dataset2)
// .enter()
// .append("circle")
// .transition()
// .attr("cx", d => xScale(d[0]))
// .attr("cy", d => yScale(d[1]))
// .attr("r", 4)
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.attr("class", "x axis")
.call(xAxis)
svg.append("text")
.attr("transform", "translate(" + (width/2) + "," + (height + 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 - (height / 2))
.attr("dy", "10")
.text("Eixo Y")
return svg
}
updateScales = function(data) {
xScale.domain([0, d3.max(data, d => d[0])])
.range([0, width])
yScale.domain([0, d3.max(data, d => d[1])])
.range([height, 0])
}
updateScatter = function(data) {
//Atualiza escalas
updateScales(data)
// Removendo elementos sem dados
vis.selectAll("circle")
.data(data)
.exit()
.remove()
// Adiciona novos elementos
vis.selectAll("circle")
.data(data)
.enter()
.append("circle")
.transition()
.duration(1000)
.delay(500)
.attr("cx", d => xScale(d[0]))
.attr("cy", d => yScale(d[1]))
.attr("r", 4)
// Atualiza os elementos existentes
vis.selectAll("circle")
.data(data)
.transition()
.duration(1000)
.delay(500)
.delay((d,i) => i/data.length * 1000)
.duration(1000)
.attr("cx", d => xScale(d[0]))
.attr("cy", d => yScale(d[1]))
.attr("r", 4)
// atualiza os eixos
vis.select(".x.axis")
.transition()
.duration(1000)
.delay(500)
.call(xAxis)
vis.select(".y.axis")
.transition()
.duration(1000)
.delay(500)
.call(yAxis)
}
d3 = require('d3')
import {button, number} 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.
