Currently I'm scaling state values linearly from 1 to 1000, which seems unnecessarily arbitrary. A linear scale of 0 to 1 doesn't work either, but in theory it should because the area scaling is linear.

Hello,
I think it'd be a good idea to list this repo in npm and make it a v4 d3-plugin like the ones listed here.

I went ahead and opened a PR that basically implements this. Please check it out. #30

My cartogram shows regional data, but I am would like to overlay it with the country borders. For my regular choropleth, I do this using topojson.merge (to merge regions belonging to the same country into a single shape) and topojson.mesh (to extract the borders between countries)... but I have been struggling for a while to do this with the cartogram shapes. I guess one of the reasons is that there is no GeometryCollection to work with?

Displaying country borders would aid a lot to recognise what regions/country one is looking at in the distorted map.

I was following this example - http://th-mayer.de/cartogram/#nrlangs and would love for the country size to shrink porportionally if the number of languages is 0 for a given country. I have played around with the d3 scale domains and ranges but the country size does not shrink in proportion.

Related to #3

we test the toy code given by this repo,

view source

However, it encounters a type error:
Uncaught TypeError: Cannot read property '0' of null

Any idea?

Add a debugger code in value,run in the browser,the code will not pause.is why

Doesn't fail gracefully when there's nothing in the hash

I am currently trying to implement this algorithm in Three.js cartogram. But I have a problem. for example: Region 1 has 4500 vertices. to read the format topojson is more or less than 4000 vertices. then my problem is that I assign the same number of vertices in Region 1.

i need: 4500 (old vertices) =4500 (new vertices cartogram algorithm.)
this is my problem: 4500 (old vertices) =4000 (new vertices cartogram algorithm.)

Someone can help me change cartogram.js to receive directly the coordinates of the regions or failing GeoJSON files where vertices are not lost.
d3.js I not know much about, so I need help. with the end result (the new coordinates of the algorithm) the move to Three.js.
(sorry i dont speak english)
thank you!

for example ,can I use static data in the .html file?

The part of the cartogram() function that I'm most uncomfortable with is where I insert projected arc coordinate references into each of the projected GeoJSON feature geometries. This is a performance optimization that allows me to just iterate over the arc coordinates in the main loop and avoid having to modify the feature geometries each time. It's done with a dictionary in which each coordinate is hashed as its string representation (because the native String() is much faster than anything I could cook up), but it still feels like a hack. And though I haven't done any in-depth profiling yet, I'm pretty sure that this is one of the biggest time sinks in the whole process.

I couldn't think of any other way to do it, though, without ripping the guts out of TopoJSON's unpacking code and re-implementing it to produce an intermediary data structure. I'm wondering if this is a use case that TopoJSON should support. The intermediary structure would be like a topology object, but contain projected arc coordinates and references to those in the feature geometries.

@mbostock or @jasondavies, thoughts?

In the commented out example of how to use the code it only refers to topology (and not also the geometry) variable:

• var features = cartogram(topology);

Using this would make d3 compatible with IE 8, but does it consequently make nvd3 compatible? Has anyone tried it?

To start, thanks for this awesome d3 plugin!

I can't seem to find it on the npm registry however. Is it perhaps under a different name? Otherwise, would be great if you could publish it there.

Would it be possible for the cartogram to scale features absolutely as well as relatively? Only the latter seems to occur at the moment that is, total area seems to preserved as U.S. states are scaled against one another. For example, with the dataset being presented in the attached image, the US should being nearly twice as large as it actually is, yet the cartogram is roughly the same size as the unmodified map.

When d3.v2.min.js is replaced with d3.v3.min.js, I get the image below. Any plans of modifying this?

Hey there!

It seems the cartogram library is not loading... When it gets to d3.cartogram() my code simply stops there without issuing any error message. Here is my code, "test 1" is logged but not "test 2":

Cartogram.prototype.createMap = function() {

	let that = this;

	this.projection = d3.geoConicConformal()
		.center([2.454071, 46.279229])
		.scale(2600)
		.translate([this.width / 2, this.height / 2]);

	this.path = d3.geoPath()
		.projection(this.projection);

	this.map = this.svg.append('g');

	console.log("test 1")

	this.cartogram = d3.cartogram()
		.projection(this.projection)
		.properties(function(d) {
	        return that.nested[d.properties.nom];
		});

	console.log("test 2")

	this.features = this.cartogram.features(this.regions, this.regions.objects.regions.geometries);

   	this.map = this.map.data(this.features)
		.enter().append('path')
			.attr('fill', '#fafafa')
			.attr('d', that.path);

}

I imported all the necessary libraries in my index.html:

<script src='https://d3js.org/d3.v5.js'></script>
<script src="https://unpkg.com/topojson@3"></script>
<script type='text/javascript' src='lib/cartogram.js'></script>
<script type='module' src='main.js'></script>

Thanks for your help!

Seems to be some things not correctly moved over with the renaming from d3-cartogram to topogram.

I tried simply pointing the import to the cartogram.js file, but then I get the error on the first line of cartogram.js:
SyntaxError: import declarations may only appear at top level of a module

I have a map already with real x,y pixel place, and need no projection.
so I made this change in the demo code:

  // var proj = d3.geo.albersUsa(),
  var proj = null,

and the carto code fails with:

  TypeError: projection is not a function cartogram.js:49

at

  out1[i1] = projection(tf(topology.arcs[i2][i1]));

So, is it possible to make d3-cartogram works on a NULL projection?

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.

It doesn't add the last entry in the array, eg, sum([1, 2, 3, 4]) gives 6.

Remember that 'for' loops evaluate the test before entering the loop!

Just replace the function code with d3.sum(numbers).

https://github.com/mbostock/topojson/wiki/Client-API-Reference