Comments (16)
Ensure you have the latest build of topojson which fixes a bug related to
this, and ensure you're using the default countries file, not the
scale-rank version to provided good input into topojson.
On Mon, Sep 30, 2013 at 11:58 PM, benhosken [email protected]:
When creating a cartogram for the countries of the world, countries
sitting on or passing through the right side of the map e.g. 180deg distort
when the cartogram is created.It appears that the geometry array that is created has negative (or zero)
values for components of the features path and this is causing the display
issue.I have created a cut down example at http://flinklabs.com/labs/worldcarto/which highlights the issue.
It is possible to partially correct this by overwriting the values for
Russia and Fiji but this is not perfect nor ideal.—
Reply to this email directly or view it on GitHubhttps://github.com//issues/12
.
from topogram.
Thanks Nathaniel for the good suggestions. I have downloaded the latest version from github v 1.4.2 and am using the very latest world-110m.json file from the topojson github repro as well. After changing to these, there was no difference in the display. The example showing the issue has been updated with the latest files.
from topogram.
Link to the countries file?
Sent from my handsful device.
On Oct 1, 2013, at 0:33, benhosken [email protected] wrote:
Thanks Nathaniel for the good suggestions. I have downloaded the latest
version from github v 1.4.2 and am using the very latest world-110m.json
file from the topojson github repro as well. After changing to these, there
was no difference in the display. The example showing the issue has been
updated with the latest files.
—
Reply to this email directly or view it on
GitHubhttps://github.com//issues/12#issuecomment-25430462
.
from topogram.
I don't think that this is a TopoJSON issue, but a limitation of the original algorithm. There's nothing in the algorithm to "pin" points to their original location, because its goal is to shrink or grow each polygon (by moving its points) to have an area proportional to its numeric value. I can imagine some hacks that would achieve this purpose, but they would have strange side effects. For instance, if you pin one arc (edge) of a polygon, the rest of its points will be distorted more aggressively to modify the polygon's area accordingly.
The other issue that might be at play here is that MultiPolygon geometries with very large bounding boxes (for instance, if Russia is split by the date line) may be dramatically distorted. I think the only way to do this right with a world map is to ensure that countries are combined, e.g. by using another projection that doesn't break up Russia. @nvkelso, @mbostock or @jasondavies might have some ideas here... Perhaps a Dymaxion™ projection?
from topogram.
Stitching of MultiPolygons (e.g. Russia) hasn’t actually made it to a release yet: see topojson/topojson#119 for the work-in-progress.
from topogram.
Sweet, thanks Jason. I'll keep this issue open and we'll see if stitching together Russia addresses it.
from topogram.
Thanks everyone. I'll keep an eye out for when the stitching makes it in. In the meantime, as you suggest Shawn, there are some hackery pokery things we can/have done to restrict the wraparound occurring once the geometries have been returned from cartogram.js.
from topogram.
Slightly off-topic, but any ideas why the countries and continents look so strange? E.g. the USA is extremely small. What values should I apply instead of the hardcoded 100
in the original example to get a "normal" map? If I weight countries by the territory (ha), then Africa would be distorted. Any idea?
from topogram.
I was actually thinking about this recently. The multiplier just amplifies the area (in projected pixels) of each feature linearly. What we (the d3-cartogram internals) should probably use instead is the average feature area. I'll take a look and get back to you.
from topogram.
In the project we are using Cartogram.js for we calculate the z-score across all the countries and then multiply that by a factor k (I think 100) and then push that into the library to generate the sizings. We tried using a spread i.e. 0 for the smallest 100 for the largest but this skewed many the visual display too much.
When we want to get a base map from cartogram.js we set the iterations to 1 and then call it. Then reset the iterations to 8, 12 or 16 depending upon the iterations required.
As an aside, at a world map level, we used a simplified map as the level of detail of borders made computation run for too long in our use case.
On 28 Jan 2014, at 4:50 am, Shawn Allen [email protected] wrote:
I was actually thinking about this recently. The multiplier just amplifies the area (in projected pixels) of each feature linearly. What we (the d3-cartogram internals) should probably use instead is the average feature area. I'll take a look and get back to you.
—
Reply to this email directly or view it on GitHub.
from topogram.
Thank you @benhosken, setting the iterations to one is working perfectly.
from topogram.
Hello Everyone,
I am new to d3.js. I am trying to understand the cartogram for world map. Like mentioned here, my cartogram also has lines (Russia). Can anyone tell me what is the solution for this : http://stackoverflow.com/questions/29787205/how-to-remove-lines-in-between-cartogram-maps-in-d3-js
from topogram.
@benhosken Did u find any solution for this issue ?
from topogram.
We did find a solution to this which involved manually editing the json map in QGis. The issue was caused with arcs that went from 180 or maybe 360 to 0 basically when they wrapped around the edge.
Because we were creating a cartogram, the accuracy of the shape was not a problem when we had a tiny section of an island cut off.
I've answered the StackOverflow question with an example JSON file we used.
We also simplified the map as we needed to create real time cartograms and then convert them into a hexagonal representation in the browser. Pushing the boundaries quite a bit but it did work.
Let me know if you have problems with it.
Ben Hosken
Founder
Flink Labs
www.flinklabs.com
@flinklabs
03 9018 5017
Flink is clever
On 24/04/2015, at 8:21 AM, Shalini Ravishankar [email protected] wrote:
Hello Everyone,
I am new to d3.js. I am trying to understand the cartogram for world map. Like mentioned here, my cartogram also has lines (Russia). Can anyone tell me what is the solution for this : http://stackoverflow.com/questions/29787205/how-to-remove-lines-in-between-cartogram-maps-in-d3-js
—
Reply to this email directly or view it on GitHub.
from topogram.
Hey @shaliniravi,
I've been building a cartogram of the world, and solved it a different way from @benhosken. I used https://github.com/mbostock/world-atlas, and modified the Makefile to add --stitch-poles false
. That section now looks like:
topo/world-%.json: shp/ne_%_admin_0_countries.shp
mkdir -p $(dir $@)
$(TOPOJSON) \
--quantization 1e5 \
--stitch-poles false \
--id-property=+iso_n3 \
-- countries=shp/ne_$*_admin_0_countries.shp \
| $(TOPOMERGE) \
-o $@ \
--io=countries \
--oo=land \
--no-key
Then when I ran make topo/world-110m.json
I got this file, which has the Chukchi Peninsula (and a tiny bit of Fiji) as separate polygons.
Hope this helps!
from topogram.
I understood. It works fine now :) Thank You Guys 😊
Thanks & Regards,
Shalini Ravishankar
From: Alex Louden
Sent: Thursday, April 23, 2015 10:02 PM
To: shawnbot/d3-cartogram
Cc: Shalini Ravishankar
Hey @shaliniravi,
I've been building a cartogram of the world, and solved it a different way from @benhosken. I used https://github.com/mbostock/world-atlas, and modified the Makefile to add --stitch-poles false. That section now looks like:
topo/world-%.json: shp/ne_%admin_0_countries.shp
mkdir -p $(dir $@)
$(TOPOJSON)
--quantization 1e5
--stitch-poles false
--id-property=+iso_n3
-- countries=shp/ne$*_admin_0_countries.shp
| $(TOPOMERGE)
-o $@
--io=countries
--oo=land
--no-key
Then when I ran make topo/world-110m.json I got this file, which has the Chukchi Peninsula (and a tiny bit of Fiji) as separate polygons.
Hope this helps!
—
Reply to this email directly or view it on GitHub.
from topogram.
Related Issues (20)
- Does anyone know if this would enable nvd3 in IE8? HOT 1
- page starts out with no attribute selected HOT 1
- Comment Example Doesn't Have Correct Number of Variables HOT 6
- How can make d3-cartogram works on a NULL projection? HOT 1
- Area Scaling HOT 1
- Feature? Absolute scaling of cartogram regions HOT 3
- Uncaught TypeError: Cannot read property '0' of null HOT 1
- cartogram.js receive help to coordinate directly.
- I'm trying to read data not from .csv, but i have no idea. HOT 2
- topojson.merge topojson.mesh HOT 3
- Make this repo a d3-plugin
- Publish to npm HOT 2
- example is not working: pointing to wrong file HOT 1
- can't find build/topogram.js HOT 2
- Cartogram does not seem to load
- Needs modification to work with d3 v3 HOT 7
- debugger can not pause code
- sum() routine is wrong HOT 1
- Needs modification to work with topojson.v1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from topogram.