D3 Examples - batch gradient descent animation (wip)

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

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<div id="params">
  (x: <select id="x-access"></select>,
  y: <select id="y-access"></select>)
</div>
<svg id="mount" width="960" height="540" font-family="sans-serif" font-size="10" text-anchor="middle"></svg>
​
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.23.0/ramda.min.js"></script>
​
<style>
  .node {
    fill: aliceblue;
    fill-opacity: 0.5;
    stroke: steelblue;
    stroke-opacity: 0.5;
    stroke-width: 1;
    
  }
</style>
​
<script>
​
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>
    