Public
Edited
Sep 11, 2023
cars = d3.csv("https://gist.githubusercontent.com/emanueles/a61f68d8f7616733b72ec3c833941a9d/raw/9804e58a38c0ea92f69c599a37328502271f4adb/autos_mpg_78.csv", d3.autoType)
compareF = (a, b) => a.horsepower - b.horsepower
barras4 = {
const width = 600
const height = 400
// DOM.svg() é um método específico do Observable para criar um elemento DOM SVG.
const svg = d3.select(DOM.svg(width, height))
cars.sort(compareF) //aqui os dados são ordenados
svg.selectAll('rect') // Seleciona todos os retângulos filhos de svg (nesse caso, uma seleção vazia)
.data(cars) // Vincula arrayOfNumbers com DOM elementos <rect/>, produzindo seleções .enter(),.exit()
.enter()// Retorna a parte dos dados que é nova ("entering") e ainda não está vinculada aos elementos DOM
.append('rect') // Para cada item de dado, adiciona um <rect /> ao svg selecionado
.attr('x', 10) // Configura a posição x de acordo com o índice do vetor
.attr('y', (d, i) => i * 30 + 20) // Configura a posição y de cada barra de acordo com o índice do vetor
.attr('height', 20) //Configura a largura de cada barra
.attr('width', (d, i) => d.horsepower) // Configura a altura de cada barra
.attr('fill', "DarkCyan") // Configura a cor de preenchimento de cada barra
svg.selectAll('text')
.data(cars)
.enter()
.append('text')
.attr('x', (d, i) => d.horsepower + 20)
.attr('y', (d, i) => i * 30 + 35 )
.text((d,i) => d.horsepower + ': ' + d.car_name)
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
scatter = {
const outersvg = d3.select(DOM.svg(svgwidth + margin.left + margin.right,
svgheight + margin.top + margin.bottom))
const svg = outersvg.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
svg.selectAll('circle')
.data(cars)
.enter()
.append('circle')
.attr('cx', d => xScale(d.horsepower))
.attr('cy', d => yScale(d.mpg))
.attr('r', 5)
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('Cavalos')
svg.append('g')
.attr('class', 'y axis')
.call(yAxis)
svg.append('text')
.attr('class', 'label')
.attr('transform', 'rotate(-90)')
.attr('y', 0 - margin.left + 10)
.attr('x', 0 - (svgheight / 2))
.attr('dy', '10')
.text('MPG')
return outersvg.node()
}
xScale = d3.scaleLinear()
.domain([0, d3.max(cars, d => d.horsepower)])
.range([0, svgwidth])
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.
xAxis = d3.axisBottom()
.scale(xScale)
.ticks(5)
yScale = d3.scaleLinear()
.domain([0, d3.max(cars, d => d.mpg)])
.range([svgheight, 0])
yAxis = d3.axisLeft()
.scale(yScale)
.ticks(5)
margin = {
//Definimos o objeto margin
let margin = {top: 40, right: 40, bottom: 40, left: 50};
return margin;
}
svgwidth = 500
svgheight = 500
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.
