Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="d3.min.js"></script>
</head>

<body>

<style type="text/css">
.axis {
    stroke: black;
    shape-rendering: crispEdges;
    stroke-opacity: .2;
}
</style>

<script type="text/javascript">
    var height = 500,
        width = 500,
        margin = 50,
        marginTop = 20,
        axisWidth = width - 2 * margin;

    var data = [0, 200, 400, 600, 800, 1000]

    var svg = d3.select("body").append("svg")
            .attr("class", "axis")
            .attr("width", width)
            .attr("height", height);

    var scale = d3.scaleLinear()
            .domain([d3.max(data), d3.min(data)]).range([height/2, 0]);

    var axis = d3.axisLeft()
            .scale(scale)
            .ticks(5)
            .tickSize(12)
            .tickPadding(4);
            // .tickFormat(d3.format(".0%"));

    svg.append("g")
        .attr("transform", function(){
            return "translate(" + margin +
                    "," + marginTop + ")";
        })
        .call(axis);
</script>

</body>

</html>