Published
Edited
Dec 10, 2019
1 fork
2 stars
chart = {
const data = []
for (let i = 0; i < 99; i++) {
data.push({
'x': d3.randomUniform(0, 9)(),
'y': d3.randomUniform(0, 9)(),
})
}
var margin = {top: 20, right: 20, bottom: 30, left: 40}
var width = 960 - margin.left - margin.right
var height = 500 - margin.top - margin.bottom
var xScale = d3.scaleLinear().range([0, width])
var yScale = d3.scaleLinear().range([height, 0])
var xAxis = d3.axisBottom().scale(xScale)
var yAxis = d3.axisLeft().scale(yScale)
const svg = d3.create("svg")
.attr("width", 900)
.attr("height", 600)
const g = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
xScale.domain(d3.extent(data, function (d) { return d.y })).nice()
yScale.domain(d3.extent(data, function (d) { return d.x })).nice()
g.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis)
g.append('g')
.attr('class', 'y axis')
.call(yAxis)
// regression
let meanX = []
let meanY = []
Array.from(data).forEach(e => meanX.push(e.x))
Array.from(data).forEach(e => meanY.push(e.y))
meanX = _.mean(meanX)
meanY = _.mean(meanY)
let bTop = 0
let bBottom = 0
Array.from(data).forEach(e => { bTop += (e.x - meanX) * (e.y - meanY) })
Array.from(data).forEach(e => { bBottom += (Math.pow(e.x - meanX, 2)) })
const b = bTop / bBottom
const a = meanY - b * meanX
svg.append('line')
.style('stroke', 'purple')
.attr('x1', xScale(0))
.attr('y1', yScale(a + b * 0))
.attr('x2', xScale(9))
.attr('y2', yScale(a + b * 9))
// regression end
g.selectAll('.dot')
.data(data)
.enter()
.append('circle')
.attr('class', 'dot')
.attr('r', 3.5)
.attr('cx', function (d) { return xScale(d.y) })
.attr('cy', function (d) { return yScale(d.x) })
.attr('fill-opacity', '0')
.attr('stroke-width', 1)
.attr('stroke', function (d) { return (d.x > a + b * d.y) ? 'yellowgreen' : 'steelblue' })
return svg.node();
}
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.
