batch gradient descent animation (wip)

batch gradient descent test

Attribute Information:

CRIM: per capita crime rate by town
ZN: proportion of residential land zoned for lots over 25,000 sq.ft.
INDUS: proportion of non-retail business acres per town
CHAS: Charles River dummy variable (= 1 if tract bounds river; 0 otherwise)
NOX: nitric oxides concentration (parts per 10 million)
RM: average number of rooms per dwelling
AGE: proportion of owner-occupied units built prior to 1940
DIS: weighted distances to five Boston employment centres
RAD: index of accessibility to radial highways
TAX: full-value property-tax rate per $10,000
PTRATIO: pupil-teacher ratio by town
B: 1000(Bk - 0.63)^2 where Bk is the proportion of blacks by town
LSTAT: % lower status of the population
MEDV: Median value of owner-occupied homes in $1000's

<!DOCTYPE html>
<meta charset="utf-8">

function translate(x, y) {
  return 'translate('+x+','+y+')'
}

var params = d3.select('#params'),
  xsrc = d3.select('#x-access'),
  ysrc = d3.select('#y-access')

var mount = d3.select('#mount'),
  margin = { top: 20, right: 20, bottom: 80, left: 50 },
  width = +mount.attr('width') - margin.left - margin.right,
  height = +mount.attr('height') - margin.top - margin.bottom,
  svg = mount.append('g')
    .attr('transform', translate(margin.left, margin.top))

var x = d3.scaleLinear()
  .range([0, width])
var y = d3.scaleLinear()
  .range([height, 0])
var gx = svg.append('g')
  .attr('transform', translate(0, height))
var gy = svg.append('g')

d3.csv('housing.csv', function(row, i, cols) {
  popcols(cols)

return R.map( R.tryCatch(parseFloat, R.always(null)), row )
}, function(error, data) {
  if (error) throw error
  var renderData = R.partial(render, [data])
  xsrc.on('change', renderData)
  ysrc.on('change', renderData)
  renderData()
})

function render(data) {
  var xacc = R.prop(xsrc.node().value)
  var yacc = R.prop(ysrc.node().value)

x.domain([0, d3.max(data, xacc)])
  y.domain([0, d3.max(data, yacc)])

gx.transition().duration(500).call(d3.axisBottom(x))
  gy.transition().duration(500).call(d3.axisLeft(y))

var node = svg.selectAll('.node')
    .data(data)

node.enter().append('circle')
    .classed('node', true)
    .attr('r', 4)
  .merge(node)
    .transition().duration(500)
    .attr('cx', R.compose(x, xacc))
    .attr('cy', R.compose(y, yacc))

node.exit().remove()
}

function popcols(cols) {
  params.selectAll('select')
  .each(function(_, i) {
    d3.select(this).selectAll('option')
    .data(cols).enter()
    .append('option')
      .attr('value', R.identity)
      .property('selected', function(d, ii) { return ii === (i ? cols.length - 1 : 0) })
      .text(R.identity)
  })
}

</script>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/ramda/0.23.0/ramda.min.js