D3.js map choroplethmap

choropleth.js

 <script src="/js/d3.v2.js"></script>
        <link type="text/css" rel="stylesheet" href="/css/colorbrewer/colorbrewer.css">
        <style type="text/css">
            svg {
                background: #eee;
                width: 960px;
                height: 500px;
            }
            #polygons path {
                stroke: #fff;
                stroke-width: .25px;
            }

        </style>
        <script type="text/javascript">
            var map = {{ simulation.map }}
            var svg = d3.select("#map_div")
                    .append("svg")
                    .call(d3.behavior.zoom()
                    .on("zoom", redraw))
                    .append("g");

            var polygons = svg.append("g")
                    .attr("id", "polygons")
                    .attr("class","Blues");


            var proj = d3.geo.mercator();
            proj.translate(-43.8,-23.2).scale(10);
            var path = d3.geo.path().projection(proj);

            function draw (json) {
                polygons.selectAll("path")
                        .data(json.features)
                        .enter().append("path")
                        .attr("d", path)
            };

            function redraw() {
                svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
            }
            draw(map);
            
        </script>

data.json

map.html