phoebebright/index.html

## readme.mkd

      
    Raw
  

              readme.mkd
            
          
    The simplest example of an axis - Data has a range of 0 to 100.
See it running at http://bl.ocks.org/3053419
Great tutorial here: http://alignedleft.com/tutorials/d3/axes/

  
## index.html
<html>
	<head>
		<title>D3 Axis Example</title>
		<script src="http://d3js.org/d3.v2.js"></script>
    </head>

    <body>

    <script>
        var width = 400,
            height = 400,
            padding = 30;

        // create an svg container
        var vis = d3.select("body").
            append("svg:svg")
                .attr("width", width)
                .attr("height", height);

        // define the scale
        var xScale = d3.scale.linear()
	        .domain([0, 100])    // values between 0 and 100
		.range([padding, width - padding * 2]);   // map these the the chart width = total width minus padding at both sides

        // define the axis
        var xAxis = d3.svg.axis()
            .scale(xScale);

        // draw it and move to the bottom of the chart area
        vis.append("g")
            .attr("transform", "translate(0," + (height - padding) + ")")
            .call(xAxis);


    </script>

    </body>
</html>
	<html>
	<head>
	<title>D3 Axis Example</title>
	<script src="http://d3js.org/d3.v2.js"></script>
	</head>

	<body>

	<script>
	var width = 400,
	height = 400,
	padding = 30;

	// create an svg container
	var vis = d3.select("body").
	append("svg:svg")
	.attr("width", width)
	.attr("height", height);

	// define the scale
	var xScale = d3.scale.linear()
	.domain([0, 100]) // values between 0 and 100
	.range([padding, width - padding * 2]); // map these the the chart width = total width minus padding at both sides

	// define the axis
	var xAxis = d3.svg.axis()
	.scale(xScale);

	// draw it and move to the bottom of the chart area
	vis.append("g")
	.attr("transform", "translate(0," + (height - padding) + ")")
	.call(xAxis);



	</script>

	</body>
	</html>