| <!-- 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> |
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.