Q:

D3.js does not render SVG in ASP MVC app

I've got a d3.js script which renders just fine in a .html document outside my app but when I embed it in a .cshtml file inside an mvc app the svg is blank.  Can someone help me understand why this isn't rendering?  Javascript console in both Chrome and IE show no errors. Thanks
Here is the dom:
<svg width="1920" height="1000">
    <rect class="background" width="1920" height="1000"/>
    <g transform="translate(960 500)">
        <g id="states"/>

The .cshtml is:
<style>

.background {
    fill: none;
    pointer-events: all;
}

#states {
    fill: green;
    stroke: #000000;
    stroke-width: .5px;
}

#pct {
    stroke: blue;
    fill: blue;
    stroke-width: .5px;
}

#states .active {
    fill: steelblue;
}

</style>

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

<script>

var height = 1000,
    width = 1920,
    centered;

var projection = d3.geo.albersUsa()
        .scale(width)
        .translate([0,0]);

var path = d3.geo.path("~/Map_Data/states.geojson")
        .projection(projection);

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

svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height);

var g = svg.append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
        .append("g")
        .attr("id", "states");

 d3.json("@(HttpContext.Current.Server.MapPath("~/Map_Data/states.geojson"))", function (data) {
    g.selectAll("path").data(data.features)
        .enter().append("path")
        .attr("d", path)
        .attr("id", "states");
});
</script>

A:

Gleaned most of the answer from this post: d3.json() is not loading data on asp.net mvc
The d3.json method only takes URLs so you need to provide an action to read the file and expose it with a url per the link above.  It will not work if you use a file path.

