async relocate()

in src/js/modules/choropleth.js [461:520]

• 36 lines of code
• 2 McCabe index (conditional complexity)

    async relocate(arr) {

        // https://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object

        // https://observablehq.com/@d3/zoom-to-bounding-box

        // https://www.d3indepth.com/geographic/

        //this.database.zoomOn = false

        var self = this

        d3.select("#suburb").remove()

        let bbox = await getJson(`https://interactive.guim.co.uk/embed/aus/2023/01/australian-air-quality/geojson/${arr.postcode}.geojson`)

        if (bbox) {

            let geojson = {
                "type": "FeatureCollection",
                "features": [ bbox ]
            }

            let [[x0, y0], [x1, y1]] = this.path.bounds(geojson)

            var svg = d3.select("#mapContainer svg")

            svg.transition().duration(750).call(
              self.zoom.transform,
              d3.zoomIdentity
                .translate(self.width / 2, self.height / 2)
                .scale(.7 / Math.max((x1 - x0) / self.width, (y1 - y0) / self.height))
                .translate(-(x0 + x1) / 2, -(y0 + y1) / 2)
            );
        
            svg.append("g")
            .attr("id","suburb")
            .selectAll("path")
            .data(geojson.features)
            .join("path")
            .attr("d",self.path)
            .attr("class", "burbs")
            .attr("stroke-width", 1)
            .attr("stroke", "black")
            .attr("stroke-dasharray", "5,5")
            .attr("fill", "none")

            await wait(1500);

             self.ractive.set('displayOverlay', false)

        } else {

            console.log("Missing postcode")

            self.ractive.set('displayOverlay', false)

        }

    }