// define variables
var margin = {
		top: 0,
		right: 20,
		bottom: 50,
		left: 70
	},
	width = 500,
	height = 400;

var formatAsNumber = d3.format(",.0f")

var segmentName = 'birthweight';

// standard insertion of svg element
var svg = d3.select("#chart")
	.append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom);

var segments = svg.append("g")
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
	.attr("class", "segments");

// add labels
segments.append("text")
	.attr("class", "x label")
	.attr("x", width / 2)
	.attr("y", height + 40)
	.style("text-anchor", "middle")
	.text(mapping.titleWeight);

segments.append("text")
	.attr("transform", "rotate(-90)")
	.attr("class", "y label")
	.attr("x", -height / 2)
	.attr("y", -40)
	.style("text-anchor", "middle")
	.text(mapping.titleValue);

// call and use data
d3.csv("data.csv", function(error, data) {
	if (error) return console.error('error');

	// filter by filter category, if desired
	data = data.filter(function(d) {
		if (mapping.filterCat != '') {
			return d[mapping.filterName] == mappping.filterCat;
		} else {
			return d;
		}
	});

	// set scales
	scales = applyData(data);

	// add the comets
	drawComets(segments, data);

	// adding x axis, and y axis
	addAxis(segments, scales.size, 'bottom');
	addAxis(segments, scales.value, 'left')

});