Skip to content

Instantly share code, notes, and snippets.

@zzolo
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.
D3 MultiLineString Example

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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
{"type":"Topology","objects":{"metrotransit-green-line.geo":{"type":"GeometryCollection","crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}},"geometries":[{"type":"MultiLineString","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},"arcs":[[0],[1],[2],[3],[4],[5],[6],[7],[8],[9]]}]}},"arcs":[[[9433,1123],[28,-144],[33,-171],[21,-104],[78,-406],[39,-219],[8,-22],[70,-57],[16,0],[7,6],[66,159],[66,175],[73,181],[61,152]],[[9433,1123],[-4,43],[-8,41],[-29,146],[-29,140],[-15,68]],[[9348,1561],[-10,-22],[15,-72],[26,-126],[34,-156],[10,-42],[10,-20]],[[8971,2613],[112,14],[80,13],[78,3],[79,1],[5,-23],[13,-105],[20,-109],[7,-34],[21,-92],[32,-142],[18,-81],[33,-152],[7,-36],[-64,-151],[-64,-158]],[[8971,2613],[-4,37],[-168,0],[-11,0],[-62,-2],[-24,0],[-125,-2],[-74,0],[-67,-3],[-133,-1],[-134,-8],[-133,4],[-126,-11],[-9,-1],[-132,9],[-131,-4],[-133,2],[-132,1],[-132,-6],[-133,5],[-132,-2],[-128,4],[-8,0],[-129,-6],[-133,-3],[-134,1],[-133,-3],[-133,-1],[-132,-5],[-93,5],[-85,-3],[-83,-6],[-8,1],[-64,-1],[-68,0],[-64,-4],[-67,-2],[-67,2],[-66,-6],[-58,1],[-9,3],[-25,13],[-42,42],[-12,17],[-25,46],[-21,44],[-90,188],[-118,238],[-134,264],[-73,149],[-53,118],[-39,84],[-84,167],[-83,181],[-84,174],[-84,166],[-86,178],[-76,159],[-80,164],[-55,111],[-66,142],[-66,139],[-125,244],[-71,149],[-40,82],[-29,39]],[[3653,5906],[22,-74],[47,-88],[64,-140],[131,-265],[67,-133],[67,-149],[31,-56],[103,-207],[157,-324],[84,-170],[84,-170],[84,-177],[85,-172],[38,-88],[106,-207],[158,-329],[113,-234],[25,-55],[65,-135],[35,-64],[28,-41],[28,-28],[38,-24],[68,-2],[66,2],[67,1],[67,3],[64,-2],[68,8],[64,-3],[8,0],[83,1],[85,0],[93,-7],[132,5],[132,6],[134,5],[134,2],[133,-2],[129,4],[8,2],[128,-8],[133,3],[132,-3],[133,0],[131,-1],[133,0],[131,6],[132,-1],[10,-1],[125,2],[133,0],[134,2],[133,9],[73,1],[75,1],[117,2],[25,1],[61,2],[12,0],[165,-1],[7,0]],[[2289,7420],[103,1],[82,3],[84,-2],[83,0],[76,-15],[96,3],[11,166],[5,35],[38,247],[7,42],[18,118],[114,-228],[107,-223],[142,-279],[1,-229],[0,-341],[34,-71],[36,-73],[63,-132],[27,-49],[24,-49],[26,-54],[119,-247],[25,-49],[43,-88]],[[2289,7420],[-21,7],[-117,1],[-14,-6],[-43,-33],[-194,-167],[-149,-134],[-84,-88],[-76,-71],[-212,-286],[-23,-5],[-14,6],[-11,14],[-13,21],[-8,30],[-12,42],[-8,23],[-92,687],[-13,66],[-16,55],[-30,82],[-21,45],[-71,154],[-15,19],[-16,6],[-19,-15],[-65,-84],[-54,-68]],[[878,7721],[50,50],[74,95],[17,9],[16,-8],[13,-21],[47,-100],[26,-55],[40,-96],[18,-60],[15,-69],[11,-74],[82,-619],[15,-66],[15,-53],[17,-19],[13,-16],[10,-7],[20,11],[229,287],[17,17],[46,46],[81,82],[349,312],[40,33],[30,11],[99,-4],[21,13]],[[878,7721],[-6,-1],[-5,5],[-71,156],[-72,158],[-70,146],[-72,160],[-70,148],[-72,157],[-70,155],[-101,224],[-59,210],[-63,219],[-57,206],[-90,335]]],"transform":{"scale":[0.000019149985256883253,0.000003727399867613787],"translate":[-93.27766572973482,44.94599039981439]}}
<!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