Skip to content

Instantly share code, notes, and snippets.

@phil-pedruco
Last active January 16, 2020 13:43
Show Gist options
  • Save phil-pedruco/9298880 to your computer and use it in GitHub Desktop.
Save phil-pedruco/9298880 to your computer and use it in GitHub Desktop.
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="http://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>
Display the source blob
Display the rendered blob
Raw
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
257.10206999085,
-244.386036139067
],
[
457.433039798719,
-243.82645242452
],
[
458.552207227813,
-204.096008691674
],
[
257.10206999085,
-204.096008691674
],
[
257.10206999085,
-244.386036139067
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "0",
"ShopName": ""
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
291.376572506861,
-304.401389524245
],
[
306.20554094236,
-304.401389524245
],
[
306.20554094236,
-257.676149359561
],
[
291.936156221408,
-257.396357502287
],
[
291.376572506861,
-304.401389524245
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "1",
"ShopName": "Holi"
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
309.563043229642,
-258.795316788655
],
[
309.563043229642,
-352.525588975298
],
[
331.946391811527,
-352.805380832571
],
[
332.226183668801,
-258.515524931382
],
[
309.563043229642,
-258.795316788655
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "2",
"ShopName": "Manyavar"
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
334.464518526989,
-352.245797118024
],
[
357.127658966148,
-352.525588975298
],
[
356.568075251601,
-257.676149359561
],
[
334.464518526989,
-257.955941216835
],
[
334.464518526989,
-352.245797118024
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "3",
"ShopName": "Flying Machine"
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
359.64578568161,
-353.085172689845
],
[
382.308926120768,
-352.805380832571
],
[
382.308926120768,
-257.676149359561
],
[
359.64578568161,
-257.955941216835
],
[
359.64578568161,
-353.085172689845
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "4",
"ShopName": "Celio"
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
384.82705283623,
-352.805380832571
],
[
407.210401418115,
-353.085172689845
],
[
407.210401418115,
-257.955941216835
],
[
385.386636550777,
-257.955941216835
],
[
384.82705283623,
-352.805380832571
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "5",
"ShopName": "Rocia"
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
409.448736276303,
-257.676149359561
],
[
410.288111848124,
-353.085172689845
],
[
433.510836001829,
-353.364964547118
],
[
433.510836001829,
-257.955941216834
],
[
409.448736276303,
-257.676149359561
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "6",
"ShopName": "Kobler"
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
490.308583028361,
-357.282050548948
],
[
560.536339204025,
-357.282050548948
],
[
560.536339204025,
-301.60347095151
],
[
543.748827767611,
-297.406593092406
],
[
525.282565187556,
-291.251172232388
],
[
508.495053751143,
-282.857416514181
],
[
508.495053751143,
-282.857416514181
],
[
498.702338746568,
-275.862620082342
],
[
490.308583028361,
-267.189072506862
],
[
490.308583028361,
-357.282050548948
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "7",
"ShopName": "an Heusen n Vdot"
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
460.37085430009,
-355.323507548033
],
[
487.790456312899,
-355.323507548033
],
[
487.510664455626,
-339.37537168344
],
[
460.091062442817,
-339.37537168344
],
[
460.37085430009,
-355.323507548033
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "8",
"ShopName": "STAIRCASE"
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
436.028962717291,
-355.323507548033
],
[
457.572935727355,
-355.04371569076
],
[
457.572935727355,
-339.655163540714
],
[
435.749170860017,
-339.655163540714
],
[
436.028962717291,
-355.323507548033
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "9",
"ShopName": ""
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
436.028962717291,
-327.344321820677
],
[
459.811270585543,
-327.344321820677
],
[
459.53147872827,
-304.121597666972
],
[
436.308754574564,
-304.401389524245
],
[
436.028962717291,
-327.344321820677
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "10",
"ShopName": ""
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
436.308754574564,
-301.043887236963
],
[
459.811270585543,
-301.043887236963
],
[
459.811270585543,
-258.235733074108
],
[
436.588546431838,
-257.955941216835
],
[
436.308754574564,
-301.043887236963
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "11",
"ShopName": "Maroma"
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
471.562528591033,
-304.401389524245
],
[
487.790456312899,
-304.401389524245
],
[
487.790456312899,
-265.230529505947
],
[
486.111705169258,
-262.712402790485
],
[
483.313786596522,
-258.235733074108
],
[
471.562528591033,
-258.235733074108
],
[
471.562528591033,
-304.401389524245
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "12",
"ShopName": "Kalista"
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
208.558182753887,
-451.571906450138
],
[
355.169115965232,
-451.571906450138
],
[
355.169115965232,
-417.996883577311
],
[
344.537025388837,
-417.717091720037
],
[
344.81681724611,
-380.504774702654
],
[
309.283251372368,
-380.22498284538
],
[
309.003459515095,
-403.447706999085
],
[
206.319847895699,
-403.727498856359
],
[
206.319847895699,
-417.717091720037
],
[
208.837974611161,
-418.556467291858
],
[
208.558182753887,
-451.571906450138
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "13",
"ShopName": "Ebony Gautiar"
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
205.690316216833,
-402.118695677036
],
[
306.135592978041,
-401.838903819762
],
[
305.715905192131,
-356.932310727356
],
[
206.110004002744,
-357.072206655993
],
[
205.690316216833,
-402.118695677036
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "14",
"ShopName": "Ebony Gautiar"
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
205.970108074107,
-353.015224725526
],
[
255.073579025616,
-353.155120654163
],
[
254.793787168343,
-333.989378430924
],
[
205.970108074107,
-333.989378430924
],
[
205.970108074107,
-353.015224725526
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "15",
"ShopName": "Ebony Gautiar"
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
205.690316216833,
-331.051563929552
],
[
254.93368309698,
-331.051563929552
],
[
254.93368309698,
-311.326237991766
],
[
206.110004002744,
-311.466133920403
],
[
205.690316216833,
-331.051563929552
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "16",
"ShopName": "Ebony Gautiar"
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
206.24989993138,
-308.948007204941
],
[
254.793787168343,
-308.808111276304
],
[
254.793787168343,
-257.74609732388
],
[
236.747212374198,
-258.025889181153
],
[
234.92856530192,
-260.683911825252
],
[
230.59179151418,
-266.41964489936
],
[
223.876786939615,
-273.414441331199
],
[
216.881990507776,
-278.59059069076
],
[
209.327610361389,
-282.787468549863
],
[
206.389795860017,
-283.76674005032
],
[
206.24989993138,
-308.948007204941
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "17",
"ShopName": ""
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
16.6909166285438,
-403.097967177494
],
[
140.778605329367,
-403.097967177494
],
[
141.058397186641,
-367.144713517841
],
[
16.8308125571806,
-367.004817589204
],
[
16.6909166285438,
-403.097967177494
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "18",
"ShopName": ""
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
16.8308125571806,
-451.082270699909
],
[
138.120582685269,
-450.942374771272
],
[
138.260478613905,
-405.895885750229
],
[
17.1106044144542,
-405.895885750229
],
[
16.8308125571806,
-451.082270699909
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "19",
"ShopName": ""
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
16.8308125571806,
-285.865178979872
],
[
16.9707084858173,
-364.486690873742
],
[
75.0275188700809,
-364.206899016469
],
[
75.1674147987177,
-349.098138723697
],
[
81.8824193732831,
-349.098138723697
],
[
81.7425234446464,
-344.061885292773
],
[
114.61806667429,
-344.201781221409
],
[
114.61806667429,
-350.217306152791
],
[
120.773487534308,
-350.077410224154
],
[
120.773487534308,
-364.486690873742
],
[
140.918501258004,
-364.626586802379
],
[
141.058397186641,
-286.005074908509
],
[
16.8308125571806,
-285.865178979872
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "20",
"ShopName": ""
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
77.8254374428165,
-363.647315301922
],
[
117.975568961572,
-363.927107159195
],
[
117.975568961572,
-353.155120654163
],
[
111.960044030191,
-353.015224725526
],
[
111.960044030191,
-346.020428293687
],
[
84.1207542314716,
-346.160324222324
],
[
84.1207542314716,
-351.336473581885
],
[
77.8254374428165,
-351.336473581885
],
[
77.8254374428165,
-363.647315301922
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "21",
"ShopName": "STAIRCASE"
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
16.9007605214989,
-282.717520585544
],
[
140.568761436412,
-282.717520585544
],
[
140.848553293686,
-273.484389295517
],
[
134.693132433667,
-267.608760292772
],
[
127.978127859102,
-259.774588289113
],
[
121.54291514181,
-248.303122140897
],
[
120.983331427263,
-243.266868709973
],
[
16.9007605214989,
-243.546660567246
],
[
16.9007605214989,
-282.717520585544
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "22",
"ShopName": ""
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
16.6909166285437,
-241.098481816102
],
[
43.6908308554422,
-240.958585887466
],
[
43.9706227127157,
-204.445748513266
],
[
16.8308125571805,
-204.305852584629
],
[
16.6909166285437,
-241.098481816102
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "23",
"ShopName": ""
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
46.0690616422675,
-241.098481816102
],
[
69.7114735818833,
-240.818689958829
],
[
69.5715776532465,
-204.165956655993
],
[
46.0690616422675,
-204.165956655993
],
[
46.0690616422675,
-241.098481816102
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "24",
"ShopName": ""
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
72.3694962259821,
-225.849825594693
],
[
110.980772529733,
-225.98972152333
],
[
110.980772529733,
-240.818689958829
],
[
120.633591605671,
-240.958585887466
],
[
119.514424176577,
-237.041499885636
],
[
118.395256747483,
-233.264309812443
],
[
117.975568961572,
-223.611490736505
],
[
118.535152676119,
-217.73586173376
],
[
119.234632319303,
-213.81877573193
],
[
72.2296002973453,
-213.958671660567
],
[
72.3694962259821,
-225.849825594693
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "25",
"ShopName": ""
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
73.4886636550763,
-240.538898101555
],
[
83.5611705169245,
-240.538898101555
],
[
83.5611705169245,
-228.088160452882
],
[
73.3487677264395,
-227.948264524245
],
[
73.4886636550763,
-240.538898101555
]
]
],
"type": "Polygon"
},
"properties": {
"ID": "26",
"ShopName": "LIFT3"
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment