Details:

I have the setup below. Generated custom topjson file, simply want to display it in my webpage. I can see in the console, the is created and the data is loaded correctly but for some reason d3 isn't rendering any of the path elements and nothing is displayed.

Javascript

var width = 960;
    var height = 500;


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


    var projection = d3.geo.albersUsa()
        .scale(1000)
        .translate([width / 2, height / 2]); 


    var path = d3.geo.path()
        .projection(projection);

        d3.json('http://localhost.com/calgary.json', function(error, calgary) {
        svg.append('path')
        .datum(topojson.feature(calgary))
        .attr('d', path)
        .attr('fill','red');
        });

Custom Topojson file:

http://pastebin.com/ere2Ww7K

Dependencies in :

<script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script>

For me it seems there are two errors in your code:
First, inside the function called at the json load, the topojson call inside the datum needs two parameters, the second one being an object:

.datum(topojson.feature(calgary, calgary.objects.CALGIS_ATS_SECTIONS))

Second, your topojson file seems to be corrupt. After this first correction, something appears to me, but it's just a bunch of polygons, filling up a big rectangle.

I tried the very same calls with a valid topojson file, namely http://bl.ocks.org/mbostock/raw/4090846/us.json, replaced "CALGIS_ATS_SECTIONS" in the previous call with "land", and it works really smooth.