danharr/data.csv

## data.csv

          
            name
            age

            
              jack
              2

            
              tim
              22

            
              john
              30

            
              mary
              58

            
              pauline
              24

## index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>show an axis from loaded CSV</title>
<script src="http://d3js.org/d3.v3.min.js"></script>

<style>
.axis path,
    .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
}
    .axis text {
        font-family: sans-serif;
        font-size: 11px;
}


</style>
</head>
<body>
<script type="text/javascript">


var dataset;  //Declare global var


d3.csv("data.csv", function(x) {
        //Hand CSV data off to global variable so it's accessible later.
        dataset = x;
        //Call some other functions that
        //generate your visualization, e.g.:
        axis();

});


function axis() {


     var x = d3.scale.linear()
    .domain([0,60])
    .range([0,400]);


var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .tickPadding(8);

var svg = d3.select('body').append('svg')
    .attr('class', 'chart')
    .attr('width', 500)
    .attr('height', 500);


svg.append('g')
  .attr('class', 'x axis')
   .attr('transform', 'translate(80,80)')
  .call(xAxis);

  };


</script>


</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title>show an axis from loaded CSV</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<style>
	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}
	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}


	</style>
	</head>
	<body>
	<script type="text/javascript">


	var dataset; //Declare global var



	d3.csv("data.csv", function(x) {
	//Hand CSV data off to global variable so it's accessible later.
	dataset = x;
	//Call some other functions that
	//generate your visualization, e.g.:
	axis();

	});


	function axis() {


	var x = d3.scale.linear()
	.domain([0,60])
	.range([0,400]);


	var xAxis = d3.svg.axis()
	.scale(x)
	.orient('bottom')
	.tickPadding(8);

	var svg = d3.select('body').append('svg')
	.attr('class', 'chart')
	.attr('width', 500)
	.attr('height', 500);



	svg.append('g')
	.attr('class', 'x axis')
	.attr('transform', 'translate(80,80)')
	.call(xAxis);

	};



	</script>


	</body>
	</html>