Shopping Center Layout

This is in answer to this Stack overflow question. The question was about how to represent projected or local coordinates as opposed to geographic or earth projections. This topic has been covered in this google groups discussion using d3 geometry streams. This example presents different alternative to achieve the same result.

Essentially, d3's existing 2D path generators are used and the appropriate part of the geojson file is passes up.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Shopping Mall Messing</title>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

<body>
    <div id="map"></div>
</body>
<script type="text/javascript">
var width = 600,
    height = 300;

var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height);

var xScale = d3.scale.linear()
    .domain([0, 500])
    .range([0, width]);

var yScale = d3.scale.linear()
    .domain([-200, -500])
    .range([height, 0]);

var pavement = d3.svg.line()
    .interpolate("linear")
    .x(function(d) {
        console.log(d[1]);
        return xScale(d[0]);
    })
    .y(function(d) {
        return yScale(d[1]);
    })

d3.json("shoppingMall.json", function(error, jsonData) {
    var color1 = d3.scale.category10();

svg.selectAll("path")
        .data(jsonData.features)
        .enter()
        .append("path")
        .attr("d", function(d, i) {
            return pavement(d.geometry.coordinates[0]);
        })
        .attr("text", function(d, i) {
            return "js";
        })
        .attr("fill", function(d, i) {
            return color1(i);
        });

});
</script>

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js