TEST.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

    body {
        margin: 0;
    }

    path {
        fill: none;
        stroke: red;
        stroke-linejoin: round;
        stroke-width: 1.5px;
    }

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.tile.v0.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

    var width = Math.max(960, window.innerWidth),
            height = Math.max(500, window.innerHeight);


    var projection = d3.geo.mercator()
            .scale((1 << 12) / 2 / Math.PI)
            .translate([width / 2, height / 2]);

    var center = projection([-100, 40]);

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

    var zoom = d3.behavior.zoom()
            .scale(projection.scale() * 2 * Math.PI)
            .scaleExtent([1 << 11, 1 << 14])
            .translate([width - center[0], height - center[1]])
            .on("zoom", zoomed);

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


    var vector = svg.append("path");

    d3.csv("us-state-capitals.csv", type, function(error, capitals) {
        svg.call(zoom);
        vector.datum({type: "FeatureCollection", features: capitals});
        zoomed();
    });

    function type(d) {
        return {
            type: "Feature",
            properties: {
                name: d.description,
                state: d.name
            },
            geometry: {
                type: "Point",
                coordinates: [+d.longitude, +d.latitude]
            }
        };
    }

    function zoomed() {
        projection
                .scale(zoom.scale() / 2 / Math.PI)
                .translate(zoom.translate());

        vector
                .attr("d", path);

    }

</script>