d3.js labeler test

by Anonymous

HTML

<script src="https://cdn.rawgit.com/mbostock/d3/master/d3.min.js"></script>
<script src="https://cdn.rawgit.com/tinker10/D3-Labeler/master/labeler.js"></script>
<!DOCTYPE html>
<svg class="chart"></svg>
<script src=""></script>

JavaScript

//Width and height
var w = 800;
var h = 600;
var padding = 30;

//Dynamic, random dataset
var dataset = [];					//Initialize empty array
var numDataPoints = 100;				//Number of dummy data points to create
var xRange = Math.random() * 1000;	//Max range of new x values
var yRange = Math.random() * 1000;	//Max range of new y values
for (var i = 0; i < numDataPoints; i++) {					//Loop numDataPoints times
    var newNumber1 = Math.floor(Math.random() * xRange);	//New random integer
    var newNumber2 = Math.floor(Math.random() * yRange);	//New random integer
    dataset.push([newNumber1, newNumber2]);					//Add new number to array
}

var getRandomStr = function(){
    var randomStrLength = Math.floor(Math.random() * 10) + 5,
    pool = 'abcdefghijklmnopqrstuvwxyz1234567890',
    randomStr = '';
    
    var pl = pool.length
    for (var i = 0; i < randomStrLength; i++) {
         var randomChar = pool.substr(Math.floor(Math.random() * pl), 1);
         randomStr += randomChar;     
    }
    
    return randomStr;
}

//Create scale functions
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);

var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);

var rScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([2, 20]);

//Define X axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);

//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);

//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);

//Create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);

//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);

var label_array = [];
var anchor_array = [];

//Create...