D3 and TopoJSON will not load in browser - javascript

I have been working with examples of D3 and TopoJSON from mbostocks github account The D3 and topoJSON work I have been doing was not appearing in the browwer or local nodejs http-server either. The example I just copy and pasted from mbostocks github didn't appear either. This example is below. Right now I am confused to why it is not appearing in the broswer. I have the script src in the file along with the needed html boiler plate. If anybody can please tell me why it is not running that would be great. I am just starting to work with D3 and topoJSON. Thank You!
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
.states {
fill: none;
stroke: #fff;
stroke-linejoin: round;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 500;
var fill = d3.scale.log()
.domain([10, 500])
.range(["brown", "steelblue"]);
var path = d3.geo.path();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("/mbostock/raw/4090846/us.json", function(error, us) {
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.enter().append("path")
.attr("d", path)
.style("fill", function(d) { return fill(path.area(d)); });
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
.attr("class", "states")
.attr("d", path);
});
</script>
</body>
</html>


You're not supposed to run it locally. Always best to run it from a httpserver. I've copied your example to Plunker: http://plnkr.co/edit/xojc5C7RcBpQehQBdLc1?p=preview and it just works. The only thing i changed was the URL used in the d3.json function and made a copy of the data file us.json. Now it refers to a local file /mbostock/raw/4090846/us.json which i'm guessing you don't have on the location/host you're using. The example runs on http://bl.ocks.org/ so the actual file url is http://bl.ocks.org/mbostock/raw/4090846/us.json. But you can't use that URL on your page because of cross-origin policies in your browser.
So what you must do is visit the url: http://bl.ocks.org/mbostock/raw/4090846/us.json and save that file as us.json in the same directory as where your index.html resides. Then change the URL in function d3.json() to us.json like i did in the Plunker. See for yourself, there is nothing wrong with that code. I'm guessing the script simply can't find the JSON file so it won't draw anything since it has no data to draw. You can see that in your console window, it should throw an error: "GET http://yourhost/mbostock/raw/4090846/us.json 404 (Not Found)"
BTW: The Plunker also has a download button so it downloads all the files used in that Plunker in a compressed zip file. You could use that too. Good luck!

Related

Displaying a map using D3.js projection

I'm trying to display India's map using D3.js and this geoJSON file. When I run the following HTML file in the browser, the map doesn't get generated, with no error on the console.
I suspect this has something to do with projection because when I remove the projection from the path variable, I do get a tiny map at the top of the svg. I tried Mercator, Albers and other projections but nothing seems to work.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>India</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 500;
var projection = d3.geoMercator()
.translate([w/2, h/2])
.scale(500);
//Define default path generator
var path = d3.geoPath()
.projection(projection);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var rectangle = svg.append("rect")
.attr("height", h).attr("width", w)
.attr("fill", "transparent")
.attr("stroke", "black")
.attr("stroke-width", 1);
//Load in GeoJSON data
d3.json("india.json", function(json) {
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
});
</script>
</body>
</html>

When I use your code, changing only the geojson of India to a geojson of the world, I get this:
The map is focused at [0,0], off the east coast of Afrcia. This is the default focus point of most projections in d3. This is also why you don't see anything in your viewport and don't see any errors.
If you set your center, to say (off the top of my head) [80,25] you'll be much more centered on India:
var projection = d3.geoMercator()
.center([80,25])
.translate([w/2, h/2])
.scale(800);
There are different ways to center a Mercator map, including using a rotation of the projection. Likewise, different map projections may be centered using different parameters or methods.
Using your code with with this modification (.center([80,25])) and a little bit of zooming in (.scale(800)) gets me:
A more precise method would be to find the centroid of India (online certainly) as the centering point rather than my guestimate.
Whenever you can't see what you had hoped to, check the DOM to see if it was drawn (but is only off screen) or zoom out to see if you are looking at the wrong place.
Why would the map project without a projection? Because the lat long pairs are interpreted as pixel locations on the svg, which is why the map is tiny when you don't define a projection for the geoPath.

D3 CSS Custom Colors in Force Layout

I'm working on a force directed layout. When I first started on this, I had the colors defined in CSS and it worked great. Somewhere along the way I decided to try the built-in D3 color scale, but when I tried to go back to my custom CSS colors, the code doesn't run without the color scale line anymore. Somehow I'm "stuck" with the d3 scale - line 4 of this code: https://jsfiddle.net/lilyelle/gwacm7z5/
var w = 600,
h = 500,
r = 30,
fill = d3.scale.category10()
;
I know my CSS is working because my pointer-events command is working - but somehow the rest of the CSS will not apply color to my elements. Can anyone help with getting rid of the d3 scale and returning to regular CSS styling???
Thank you!

You CSS should be:
.node .type1 {
fill:#690011;
}
.node .type2 {
fill:#BF0426;
}
And then when creating your circles:
node.append("circle")
.attr("r", 35)
.attr("class", function(d){
return "node type" + d.type;
})
.on("mouseover", fade(.1))
.on("mouseout", fade(1));
Updated fiddle.

D3 styling SVG elements when defined

I have a D3 chart with an axis that I want to style via the original calls to create it. However it only seems to work on the first call. I'll show you what I mean:
When I create the axis via
svg.select('g.y.axis').call(yaxis)
.selectAll("path")
.attr("fill","none")
.attr("stroke", "#000")
.selectAll("line")
.attr("fill","none")
.attr("stroke", "#000");
Only the path is styled correctly. You can check out my jsfiddle to see what I mean. I know this may be slower than just having CSS styles but I need it to be styled in the original call for what I'm working on. Thanks in advance!

It's because d3.selectAll("foo").selectAll("bar") will try to find <bar>s that are inner elements to founded <foo>s. And in your case svg finds no <line>s in <path>s.
Just call separately:
svg.selectAll("path")...
svg.selectAll("line")...
UPD
To find path/line in .y.axis:
svg.select(".y.axis").selectAll("path")
or
svg.selectAll(".y.axis path")

JSON map too big -- how to find the right scale and projection?

I am trying to adapt Mike Bostock's map tutorial for a different map. I have this working code using the uk.json file:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
/* CSS goes here. */
</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
/* JavaScript goes here. */
var width=960, height=1160;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height) ;
d3.json("./shapefiles/uk.json", function(error, uk){
if (error) return console.error(error);
svg.append("path")
.datum(topojson.feature(uk,uk.objects.subunits))
.attr("d", d3.geo.path().projection(d3.geo.mercator()));
});
</script>
But when I try to use a similar design with my new.json file all I get is a big black rectangle instead of a map.
This is how the uk.json file starts out:
{"type":"Topology","objects":{"subunits":{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","properties":{"name":"England"},"id":"ENG","arcs":[[[0]],[[1]],[[2]],[[3]],[[4]],[[5]],[[6,7,8,9]]]},{"type":"MultiPolygon","properties":{"name":"Ireland"},"id":"IRL","arcs":[[[10]],[[11]],[[12]],[[13]],[[14]],[[15]],[[16,17]]]},{"type":"MultiPolygon","properties":{"name":"N. Ireland"},"id":"NIR","arcs":[[[-17,18]],[[19]]]},{"type":"MultiPolygon","properties":{"name":"Scotland"},"id":"SCT","arcs":[[[20]],[[21]],[[22]],[[23]],[[24]],[[25]],[[26]],[[27]],[[28]],[[29]],[[30]],[[31]],[[32]],[[33]],[[34]],[[35]],[[36]],[[37]],[[38]],[[39]],[[40]],[[41]],[[42]],[[43]],[[44]],[[45]],[[46]],[[47]],[[48]],[[-9,49]],[[50]],[[51]],[[52]],[[53]],[[54]],[[55]],[[56]],[[57]],[[58]],[[59]],[[60]],[[61]],[[62]],[[63]],[[64]],[[65]],[[66]]]},{"type":"MultiPolygon","properties":{"name":"Wales"},"id":"WLS","arcs":[[[67]],[[-7,68]],[[69]]]}]},"places":{"type":"GeometryCollection","geometries":[{"type":"Point","properties":{"name":"Ros Comain"},"coordinates":[3562,3404]},{"type":"Point","properties":{"name":"Muineachan"},"coordinates":[4349,3968]},{"type":"Point","properties":{"name":"Greenock"},"coordinates":[5782,5506]},{"type":"Point","properties":{"name":"Sunderland"},"coordinates":[7961,4580]},{"type":"Point","properties":{"name":"Southampton"},"coordinates":[7948,905]},{"type":"Point","properties":{"name":"Bristol"},"coordinates":[7183,1408]},{"type":"Point","properties":{"name":"Bournemouth"},"coordinates":[7625,750]},{"type":"Point","properties":{"name":"Omagh"},"coordinates":[4133,4288]},{"type":"Point","properties":{"name":"Chester"},"coordinates":[6965,3008]},{"type":"Point","properties":{"name":"Swansea"},"coordinates":[6299,1573]},{"type":"Point","properties":{"name":"Carlisle"},"coordinates":[6959,4544]},{"type":"Point","properties":{"name":"Southend-on-Sea"},"coordinates":[9319,1500]},{"type":"Point","properties":{"name":"Reading"},"coordinates":[8220,1426]},{"type":"Point","properties":{"name":"Leicester"},"coordinates":[8121,2487]},{"type":"Point","properties":{"name":"Bradford"},"coordinates":[7722,3556]},{"type":"Point","properties":{"name":"Sheffield"},"coordinates":[7884,3160]},{"type":"Point","properties":{"name":"Shannon"},"coordinates":[3122,2554]},{"type":"Point","properties":{"name":"Waterford"},"coordinates":[4255,2147]},{"type":"Point","properties":{"name":"Tralee"},"coordinates":[2570,2155]},{"type":"Point","properties":{"name":"Donegal"},"coordinates":[3605,4333]},{"type":"Point","properties":{"name":"Fort William"},"coordinates":[5548,6314]},{"type":"Point","properties":{"name":"Ayr"},"coordinates":[5868,5065]},{"type":"Point","properties":{"name":"Aberdeen"},"coordinates":[7509,6637]},{"type":"Point","properties":{"name":"Perth"},"coordinates":[6610,5933]},{"type":"Point","properties":{"name":"Dundee"},"coordinates":[6914,5997]},{"type":"Point","properties":{"name":"Middlesbrough"},"coordinates":[8058,4270]},{"type":"Point","properties":{"name":"Coventry"},"coordinates":[7884,2295]},{"type":"Point","properties":{"name":"Bath"},"coordinates":[7334,1348]},{"type":"Point","properties":{"name":"Exeter"},"coordinates":[6571,723]},{"type":"Point","properties":{"name":"Cambridge"},"coordinates":[8929,2094]},{"type":"Point","properties":{"name":"Kingston upon Hull"},"coordinates":[8640,3511]},{"type":"Point","properties":{"name":"Londonderry"},"coordinates":[4112,4654]},{"type":"Point","properties":{"name":"Lisburn"},"coordinates":[4540,4215]},{"type":"Point","properties":{"name":"Penzance"},"coordinates":[5265,205]},{"type":"Point","properties":{"name":"York"},"coordinates":[8155,3712]},{"type":"Point","properties":{"name":"Blackpool"},"coordinates":[6881,3584]},{"type":"Point","properties":{"name":"Dumfries"},"coordinates":[6558,4715]},{"type":"Point","properties":{"name":"Scarborough"},"coordinates":[8576,3995]},{"type":"Point","properties":{"name":"Plymouth"},"coordinates":[6164,435]},{"type":"Point","properties":{"name":"Ipswich"},"coordinates":[9610,1975]},{"type":"Point","properties":{"name":"Norwich"},"coordinates":[9694,2487]},{"type":"Point","properties":{"name":"Brighton"},"coordinates":[8744,842]},{"type":"Point","properties":{"name":"Kirkwall"},"coordinates":[6946,8280]},{"type":"Point","properties":{"name":"Inverness"},"coordinates":[6116,6909]},{"type":"Point","properties":{"name":"Oxford"},"coordinates":[8045,1701]},{"type":"Point","properties":{"name":"Luton"},"coordinates":[8582,1802]},{"type":"Point","properties":{"name":"Portsmouth"},"coordinates":[8155,814]},{"type":"Point","properties":{"name":"Peterborough"},"coordinates":[8692,2441]},{"type":"Point","properties":{"name":"Nottingham"},"coordinates":[8097,2798]},{"type":"Point","properties":{"name":"Stoke"},"coordinates":[7444,2825]},{"type":"Point","properties":{"name":"Dover"},"coordinates":[9694,1119]},{"type":"Point","properties":{"name":"Drogheda"},"coordinates":[4749,3483]},{"type":"Point","properties":{"name":"Dundalk"},"coordinates":[4704,3740]},{"type":"Point","properties":{"name":"Galway"},"coordinates":[3002,3074]},{"type":"Point","properties":{"name":"Kilkenny"},"coordinates":[4164,2509]},{"type":"Point","properties":{"name":"Killarney"},"coordinates":[2700,1957]},{"type":"Point","properties":{"name":"Sligo"},"coordinates":[3368,3983]},{"type":"Point","properties":{"name":"Edinburgh"},"coordinates":[6772,5520]},{"type":"Point","properties":{"name":"Newcastle"},"coordinates":[7818,4655]},{"type":"Point","properties":{"name":"Liverpool"},"coordinates":[6965,3207]},{"type":"Point","properties":{"name":"Cardiff"},"coordinates":[6768,1454]},{"type":"Point","properties":{"name":"Wick"},"coordinates":[6860,7792]},{"type":"Point","properties":{"name":"Leeds"},"coordinates":[7831,3586]},{"type":"Point","properties":{"name":"Cork"},"coordinates":[3360,1818]},{"type":"Point","properties":{"name":"Lerwick"},"coordinates":[8110,9361]},{"type":"Point","properties":{"name":"Limerick"},"coordinates":[3277,2519]},{"type":"Point","properties":{"name":"Manchester"},"coordinates":[7399,3284]},{"type":"Point","properties":{"name":"Birmingham"},"coordinates":[7611,2347]},{"type":"Point","properties":{"name":"Belfast"},"coordinates":[5000,4288]},{"type":"Point","properties":{"name":"Glasgow"},"coordinates":[6104,5454]},{"type":"Point","properties":{"name":"Dublin"},"coordinates":[4811,3131]},{"type":"Point","properties":{"name":"London"},"coordinates":[8777,1456]}]}},"arcs":[[[4788,4],[-7,-4],[-7,4],[1,12],[5,8],[5,-3],[5,-9],[-2,-8]],[[4763,36],[-4,-7],[-6,3],[-4,11],[-1,7],[5,-1],[3,-2],[2,-1],[4,-3],[1,-7]],[[8016,789],[98,-36],[16,1],[6,-1],[8,-6],[1,-2],[-1,-8],[0,-2],[2,-1],[6,1],[1,0],[14,-19],[0,-7],[-3,0],[-2,-2],[-1,-2],[-3,-2],[-24,-7],[-10,-4],[-18,-14],[-4,-5],[-2,-4],[1,-20],[-1,-10],[-2,-5],[-72,-19],[-23,6],[-84,54],[-5,6],[-21,13],[-8,3],[-24,-2],[-11,-4],[-11,-7],[15,26],[26,20],[56,23],[-1,-3],[-2,-6],[-1,-3],[16,2],[15,11],[22,24],[16,10],[15,1]],[[8247,803],[0,-6],[-53,6],[0,7],[14,5],[17,26],[8,0],[6,-5],[2,-6],[-3,-5],[-5,-4],[0,-5],[3,-3],[6,-7],[5,-3]],[[5838,1147],[-5,-4],[-5,6],[-1,13],[3,11],[3,2],[3,-7],[1,-3],[1,-6],[0,-12]],[[9459,1336],[-16,-6],[-75,5],[-13,5],[-11,10],[-10,12],[-6,12],[9,25],[4,5],[9,2],[80,-24],[6,-4],[7,-4],[14,-14],[6,-13],[-4,-11]],[[7130,1561],[-5,19],[0,8],[-3,7],[-4,4],[0,3],[2,2],[10,4],[2,3],[0,3],[-1,5],[-2,5],[-5,16],[-5,12],[-1,5],[0,4],[4,5],[3,4],[2,7],[0,5],[-4,8],[-3,6],[0,7],[1,5],[2,8],[14,19],[5,13],[-1,0],[-7,-4],[-12,7],[-12,10],[-4,2],[-5,1],[-12,-1],[-4,2],[-3,2],[-2,2],[-2,5],[-2,3],[-9,9],[-1,3],[-7,8],[-64,49],[-7,-1],[-6,-2],[-19,-13],[-7,-2],[-5,-1],[-7,0],[-5,3],[-14,10],[-4,5],[-2,4],[-1,6],[-1,3],[-1,3],[-2,1],[-19,15],[-14,18],[0,1],[-19,30],[-1,5],[-1,7],[1,5],[-1,7],[-1,5],[-2,3],[-11,11],[-6,5],[-5,2],[-1,2],[0,2],[4,16],[2,8],[3,3],[2,3],[3,2],[0,1],[0,1],[-10,6],[-4,5],[-1,4],[2,3],[5,2],[17,6],[4,2],[2,4],[2,5],[-2,2],[-3,1],[-3,0],[-4,0],[-4,1],[-5,6],[-1,4],[1,4],[26,33],[4,6],[3,10],[2,3],[2,3],[2,2],[9,4],[3,2],[2,2],[4,7],[2,1],[3,2],[6,2],[22,1],[4,1],[4,4],[0,3],[-2,3],[-3,1],[-16,4],[-3,4],[-2,3],[-2,10],[0,2],[2,6],[3,6],[5,4],[13,8],[4,5],[2,3],[-1,9],[-1,0],[-73,5],[-4,3],[-17,16],[-24,15],[-16,13],[-22,13],[-2,2],[-3,3],[-1,3],[-2,4],[-1,4],[-1,8],[0,3],[0,4],[1,3],[7,11],[5,5],[3,1],[29,11],[17,10],[7,2],[50,3],[4,3],[6,12],[17,13],[5,5],[3,5],[1,3],[-1,4],[-3,3],[-16,17],[-3,0],[-3,0],[-3,-1],[-13,-11],[-18,-8],[-2,-2],[-3,-3],[-3,-6],[-2,-2],[-2,-2],[-4,-2],[-5,-1],[-7,1],[-3,1],[0,3],[4,5],[1,3],[0,4],[-1,3],[-2,3],[-5,7],[-3,7],[0,4],[0,5],[1,4],[2,3],[2,2],[18,9],[6,4],[4,5],[1,4],[1,4],[2,12],[1,5],[2,4],[2,2],[13,6],[3,3],[2,4],[2,9],[-1,11],[1,6],[1,4],[4,8],[3,8],[2,3],[2,3],[3,1],[4,1],[13,1],[4,2],[4,3],[4,7],[1,3],[-1,3],[-11,4],[-4,3],[-3,3],[-6,10],[-1,1],[-4,2],[-15,4],[-19,2],[-3,2],[-3,3],[-5,8],[-1,2],[-3,1],[-20,1],[-11,5],[-7,6],[-8,21],[0,4],[0,5],[1,4],[4,5],[3,2],[9,8],[3,4],[1,4],[-1,3],[-2,4],[-1,5],[-1,7],[1,5],[2,3],[7,2],[4,2],[4,4],[6,10],[3,5],[4,4],[8,5],[3,1],[3,1],[2,1],[33,21],[7,3],[12,1],[8,-2],[3,-1],[10,-12],[3,-2],[3,-1],[5,-1],[5,1],[26,6],[8,0],[8,-2],[3,-1],[34,-31],[4,-1],[6,-2],[5,2],[14,8],[6,3],[9,1],[4,2],[2,3],[1,4],[0,15],[0,3],[-2,3],[-4,9],[-1,7],[-27,14],[-24,3],[-5,2],[-3,2],[-5,10],[-16,16],[-3,5],[-1,5],[0,3],[0,4],[-4,16],[-5,12],[-17,32],[-3,5],[-32,29],[-3,4],[0,1],[-1,3],[1,3],[2,2],[24,13],[2,3],[1,4],[-1,8],[-3,5],[-3,4],[-22,20],[-41,29],[-6,2],[-24,4],[-12,4]],[[6859,3061],[0,16],[-7,10],[-10,15],[-16,28],[-23,26],[-9,14],[-1,14],[7,9],[12,6],[28,3],[13,5],[23,15],[15,0],[15,-16],[38,-85],[12,-13],[16,-12],[18,-7],[20,0],[1,2],[1,4],[2,4],[5,3],[6,-1],[9,-4],[5,-1],[11,1],[9,2],[18,9],[-4,12],[2,8],[5,6],[5,6],[6,-2],[5,0],[6,3],[6,6],[-9,0],[-33,-6],[-7,-4],[-5,-14],[-11,-5],[-7,1],[-21,2],[-28,9],[-25,15],[-20,19],[-16,20],[-75,139],[-3,12],[1,13],[8,14],[43,60],[34,37],[5,4],[6,9],[26,16],[8,9],[-56,1],[-23,9],[-18,21],[-5,31],[8,69],[-8,25],[10,16],[15,8],[60,19],[10,1],[9,-6],[5,-1],[2,4],[2,5],[5,5],[6,4],[5,2],[-8,10],[23,19],[3,15],[-12,-7],[-11,-4],[-20,-2],[-3,3],[-10,19],[-1,8],[4,5],[7,4],[5,5],[13,20],[9,8],[21,7],[7,9],[13,25],[-11,13],[-16,25],[-9,16],[-2,9],[14,4],[14,12],[10,16],[0,18],[-5,0],[-2,-14],[-9,-11],[-20,-13],[-23,-10],[-12,-8],[-5,-10],[-5,-14],[-12,-6],[-29,-2],[-9,6],[-9,13],[-4,15],[6,9],[-4,11],[-6,9],[-7,4],[-9,-4],[3,-12],[-2,-13],[-4,-12],[-2,-10],[-3,-8],[-19,-20],[-11,-19],[-7,-9],[-17,-8],[-2,-11],[2,-12],[0,-11],[-23,27],[-6,5],[-10,0],[-9,2],[-8,4],[-6,7],[2,14],[3,15],[0,14],[-10,7],[0,6],[22,6],[5,26],[-2,31],[2,19],[-11,-5],[-5,-10],[-6,-23],[6,-18],[-10,-4],[-15,1],[-10,-2],[-14,-4],[-14,11],[-23,35],[-19,20],[-9,12],[-3,15],[1,7],[3,7],[1,8],[-4,13],[-2,10],[-2,1],[-15,7],[-22,38],[-15,11],[-61,71],[-11,4],[-3,4],[-7,13],[-6,6],[4,7],[7,6],[3,3],[14,31],[17,72],[22,41],[9,23],[4,8],[6,4],[14,4],[7,4],[8,9],[10,15],[6,18],[-6,15],[21,54],[13,25],[15,15],[13,2],[7,-5],[7,-6],[10,-4],[7,1],[27,12],[-8,5],[-33,13],[17,15],[10,7],[41,10],[8,-2],[4,-4],[4,-3],[5,-4],[24,-6],[13,-1],[54,13],[12,7],[-45,0],[0,6],[12,2],[10,5],[10,3],[13,-4],[0,7],[-16,6],[-3,-1]],[[6881,4636],[3,17],[8,14],[1,4],[1,24],[3,5],[3,1],[4,-1],[25,-10],[4,-1],[11,2],[3,2],[3,3],[10,20],[4,3],[21,8],[4,3],[5,4],[2,4],[14,17],[18,22],[10,6],[11,2],[29,11],[17,10],[14,11],[8,11],[16,20],[11,7],[8,2],[4,4],[2,4],[2,7],[0,3],[0,3],[-1,2],[-2,3],[-1,4],[0,6],[1,4],[3,3],[9,6],[35,35],[57,42],[7,2],[16,3],[9,-1],[4,-2],[6,-4],[2,-2],[4,-1],[6,0],[13,7],[5,4],[3,5],[3,8],[2,5],[5,7],[4,3],[19,7],[7,6],[8,6],[19,3],[7,3],[14,7],[8,8],[6,7],[3,4],[1,4],[0,4],[-1,3],[-2,3],[-2,2],[-14,17],[-2,3],[0,3],[0,3],[0,1],[0,2],[0,2],[-1,3],[-7,11],[-8,11],[-11,16],[-10,23],[-2,6],[-1,4],[-1,3],[-2,2],[-7,7],[-2,2],[-2,3],[0,4],[-1,3],[-3,2],[-10,5],[-3,2],[-1,3],[-1,3],[0,4],[0,5],[3,2],[3,2],[8,2],[25,0],[10,2],[6,2],[5,5],[35,43],[4,5],[2,8],[3,3],[3,3],[6,4],[7,6],[3,2],[11,4],[3,2],[16,13],[3,5],[2,5],[1,14],[3,7],[3,3],[3,2],[30,9]],[[7546,5390],[8,-14],[85,-88],[10,-21],[6,-11],[14,-8],[4,-6],[3,-7],[3,-3],[6,1],[4,5],[3,4],[2,2],[8,-1],[8,-3],[8,-8],[6,-13],[-14,0],[0,-5],[8,-4],[23,5],[14,-1],[44,-26],[0,-6],[-4,-6],[2,-7],[4,-6],[7,-7],[-9,-5],[0,-7],[6,-2],[12,-10],[0,-6],[-5,-8],[3,-5],[6,-3],[5,-4],[3,-11],[2,-61],[-1,-9],[-3,-15],[-1,-5],[0,-8],[4,-19],[16,-24],[2,-16],[-1,-4],[-1,-5],[-2,-3],[-3,-4],[-3,-7],[2,-6],[2,-6],[2,-6],[3,-11],[8,-10],[15,-13],[-5,-12],[3,-6],[6,-5],[5,-9],[-2,-9],[-5,-8],[-3,-8],[3,-9],[11,-14],[3,-7],[2,-19],[6,-20],[3,-6],[2,-1],[8,-3],[3,-2],[1,-2],[2,-8],[11,-23],[5,-8],[4,-8],[3,-12],[4,-10],[7,-5]
And this is how my replacement new.json file starts out:
{"type":"Topology","objects":{"subunits":{"type":"GeometryCollection","geometries":[{"type":"Polygon","id":"id1","arcs":[[-1,-2,-3,-4]]},...
The numbers in the 'arcs' columns go much much higher in the new.json file (like into the thousands) while the numbers used in the uk.json file generally stay under 100. I think this might have something to do with the scale issues but I'm so new to json that I can't figure out how to solve the problem. I don't know how to pick a projection and data that will best map my data. Any advice? I would be glad to upload the json files but am not sure where I can do that.
Thanks!

d3.js, is it possible to append hyperlinks to GeoJSON file?

I have started to play with d3.js and json recently and after not finding answer in other threads I state my question directly here.
I wonder if its possible to accomplish following task with d3 library:
I have working example of loaded and projected geojson file made according to Scott Murray's book - Interactive Data Visualization (https://github.com/alignedleft/d3-book)
Here is my code (from book):
<html>
<head>
<title>Zoom/pan map example</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
</html>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 300;
//Define map projection
var projection = d3.geo.albersUsa()
.translate([w/2, h/2])
.scale([500]);
//Define path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in GeoJSON data
d3.json("us-states.json", function(json) {
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", "steelblue");
});
</script>
<body>
</html>
json file from chapter 12 - https://github.com/alignedleft/d3-book/tree/master/chapter_12
Now,
I want - let's say - polygon representing state Washington (top left corner) to be clickable, "holding" hyperlink. In other words - is it possible to append hyperlink to that polygon ?
Second thing - is it possible to insert text (state numbers) into polygons so that text will remain inside polygons and not crossing its borders ?
I hope its clear and I would be thankful if someone skilled enough could provide solution for this problem.

Svg has a <a> tag you can insert dinamically:
http://www.w3schools.com/svg/svg_text.asp.
This is probably the way to go

Categories