Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
.attr('transform', `translate(-30,${d3.mean(state.y.range())})
rotate(-90)`)
.text(this.props.yAxisLabel)
.style('font-size', 14)
.attr('text-anchor', 'middle')
stage.append('g').attr('class', 'x-ticks')
.call(updateTicks, 'x', state.x, state.y, state.x.ticks())
stage.append('g').attr('class', 'y-ticks')
.call(updateTicks, 'y', state.x, state.y, state.y.ticks())
// Add trend line.
if (this.props.showRegressionLine)
stage.append('line').attr('class', 'line-ols')
.style('stroke', color.primary)
// Add error lines.
if (this.props.showErrorLines)
stage.append('g').attr('class', 'error-lines')
.selectAll('line').data(this.state.errors)
.enter().append('line')
.style('stroke', this.props.colorAccessor)
.style('stroke-width', 2)
.style('stroke-dasharray', '2, 2')
// Add error squares.
if (this.props.showErrorSquares)
stage.append('g').attr('class', 'error-squares')
.selectAll('rect').data(this.state.errors).enter().append('rect')
.style('pointer-events', 'none')
.style('fill', (d, i) => {
render() {
return <svg height="{310}" width="{310}">
<g>
<circle style="{{fill:" r="{25}"></circle>
<line style="{{stroke:" y2="{-50}" x2="{0}" y1="{-25}" x1="{0}"></line>
</g>
<g>
<circle style="{{fill:" r="{25}"></circle>
<line style="{{stroke:" y2="{50}" x2="{0}" y1="{25}" x1="{0}"></line>
</g>
<g transform="translate(160, 160)">
<text fill="{color.primary}" transform="translate(-20, -60)">
Beta 1 - The y-intercept of the regression line.
</text>
<text fill="{color.secondary}" transform="translate(-20, 60)">
Beta 2 - The slope of the regression line.
</text>
<text transform="{`translate(${0},">
<tspan>{d3.format('.2f')(this.props.betas[0])}</tspan>
<tspan> + </tspan></text></g></svg>
betas={[betas[0], betas[2]]}
mode='point'
xAxisLabel='x2'
yAxisLabel=''
showErrorSquares={false}
showErrorLines={false}
showRegressionLine={true}
points={this.state.points}
locationAccessor={this._locationAccessorX2Y}
onDragNob={this._onDragPointX2Y}
style={{float: 'left'}} />
<div style="{{clear:'both'}}">
<section style="{{padding:">
<p>
By playing with the dots, you can see that, when there are multiple variables involved, the true relationships can be very counterintuitive. That's why we have statistics: to make us unsure about things.
</p>
<p>
Below, see if you can choose the betas to minimize the sum of squared errors.
</p>
<p>
There are many other prediction techniques much more complicated than OLS, like logistic regression, weighted least-squares regression, robust regression and the growing family of non-parametric methods.
</p></section></div>
render() {
return <svg height="{310}" width="{310}">
<g>
<circle style="{{fill:" r="{25}"></circle>
<line style="{{stroke:" y2="{-50}" x2="{0}" y1="{-25}" x1="{0}"></line>
</g>
<g>
<circle style="{{fill:" r="{25}"></circle>
<line style="{{stroke:" y2="{50}" x2="{0}" y1="{25}" x1="{0}"></line>
</g>
<g transform="translate(160, 160)">
<text fill="{color.primary}" transform="translate(-20, -60)">
Beta 1 - The y-intercept of the regression line.
</text>
</g></svg>
render() {
return <svg height="{310}" width="{310}">
<g>
<circle style="{{fill:" r="{25}"></circle>
<line style="{{stroke:" y2="{-50}" x2="{0}" y1="{-25}" x1="{0}"></line>
</g>
<g>
<circle style="{{fill:" r="{25}"></circle>
<line style="{{stroke:" y2="{50}" x2="{0}" y1="{25}" x1="{0}"></line>
</g>
<g transform="translate(160, 160)">
<text fill="{color.primary}" transform="translate(-20, -60)">
Beta 1 - The y-intercept of the regression line.
</text>
</g></svg>
getDefaultProps() {
return {
width: 500,
height: 400,
errorSquareColor: color.primary,
regressionPlaneColor: color.secondary,
pointSize: 0.015,
valueAccessor: d => d.value,
colorAccessor: d => d.color,
locationAccessor: d => d.point,
onDragPoint: () => undefined,
regressionNob: null,
showPointNobs: true,
betas: null,
}
},
getInitialState() {
render() {
var {width, height} = this.props
return <svg>
<g style="{{cursor:" transform="{`translate(${this.state.point})`}">
<circle fill="rgba(0, 0, 0, 0.1)" r="{20}"></circle>
<circle fill="{color.primary}" r="{4}"></circle>
</g>
</svg>
}
})