Public
Edited
Dec 12, 2022
cars = d3.csv("https://gist.githubusercontent.com/emanueles/8eca7bdabab22c4c128b832e75082242/raw/213051ea58e9bc048a338693402bdc204de99f06/cars_82.csv", d3.autoType)
sinistros3 = FileAttachment("sinistros3.json").json()
comparing = (a, b) => b.MES - a.MES
barras = {
const width = 600
const height = 900
const svg = d3.select(DOM.svg(width, height))
sinistros3.sort(comparing)
svg.selectAll('rect')
.data(sinistros3)
.enter()
.append('rect')
.attr('x', 10)
.attr('y', (d, i) => i * 30 + 20)
.attr('height', 20)
.attr('width', d => d.MES *2)
.attr('fill', "pink")
svg.selectAll('text')
.data(sinistros3)
.enter()
.append('text')
.attr('x', d => d.MES * 2 + 13)
.attr('y', (d, i) => i * 30 + 20 + 15)
.text(d => `MES ${d.MES} DE 2019: ${d.NATUREZA}`)
return svg.node()
}
margin = {
let margin = {top:50, right: 50, bottom: 50, left: 50};
return margin;
}
width = 500
xScale = d3.scaleLinear()
.domain([0 , d3.max(cars, d => d.hp)])
.range([0, width])
xAxis = d3.axisBottom(xScale)
height = 150
yScale = d3.scaleLinear()
.domain([0 , d3.max(cars, d => d.mpg*1.609)])
.range([height, 0])
yAxis = d3.axisLeft(yScale).ticks(5)
scatter = {
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 + ")")
svg.selectAll('circle')
.data(cars)
.enter()
.append('circle')
.attr('cx', d => xScale(d.hp))
.attr('cy', d => yScale(d.mpg))
.attr('r', 5)
svg.append('a')
.attr('transform', "translate(0," + height + ")" )
.call(xAxis)
svg.append('a')
.attr('transform', "translate(0, 0)" )
.call(yAxis)
svg.append("text")
.attr("transform", "translate(" + (width/2) + "," + (height +
margin.bottom) + ")")
.style("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.text("Cavalos de Potência");
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.text("Aceleração(KM/H)");
return outersvg.node()
}
A correlação entre aceleração e potência é irrelevante, pois ao variar a potencia a aceleração algumas vezes decresce ou pouco varia. Há um outliers com alta aceleração e alta potencia(vwpickup).
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.
