D3 Examples - Mercator - OK rivers and lakes

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
    <style>
        .lake {
            fill: steelblue;;
        }
        .river {
            fill: none;
            stroke: #777;
        }
        .water {
            fill: black;
            stroke: #000;
        }
    </style>
    <body>
​
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
​
    <script>
        ( function map() {
            var width = $(window).width(), height = width/2;
​
            var projection = d3.geo.transverseMercator()
                .rotate([98 + 00 / 60, -35 + 00 / 60]) //https://www.ngs.noaa.gov/PUBS_LIB/ManualNOSNGS5.pdf
                .scale(1)
                .translate([0,0]);
​
            var path = d3.geo.path()
                .projection(projection);
​
            var svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);
​
            d3.json("water.json", function(error, topo) {
​
                var lakes = topojson.feature(topo, topo.objects.LAKES),
                    rivers = topojson.feature(topo, topo.objects.owrbrivers);
​
                var b = path.bounds(rivers),
                    s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
                    t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
​
                projection
                    .scale(s)
                    .translate(t);
​
                svg.append("g")
                    .attr("class", "rivers")
                    .selectAll("path")
                    .data(rivers.features)
                    .enter()
                    .append("path")
                    .attr("class", "river")
                    .attr("d", path);
​
                svg.append("g")
                    .attr("class", "lakes")
                    .selectAll("path")
                    .data(lakes.features)
                    .enter()
                    .append("path")
                    .attr("class", "lake")
                    .attr("d", path)
                    .append("title")
                    .text(function(d)
                    {
                        return d.properties.name;
                    });
​
            });
​
        }) ()
​
    </script>
​
    