vasturiano / cartogram-chart Goto Github PK

I am having a hard time placing the map generated by this in a page. Although I can change the size of the object with the width and height methods, the map remains at the same Zoom level and position, which is including a lot of white space on the left and cutting off parts of the world.

I am using countries-110m.json from https://github.com/topojson/world-atlas

However, map is not generated correctly

Hello,
Thanks for this amazing library, super easy to use !
I've made a wrapper of your library to use with the R language (https://www.r-project.org/), project is here : https://github.com/pvictor/topogRam.

My issue is when you update the value used to distort topology, tooltip isn't updated, an example here : https://pvictor.github.io/NZ-topogRam/

Basically what i'm doing is :

carto = Cartogram()
          .width(width)
          .height(height)
          .topoJson(shape)
          .topoObjectName('states')
          .projection(projection)
          .iterations(20)
          .value(function(d) {
           return d.properties.value;
          })
          .color(function(d) {
            return colorScale(d.properties.value);
          })
          .label(function(d) {
            return "Population of" + d.properties.name + "(" + d.properties.value + ")";
          })
          .valFormatter(d3.format(".3s"))
          //.onClick(function(d) {console.info(d)})
          (document.getElementById(el.id));

var selectValue = 'value';
$('#select').on('change', function() {
 selectValue = this.value;
 carto
   .value(function(d) {
       return d.properties[selectValue];
   });
 });

What i am missing ?

If you want a more thorough example let me know.

Thanks for your help !

Victor

Hello,

With version > v1.1.3 , the tooltip is not positioned correctly if there are elements above the cartogram.
In examples, you can add <div style="height: 400px;"></div> above the div rendering the cartogram to see this behavior.

Thanks!

I have another question. It seems the value from the scale is being added to the tooltip, and I cannot figure out how to remove it. I currently have:

                .label(function(feature) {
                    p = feature.properties; 
                    return `Country: ${p.ISO_A2}`;
                })
                .tooltipContent("test")

However, the tooltip is coming up as:
Country: US: 155

Where 155 is the value associated with the country (adjusted to the scale I am using).

How do I remove that : 155?

I am using this example https://vasturiano.github.io/cartogram-chart/example/world-population/

then on a button click event:

Below is a snippet of Vue code

this.data = await d3.csv('data.csv')

      // set the values
      const ccData: any = []

      this.data.forEach((d: any) => {
        ccData[d.name] =
          d[this.selectedAction] && d[this.selectedAction] > 0
            ? parseFloat(d[this.selectedAction])
            : 0
      })

      this.cartogram
        .value(({ properties: p }: any) =>
          ccData[p.NAME] ? ccData[p.NAME] : 0
        )
        .iterations(85)

The value seems to be set correctly however, there is no changes to projection.

package.json points to the wrong "main"
Is: "main": "dist/cartogram-chart.common.js",
Should be: "main": "dist/cartogram-chart.js",