AlterD3 Geo Projections

GeoProjection.html

<!-- ref: https://d3js.org/d3.v5.min.js //-->
<!-- Input Expected: SpatialObj //-->
<div id="ChartHtml">
    <div id="chart1" style="background-color: white;">
        <svg id="chartSVG" style="width:1400px; height:700px;background-color: white;"></svg>
    </div>
    <script>
        const getSpatial = r => r['SpatialObj']
        const baseProjection = d3.geoAzimuthalEquidistant()

        const svg = d3.select("#chartSVG")
        const width = +svg.style("width").replace(/px/,"")
        const height = +svg.style("height").replace(/px/,"")

        const data = alteryxData().map(getSpatial).map(s => ({"type": "Feature", "geometry": s}))
        const projection = baseProjection
           .fitSize([width, height], { "type": "FeatureCollection", "features": data })
    	const path = d3.geoPath().projection(projection)

        const chart = svg
            .attr("width", width)
            .attr("height", height)
            .append("g")

            chart.append('path').attr('d',path(d3.geoGraticule10())).attr('fill','none').attr('stroke','#ccc')

        fetch("https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_land.geojson").then(response => response.json()).then(world => {
            chart.selectAll("path.land")
                .data(world.features)
                .enter()
                .append("path")
                .attr("class", "land")
                .attr("d", path)
                .attr("stroke", "#444")
                .attr("fill", "#aaa")

            chart.selectAll("path.data")
                .data(data)
                .enter()
                .append("path")
                .attr("class", "data")
                .attr("d", path)
                .attr("stroke", "#000000")
                .attr("fill", "#ffffff")
        })
    </script>
</div>

GeoProjection.jpg

GeoProjection.md

Allows for Alteryx Spatial Obejcts to be rendered with different Geo projections.

Assumes that the Spatial Object is called SpatialObj. Alter:

        const getSpatial = r => r['SpatialObj']

To change the projection, alter:

        const baseProjection = d3.geoAzimuthalEquidistant()

You can find over projections on the d3 site

By default, it adds lines an a base plot of countries.