// common attributes
var width = 640;
var height = 640;
var padding = 30;

// generate a random data set
var dataset = [];
var range = 1000;
var n = 25;
for (var i = 0; i < n; ++i)
{
    dataset.push(Math.round(Math.random() * range));
}

console.log(dataset);

// define scales
var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset)])
    .range([padding, width - padding * 2]);

var yScale = d3.scale.linear()
    .domain([0, dataset.length - 1])
    .range([height - padding, padding]);

// create svg element
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

// populate data
svg.selectAll("line")
    .data(dataset)
    .enter()
    .append("line")
    .attr("x1", padding)
    .attr("y1", function(d, i) {
        return yScale(i);
    })
    .attr("x2", function(d) {
        return xScale(d);
    })
    .attr("y2", function(d, i) {
        return yScale(i)
    })
    .attr("stroke-dasharray", "1,1")
    .attr("class", "grid-line")

svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return xScale(d);
    })
    .attr("cy", function(d, i) {
        return yScale(i);
    })
    .attr("r", 5);

// define axes
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(10);

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

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(dataset.length);

svg.append("g")
    .attr("class", "axis")
    .attr("id", "left-axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);