NVD3 Scatter Bubble Chart
http://stackoverflow.com/questions/23461979/change-y-axis-labels-in-nvd3-scatter-chart
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">
<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()
, y: Math.floor(Math.random() * 33)
, size: Math.random()*4000
//, shape: shapes[j % 6]
});
}
}
return data;
};
//nv.addGraph(function() {
var chart = nv.models.scatterChart()
.showDistX(true)
.showDistY(true)
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(d3.format('.02f'));
chart.yAxis.tickFormat(d3.format('.02f'));
chart.yAxis.tickValues(['2','4','8','16','32']);
chart
.tooltipContent( function(key, x, y){
return key;
});
d3.select('#chart svg')
.datum(getData(4,40))
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
//return chart;
//});