custom scatterplot with nvd3

by Aswin Devarajan

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.css">
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<div id="chart">
  <svg></svg>
</div>

CSS

#chart svg {
  height: 400px;
}

JavaScript

function getData(groups, points) {
  var data = [],
    shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
    random = d3.random.normal();

  for (i = 0; i < groups; i++) {
    data.push({
      key: 'Group ' + i,
      values: []
    });

    for (j = 0; j < points; j++) {
      data[i].values.push({
        x: random() + 3,
        y: Math.floor(Math.random() * 33),
        size: Math.random()
          //, shape: shapes[j % 6]
      });
    }
  }

  return data;
}

//nv.addGraph(function() {
var chart = nv.models.scatterChart()
  .showDistX(false)
  .showDistY(false)
  .color(['red']);

chart.showLegend(false)
chart.interactive(false);
chart.xAxis.showMaxMin(false);
chart.yAxis.showMaxMin(false);
  console.log(Object.getOwnPropertyNames(chart));
  console.log(Object.getOwnPropertyNames(chart.xAxis));



var data = getData(1, 5);

d3.select('#chart svg')
  .datum(data)
  .transition().duration(500)
  .call(chart);

var tester = function(data){return _.map(data[0].values, function(d){return d.x})};
var viva = function(data){return _.map(data[0].values, function(d){return d.y})};


var horizontal = d3.select('#chart svg')
  .append('line')
  .attr({
    x1: 75 + chart.xAxis.scale()(d3.min(tester(data))),
    y1: 30 + chart.yAxis.scale()(10),
    x2: 75 + chart.xAxis.scale()(d3.max(tester(data))),
    y2: 30 + chart.yAxis.scale()(10)
  })
  .style("stroke", "#000")
  .append("text")
  
  
var vertical = d3.select('#chart svg')
  .append('line')
  .attr({
    x1: 75 + chart.xAxis.scale()(3),
    y1: 30 + chart.yAxis.scale()(d3.min(viva(data))),
    x2: 75 + chart.xAxis.scale()(3),
    y2: 30 + chart.yAxis.scale()(d3.max(viva(data)))
  })
  .style("stroke", "#000");



  nv.utils.windowResize(function() {
  chart.update();
  horizontal.attr({
    x1: 75 + chart.xAxis.scale()(0),
    y1: 30 + chart.yAxis.scale()(10),
    x2: 75 + chart.xAxis.scale()(0),
    y2: 30 + chart.yAxis.scale()(10)
  })
});


//return chart;
//});