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

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

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.

Geojson map not showing up

I'm struggling with creating a map. I am simply using one of the new york times geojsons ("census_tracts_2010.geojson") from here ( https://github.com/dwillis/nyc-maps ).
I'd appreciate it if someone could look at my code below, and let me know why no map is showing up for me, especially I have no errors. If something is wrong, then it's probably in the last two lines.
STEP 1 - CONVERT GEOJSON TO TOPOJSON
ran this in terminal
geo2topo census_tracts_2010.geojson > nyc2.json
STEP 2
created index.html
(inspired by https://bost.ocks.org/mike/map/)
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 1160;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("nyc2.json", function(error, uk) {
if (error) return console.error(error);
console.log(uk.objects)
console.log(uk.objects.census_tracts_2010)
svg.append("path")
.datum(topojson.feature(uk, uk.objects.census_tracts_2010))
.attr("d", d3.geo.path().projection(d3.geo.albersUsa()));
});
</script>
My output:Plain white webpage
Updated code:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 500,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("census_tracts_2010.geojson", function(error, uk) {
if (error) return console.error(error);
var subunits = topojson.feature(uk, uk.objects.nyct2010);
var projection = d3.geo.albers()
.center([0,40.7])
.rotate([-74,0])
.translate([width/2,height/2])
.scale(65000);
var path = d3.geo.path()
.projection(projection);
svg.append("path")
.datum(subunits)
.attr("d", path);
});
</script>

Data Source
First, your referenced file is already a topopjson. You can contrast the differences with a regular geojson in this file (from the same repository).
The most visible difference is that geojson uses recognizable coordinates while topojson uses arcs and what might look like arbitrary coordinates. Topojsons also finish with scale and translate values.
The Problem
Why does your map not appear? Well that could be because of issues in topojsoning a file that is already a topojson, but a more likely option - and one that touches on your other question - is that you are not focusing your map on your area of interest. This appears to be the the issue in your previous question as well.
You are using a geo.albersUsa projection - this is by default focused on the entire continental US (it's a composite projection so it includes space for Alaska and Hawaii).
Changing your code only to use the topojson you reference (census_tracts_2010) I got:
Your map is displaying properly - or at least as coded - but the entire area of interest looks like it could be a small insect that hit the screen to fast.
AlbersUSA vs Albers
You will need to modify your map projection parameters but if you want to keep the AlbersUSA projection you will not be able to center or rotate, instead use a plain Albers projection. The AlbersUsa is intended for the entire country and I don't believe it has centering or rotation methods.
Setting Map Parameters
To set an Albers projection you'll want to know the center of latitude and longitude of your area of interest. Let's say about 40.7N and 74 W - I used Google Earth to generalize and then adjusted until I got a pleasant result.
Generally for an Albers you also want to know your standard parallels; however, in d3 the default parallels are for the US. Yes, they could be made more specific for your projection (by choosing two parallels that intersect the upper and lower portions of your area of interest), but I'll leave them out in this answer.
The general pattern for an Albers projection in D3 is:
var projection = d3.geo.albers()
.center([0,y])
.rotate([-x,0])
.parallels([a,b]) // don't worry about this in this instance
.translate([width/2,height/2])
.scale(k);
Using the center coordinates above and a few attempts to get the scale down I got this:
Using:
var projection = d3.geo.albers()
.center([0,40.7])
.rotate([74,0])
.translate([width/2,height/2])
.scale(65000);
Note: I've modified your svg dimensions to something more appropriate to the shape of your area of interest (as opposed to the reference map dimensions in the demonstration creating a map of the UK). My dimensions are: 500 x 500.
A relatively more detailed explanation of an Albers projection's parameters is in this answer.

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!

Javascript Function Ordering

I have a basic question about how javascript functions execute within HTML. I'm creating a graph with dimple.js and want to select an svg element once the graph has been created via javascript. However, even when my jQuery selector is the very last bit of script on my page, it won't execute because the dimple graph hasn't actually been created. Here's the code I'm working with:
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function draw(data) {
"use strict";
var margin = 75,
width = 1400 - margin,
height = 600 - margin;
d3.select("body")
.append("h2")
.text("World Cup Attendance")
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin)
.attr("height", height + margin)
.append('g')
.attr('class','chart');
var myChart = new dimple.chart(svg, data);
var x = myChart.addTimeAxis("x", "year");
myChart.addMeasureAxis("y", "attendance");
x.dateParseFormat = "%Y";
x.tickFormat = "%Y";
x.timeInterval = 4;
myChart.addSeries(null, dimple.plot.line);
myChart.addSeries(null, dimple.plot.scatter);
myChart.draw();
};
</script>
</head>
<body>
<script type="text/javascript">
d3.tsv("world_cup.tsv", draw);
debugger
$('.example').doSomething();
</script>
</body>
</html>
I assumed the page and graph would be fully loaded where I placed the debugger statement at the bottom because that's the last line of code. However when the page pauses there the graph hasn't actually been created. After the debugger line the page runs through a bunch of functions in the dimple library to create the svg graph. Obviously the jQuery line right after doesn't work because there's no element to select yet.
I think I'm missing something fundamental when it comes to javascript. How do I get my jQuery to run only after dimple has done its thing?

You're supplying the draw function as a callback to the CSV request.
The drawing is done when draw is done. So put it there, or create a little anonymous function that calls them in sequence, e.g.,
d3.tsv("world_cup.tsv", function() {
draw();
$('.example').doSomething();
);
(If D3/Dimple's chart draw() function is also async then you'd need to do it in that callback, if it has one, but I don't know Dimple.)

appending d3.js canvas to div

I'm attempting to add a legend to a graph, and I want to append it to my chart div. Right now I'm using the following code, which appends the legend to the "body". I would like to instead append it to my "chart" div, so that I can create a footer after my legend. Right now the HTML page is processed first, and then my d3 javascript file gets run and therefore the legend gets placed below my footer. Thank you in advance.
// Create the svg drawing canvas...
var canvas = d3.select("body")
.append("svg:svg")
.attr("width", 300)//canvasWidth)
.attr("height", 300);//canvasHeight);

The following works, like I pointed out in the comment.
var canvas = d3.select("#chart")
.append("svg:svg")
.attr("width", 300)//canvasWidth)
.attr("height", 300);//canvasHeight);
Cheers :)

Categories