Skip to content

Instantly share code, notes, and snippets.

@zzolo

zzolo/README.md

Last active August 29, 2015 14:01
Show Gist options
  • Save zzolo/696bac26ff8dfe51f261 to your computer and use it in GitHub Desktop.
Save zzolo/696bac26ff8dfe51f261 to your computer and use it in GitHub Desktop.
Download ZIP
D3 MultiLineString Example
Raw
README.md

This is an example of using D3's geo paths to render a MultiLineString, but it seems to not render correctly for whatever reason. It is not a fill/stroke problem, either.

Identified problem: It seems that the stroke width gets scaled as well.

Display the source blob
Display the rendered blob
Raw
data.geojson
{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [
{
"type": "Feature",
"properties": {
"route": "902",
"routesort": 902,
"routedscrp": "Green Line - Mpls - St Paul",
"routetype": "1",
"route_oper": "M",
"wk_ftrip": "3:06:00 AM",
"wk_ltrip": "3:56:00 AM",
"wk_span": "24:50",
"sat_ftrip": "3:06:00 AM",
"sat_ltrip": "3:56:00 AM",
"sat_span": "24:50",
"sun_ftrip": "3:06:00 AM",
"sun_ltrip": "3:56:00 AM",
"sun_span": "24:50",
"line_type": "Urb Loc",
"Shape_Leng": 28736.226716
},
"geometry": {
"type": "MultiLineString",
"coordinates": [
[
[
-93.09703358675293,
44.95017581057219
],
[
-93.09648014901926,
44.94964123530145
],
[
-93.09584927113312,
44.94900245746344
],
[
-93.09545838222442,
44.94861590645221
],
[
-93.09396447575324,
44.94710255813702
],
[
-93.0932174549075,
44.946285512213294
],
[
-93.0930666393102,
44.94620332081342
],
[
-93.09171015456769,
44.94599039981439
],
[
-93.09141265328286,
44.94599063832737
],
[
-93.09126973351074,
44.94601270314096
],
[
-93.09002270214884,
44.94660635748679
],
[
-93.08875255155255,
44.94725763709292
],
[
-93.08735104163767,
44.947933696457135
],
[
-93.08618502715125,
44.94849980948201
]
],
[
[
-93.09703358675293,
44.95017581057219
],
[
-93.09710340558992,
44.95033489319002
],
[
-93.09725436287783,
44.950491161983074
],
[
-93.09781555790225,
44.951033958211326
],
[
-93.09836513398388,
44.95155481115208
],
[
-93.09864377631501,
44.95180700230201
]
],
[
[
-93.09864377631501,
44.95180700230201
],
[
-93.09884456908698,
44.95172725818524
],
[
-93.09856203408316,
44.95145860801645
],
[
-93.09805891479249,
44.95098984854497
],
[
-93.09741264636185,
44.9504087127458
],
[
-93.09720758805588,
44.950249746409696
],
[
-93.09703358675293,
44.95017581057219
]
],
[
[
-93.1058806063131,
44.9557296658726
],
[
-93.103736011326,
44.95578102254959
],
[
-93.10220196629939,
44.95582905040231
],
[
-93.10069877195349,
44.9558413609385
],
[
-93.09918010429367,
44.955845433701946
],
[
-93.0990949433703,
44.955760449556976
],
[
-93.09884695513705,
44.95536829890338
],
[
-93.09846756144054,
44.954962542011
],
[
-93.0983320928867,
44.954833699701304
],
[
-93.09792576425573,
44.954491071773745
],
[
-93.09730273681461,
44.95396479197211
],
[
-93.09696217564284,
44.95366051784786
],
[
-93.09632750812592,
44.95309582919119
],
[
-93.09619590369178,
44.95296149342587
],
[
-93.09742760361898,
44.95239796643041
],
[
-93.09864377631501,
44.95180700230201
]
],
[
[
-93.1058806063131,
44.9557296658726
],
[
-93.10594655670185,
44.9558695389543
],
[
-93.10916938712325,
44.95586650373079
],
[
-93.10938192994584,
44.955869044172424
],
[
-93.11056439034472,
44.955859674112986
],
[
-93.11103197148519,
44.955859220484555
],
[
-93.11341624189906,
44.955854133783546
],
[
-93.1148305766328,
44.955852720472905
],
[
-93.116117367386,
44.95584044416202
],
[
-93.11866780664096,
44.955837822562344
],
[
-93.12122205206944,
44.95580770187961
],
[
-93.12377252478446,
44.955821429098094
],
[
-93.12617990551452,
44.95578312517769
],
[
-93.12636924966216,
44.95578017201626
],
[
-93.12888498037147,
44.95581028635101
],
[
-93.13140447768647,
44.955796439996284
],
[
-93.1339433461627,
44.955804465810985
],
[
-93.13646675155064,
44.95580970985439
],
[
-93.13900168389117,
44.95578744602656
],
[
-93.14154057284685,
44.95580353435086
],
[
-93.14406781528982,
44.95579763045633
],
[
-93.14652169148629,
44.95581371525563
],
[
-93.14668398459048,
44.95581076311615
],
[
-93.1491532266842,
44.95579110212346
],
[
-93.15170363860673,
44.95577951137743
],
[
-93.15426181467168,
44.95578157223255
],
[
-93.15681608911422,
44.95576986209903
],
[
-93.1593626641717,
44.9557690808163
],
[
-93.16188986358611,
44.95574906355576
],
[
-93.1636636267753,
44.955765742087316
],
[
-93.16529820585168,
44.95575790032737
],
[
-93.16688636407096,
44.95573364016318
],
[
-93.16704094445167,
44.9557361579827
],
[
-93.16826978637766,
44.9557343540313
],
[
-93.16956818646361,
44.95573243360176
],
[
-93.17079313258404,
44.95571963304874
],
[
-93.17207605866052,
44.955712219629845
],
[
-93.17334743283932,
44.95571852837738
],
[
-93.17461099549165,
44.955697396827794
],
[
-93.17573938298318,
44.95570115366339
],
[
-93.17589785178068,
44.955711884937415
],
[
-93.17637331022037,
44.955760540211784
],
[
-93.17718142825538,
44.95591568643252
],
[
-93.17740961575372,
44.95597844068758
],
[
-93.1778893234222,
44.95615055443101
],
[
-93.17829172087589,
44.95631455544746
],
[
-93.1800135410689,
44.95701427117277
],
[
-93.18227315649827,
44.957902426525955
],
[
-93.18484230829644,
44.95888606971866
],
[
-93.18625079472847,
44.95944351893349
],
[
-93.18726087357352,
44.95988362099119
],
[
-93.18800775634976,
44.96019518875636
],
[
-93.18960588820006,
44.96081813545925
],
[
-93.19120036435072,
44.96149319906328
],
[
-93.19280637879432,
44.962140781890625
],
[
-93.19442779690273,
44.962760878683845
],
[
-93.1960648572923,
44.9634248255158
],
[
-93.19752778494784,
44.96401496738596
],
[
-93.1990642496856,
44.964626913636806
],
[
-93.2001014773621,
44.965039416357605
],
[
-93.20136330781504,
44.965572241212996
],
[
-93.20263283357477,
44.96608857560104
],
[
-93.20502850592426,
44.96699798824584
],
[
-93.20639486145949,
44.96755252005135
],
[
-93.20716511650075,
44.96785843226188
],
[
-93.2077067642264,
44.96800561380035
]
],
[
[
-93.2077067642264,
44.96800561380035
],
[
-93.20728833472307,
44.96772924994719
],
[
-93.2063865803423,
44.96739888204739
],
[
-93.205155622742,
44.96687703262356
],
[
-93.20265146284642,
44.96589098867649
],
[
-93.20137042332301,
44.96539662521176
],
[
-93.2000969161579,
44.9648391257387
],
[
-93.1994971352812,
44.964631645892595
],
[
-93.19752725767448,
44.963861315232755
],
[
-93.19452018916938,
44.9626537120468
],
[
-93.19290644731976,
44.96201714165408
],
[
-93.19129275149318,
44.96138329211615
],
[
-93.189686737733,
44.960724711790306
],
[
-93.18806535745922,
44.96008259784847
],
[
-93.18732616028618,
44.959757298814
],
[
-93.18530250013313,
44.9589841010281
],
[
-93.18227656051685,
44.9577569983855
],
[
-93.18012520412167,
44.95688513613144
],
[
-93.17964538093634,
44.956680105384635
],
[
-93.17839563232594,
44.95617720275697
],
[
-93.17771477634132,
44.955939552017114
],
[
-93.17718103141712,
44.955786728041986
],
[
-93.1766551597024,
44.955680534138644
],
[
-93.17592839837384,
44.955591110301484
],
[
-93.17461838287275,
44.95558488937435
],
[
-93.17334705285138,
44.95559231375216
],
[
-93.17207571425958,
44.9555969801817
],
[
-93.17079666315914,
44.95560713161059
],
[
-93.16956393432943,
44.95560073709579
],
[
-93.16826948166899,
44.95563008974859
],
[
-93.1670367378968,
44.95561818035981
],
[
-93.16688216578552,
44.95561840633122
],
[
-93.16529394772795,
44.955620716054064
],
[
-93.16365934914846,
44.95562032635489
],
[
-93.16189329583801,
44.9555954054012
],
[
-93.1593622388968,
44.955615428121
],
[
-93.15682345149315,
44.95563540536208
],
[
-93.1542653407957,
44.95565535226867
],
[
-93.15170332775007,
44.95566152801552
],
[
-93.14915287840746,
44.95565665595122
],
[
-93.14667976382087,
44.95567083429298
],
[
-93.14652134935396,
44.955679269067964
],
[
-93.14406744456092,
44.955649465253195
],
[
-93.14153635783242,
44.95566086152145
],
[
-93.13900521034881,
44.955647507489516
],
[
-93.13646250358727,
44.95564783021586
],
[
-93.13393911167672,
44.95564532987136
],
[
-93.1314002627413,
44.95564279155729
],
[
-93.1288885191349,
44.95566486049533
],
[
-93.12636899071822,
44.95566218852756
],
[
-93.12617963493271,
44.955659654083966
],
[
-93.12377218858639,
44.955665032365616
],
[
-93.12122561596449,
44.95566502004324
],
[
-93.11866360306071,
44.95567319840734
],
[
-93.11611709624827,
44.95570599781119
],
[
-93.11471049921998,
44.95571016309133
],
[
-93.11328458052188,
44.955714330214754
],
[
-93.11103557121798,
44.95572202654993
],
[
-93.1105602731543,
44.9557279752814
],
[
-93.10938553882357,
44.95573459409002
],
[
-93.10916140883471,
44.95573480853968
],
[
-93.10600039925271,
44.95572955474963
],
[
-93.1058806063131,
44.9557296658726
]
],
[
[
-93.23383475831982,
44.973648505502965
],
[
-93.23185563575564,
44.973652540580744
],
[
-93.23028240882066,
44.973661211242096
],
[
-93.22867820432232,
44.97365620326288
],
[
-93.22708560597766,
44.97365389347288
],
[
-93.22564355777803,
44.97359913192074
],
[
-93.2237997590928,
44.97361099134539
],
[
-93.2235934228137,
44.97422875137977
],
[
-93.22348569885924,
44.97436066551944
],
[
-93.22275867339052,
44.97528126052372
],
[
-93.22263556940628,
44.97543515332821
],
[
-93.22228937303049,
44.975877580238404
],
[
-93.22010589442418,
44.97502848592729
],
[
-93.21804237448006,
44.97419558357908
],
[
-93.21532487128027,
44.97315534990475
],
[
-93.21531394747223,
44.97230204674711
],
[
-93.21530532897503,
44.97103168043076
],
[
-93.2146549653696,
44.970766755936815
],
[
-93.21396592326894,
44.97049366789308
],
[
-93.21275813514329,
44.97000203910729
],
[
-93.21225497638774,
44.96981913972712
],
[
-93.21179820325419,
44.96963615301034
],
[
-93.21129498022387,
44.96943404379372
],
[
-93.20900729152375,
44.968513589312366
],
[
-93.20854280881547,
44.96833060364213
],
[
-93.2077067642264,
44.96800561380035
]
],
[
[
-93.23383475831982,
44.973648505502965
],
[
-93.23422527088736,
44.97367239946643
],
[
-93.23647114608555,
44.97367600270505
],
[
-93.23674551521918,
44.97365622767444
],
[
-93.23757221759307,
44.97353103994721
],
[
-93.24128822837747,
44.97291138014469
],
[
-93.24412721723938,
44.97241146178971
],
[
-93.24574155535333,
44.97208148727079
],
[
-93.247193812404,
44.97181769116881
],
[
-93.25126713941619,
44.97075243671611
],
[
-93.25169996650554,
44.97073227701051
],
[
-93.2519667779013,
44.97075638288102
],
[
-93.25217573199967,
44.97080805391059
],
[
-93.2524273235637,
44.97088706833791
],
[
-93.25257468571438,
44.97099649458335
],
[
-93.25280342568976,
44.97115238605044
],
[
-93.25296615394545,
44.97123982736103
],
[
-93.25472849396496,
44.97380136820507
],
[
-93.254965381838,
44.97404778248665
],
[
-93.25527166947573,
44.9742528832693
],
[
-93.25585671425384,
44.9745561367456
],
[
-93.25625562173818,
44.974725357942255
],
[
-93.25762273670631,
44.97529848188331
],
[
-93.25790137875663,
44.97536919176798
],
[
-93.25821845437021,
44.97539042569515
],
[
-93.25856998876066,
44.97533749815166
],
[
-93.25981715860301,
44.975021873638376
],
[
-93.26084812990325,
44.97476983778351
]
],
[
[
-93.26084812990325,
44.97476983778351
],
[
-93.2598941721781,
44.97495584722187
],
[
-93.25848482291039,
44.97531025294947
],
[
-93.25815253030491,
44.97534393014378
],
[
-93.25785474594002,
44.97531442108139
],
[
-93.25758766406068,
44.97523545361139
],
[
-93.25669305235353,
44.974864310267336
],
[
-93.25619734555823,
44.974659637499414
],
[
-93.25544195856278,
44.9742991480089
],
[
-93.25508533355826,
44.9740749526284
],
[
-93.25480588841839,
44.97382040215506
],
[
-93.2545959268164,
44.97354374660931
],
[
-93.25302025606229,
44.97123696371053
],
[
-93.25273700474148,
44.97099064788418
],
[
-93.25245397124225,
44.970793720188816
],
[
-93.25212896408436,
44.97072035552316
],
[
-93.25187746845772,
44.97066328973623
],
[
-93.2516802201867,
44.97063628657692
],
[
-93.25130159132273,
44.97067553357171
],
[
-93.24691133528077,
44.97174696340618
],
[
-93.2465869175968,
44.97181077175406
],
[
-93.24570633239404,
44.971980041525974
],
[
-93.2441537510289,
44.97228793403811
],
[
-93.23747525278453,
44.973451671410196
],
[
-93.23670265649402,
44.97357400250982
],
[
-93.23612685928032,
44.97361360765554
],
[
-93.23422498050284,
44.97360106126085
],
[
-93.23383475831982,
44.973648505502965
]
],
[
[
-93.26084812990325,
44.97476983778351
],
[
-93.26097181579384,
44.97476681141578
],
[
-93.26106079774767,
44.97478307084492
],
[
-93.26242028059578,
44.975367129091595
],
[
-93.2637952660235,
44.97595387908653
],
[
-93.26515076152313,
44.97649950073802
],
[
-93.26652198691606,
44.97709720260996
],
[
-93.26786981643613,
44.97764555356668
],
[
-93.26924491295975,
44.97823223745288
],
[
-93.27057360787371,
44.97881078417202
],
[
-93.27250662347801,
44.97964579193549
],
[
-93.27364305345458,
44.98042780146491
],
[
-93.27484539425339,
44.981242567433874
],
[
-93.2759392968483,
44.9820109381519
],
[
-93.27766572973482,
44.98326067109066
]
]
]
}
}
]
}
Display the source blob
Display the rendered blob
Raw
data.topojson
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
d3.json('data.topojson', function(error, route) {
var width = 960;
var height = 500;
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
route = topojson.feature(route, route.objects['metrotransit-green-line.geo']);
// Make projection and path handler
var projectionData = route;
var centroid = d3.geo.centroid(projectionData);
var projection = d3.geo.albersUsa()
.scale(1000)
.translate([width / 2, height / 2]);
var projectionPath = d3.geo.path().projection(projection);
// Make group for features
var featureGroup = svg.append('g').attr('class', 'feature-group');
// Fit map to data
var b = projectionPath.bounds(projectionData);
featureGroup.attr('transform',
'translate(' + projection.translate() + ') ' +
'scale(' + 0.95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height) + ') ' +
'translate(' + -(b[1][0] + b[0][0]) / 2 + ',' + -(b[1][1] + b[0][1]) / 2 + ')');
// Add data
featureGroup.selectAll('.route')
.data(route.features)
.enter()
.append('path')
.attr('class', 'route')
.attr('d', projectionPath)
.style('fill', 'blue')
.style('fill-opacity', 0.05)
.style('stroke', 'red')
.style('stroke-opacity', 0.75)
.style('stroke-width', 0.001);
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment