var data = [ [5,2], [15,20], [18,24], [28,32], [35,40], [58,69] ]; var height = 550, width = 600, padding = 50; d3.select('svg').attr('width', width + 2 * padding) .attr('height', height + 2 * padding ). style('padding', 50); var xScale = d3.scale.linear() .domain(d3.extent(data, function(d) { return d[0]})) .range([0, width]); //The width var yScale = d3.scale.linear() .domain(d3.extent(data, function(d) { return d[1]})) .range([height, 0]); //The height //Create x- axis var xAxis = d3.svg.axis() .scale(xScale) //pass scale .orient("bottom"); //orient axis horizontal //Plot axis as d3.select("svg") .append("g") .call(xAxis) //Pass created axis .attr("transform", "translate(0,"+ height +")"); //Translate by height //Create Y-axis var yAxis = d3.svg.axis() .scale(yScale) //pass scale .orient("left"); //orient axis verticle //Plot axis as d3.select("svg") .append("g") .call(yAxis); //Pass created axis
<svg></svg>