1

I am working on a London map visualization in d3 but I am unable to scale the graph. This graph shows a very small visualization.

For this map visualization, you will need to first render the GeoJson data file to be able to draw an underlying map of London suburbs.

enter image description here

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <style>
                *
                {
                    font-family: "Helvetica Neue";
            
                }
                p
                {
                    font-size: 0.85em;
                }
                 .subunits
                {
                    fill: #eeeeee;
                    stroke: #333;
                    stroke-width: 0.2;
    
                }
    
               
            </style>
        </head>
        <body>
            <div id="map"></div>
            <script src ="http://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
    
            <script src="http://d3js.org/topojson.v1.min.js"></script>
    
            <script src="p.js"></script>
        </body>
    </html>

p.js

    (function() {
            var margin = { top: 0, left: 0, right: 0, bottom: 0},
                height = 400 - margin.top - margin.bottom,
                width = 800 - margin.left - margin.right;
        
            var svg = d3.select("#map")
                     .append("svg")
                     .attr("height",height + margin.top + margin.bottom)
                     .attr("width", width + margin.left + margin.right)
                     .append("g")
                     .attr("transform","translate(" + margin.left + "," + margin.top + ")");
        
    
            d3.queue()
            .defer(d3.json,"https://raw.githubusercontent.com/radoi90/housequest-data/master/london_boroughs.geojson")
            .await(ready)
    
        
            var projection= d3.geoAlbers()
            .center([10.5, 55.2])
            .rotate([8, 0])
            .parallels([0, 15])
            .scale(3300)
            .translate([width / 2, height / 2]);
        
            var path = d3.geoPath()
                .projection(projection)
        
            
            function ready(error,data,london_stations)
            {
               
                console.log(data.features)
        
                svg.selectAll(".subunits")
                .data(data.features)
                .enter().append("path")
                .attr("class","subunits")
                .attr("d",path)
            }
            
        })();
James Z
  • 12,209
  • 10
  • 24
  • 44
Star
  • 11
  • 2
  • You have a [winding order](https://stackoverflow.com/a/54949383/7106086), using turf.js will be the easiest [solution](https://stackoverflow.com/a/49311635/7106086). This means you cannot use utility functions such as [projection.fitSize](https://stackoverflow.com/a/40940028/7106086) to automatically scale and center the map. Though, your selection of projection parameters is not making manual placement easier (set rotation to [0,0], .center([long,lat]) to a coordinate in the middle of London and increase scale until you like what you see). – Andrew Reid Dec 16 '21 at 03:44
  • As a separate point from a cartographic perspective, changing your parallels to [50,53] would be more appropriate. It's not clear why the rotation and parallels are selected as such, but it will likely create a projection that is visually different than those projections typically used for London (which I would think don't use an Albers projection at all - though I could be wrong). – Andrew Reid Dec 16 '21 at 03:48

0 Answers0