Axis ticks arrange demo

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/larskotthoff/d3/axisarrange-tmp/d3.js"></script>
         <style type="text/css"> 
.tick {
  stroke: #000;
}
.tickPointer {
  stroke: #888;
}
.domain {
  fill: none;
  stroke: #000;
}
         </style>
    </head>

<body>
        <script type="text/javascript">
        var width = 800, height = 300,
            svg = d3.select("body")
                .append("svg:svg")
                .attr("height", height)
                .attr("width", width),
            scale = d3.scale.linear().domain([0, 100]).range([0, 180]),
            labels = d3.svg.axis().scale(scale);
        svg.append("svg:g")
            .attr("transform", "translate(40,50)")
            .call(labels.orient("left"));
        svg.append("svg:g")
            .attr("transform", "translate(250,50)")
            .call(labels.orient("right"));
        svg.append("svg:g")
            .attr("transform", "translate(50,30)")
            .call(labels.orient("top"));
        svg.append("svg:g")
            .attr("transform", "translate(50,250)")
            .call(labels.orient("bottom"));

labels = labels.arrange(true);
        svg.append("svg:g")
            .attr("transform", "translate(400,50)")
            .call(labels.orient("left"));
        svg.append("svg:g")
            .attr("transform", "translate(640,50)")
            .call(labels.orient("right"));
        svg.append("svg:g")
            .attr("transform", "translate(425,30)")
            .call(labels.orient("top"));
        svg.append("svg:g")
            .attr("transform", "translate(425,250)")
            .call(labels.orient("bottom"));
        </script>
    </body>
</html>

Updated missing url https://raw.github.com/larskotthoff/d3/axisarrange-tmp/d3.js to https://cdn.jsdelivr.net/gh/larskotthoff/d3/axisarrange-tmp/d3.js

https://raw.github.com/larskotthoff/d3/axisarrange-tmp/d3.js