Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
dataset = {
numPoints;
return generateRandomDataset(numPoints)
}
//dataset = generateRandomDataset(50)
//dataset2 = {
// points;
// return generateRandomDataset(points)
//}
viewof points = number({value:50, title:"Número de pontos", submit:"Atualizar"})
dataset2 = generateRandomDataset(points)
updateScales = function(dataset2) {
xScale.domain([0, d3.max(dataset2, d => d[0])])
.range([0, width])
yScale.domain([0, d3.max(dataset2, d => d[1])])
.range([height, 0])
}
updateScatter = function(dataset2) {
// Removendo elementos sem dados
vis.selectAll("circle")
.data(dataset2)
.exit()
.remove()
// adiciona novos elementos
vis.selectAll("circle")
.data(dataset2)
.enter()
.append("circle")
.attr("cx", d => xScale(d[0]))
.attr("cy", d => yScale(d[1]))
.attr("r", 4)
// atualiza os elementos existentes
vis.selectAll("circle")
.data(dataset2)
.attr("cx", d => xScale(d[0]))
.attr("cy", d => yScale(d[1]))
.attr("r", 4)
// atualiza os eixos
vis.select(".x.axis")
.call(xAxis)
vis.select(".y.axis")
.call(yAxis)
updateScales(dataset2)
}
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 + ")")
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
}
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.
