UNPKG

nvd3

Version:

A reusable charting library written in d3.js

65 lines (53 loc) 1.42 kB
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="../build/nv.d3.css" rel="stylesheet" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script> <script src="../build/nv.d3.js"></script> <style> text { font: 12px sans-serif; } svg { display: block; } html, body, svg { margin: 0px; padding: 0px; height: 100%; width: 100%; } </style> </head> <body> <svg id="test1"></svg> <script> nv.addGraph(function() { var chart = nv.models.scatter() .margin({top: 20, right: 20, bottom: 20, left: 20}) .pointSize(function(d) { return d.z }) .useVoronoi(false); d3.select('#test1') .datum(randomData()) .transition().duration(500) .call(chart); nv.utils.windowResize(chart.update); return chart; }); function randomData() { var data = []; for (i = 0; i < 2; i++) { data.push({ key: 'Group ' + i, values: [] }); for (j = 0; j < 100; j++) { data[i].values.push({x: Math.random(), y: Math.random(), z: Math.random()}); } } return data; } </script> </body> </html>