Plotly.js Choropleth map size

Question

I'm trying to make a choropleth map, but how can I set the size of the map? Now I've this map: I would like expand the map to all the space, I read the documentations but I didn't find a solution.

This is my code:

var data = [{
    type: 'choropleth',
    locationmode: 'country names',
    locations: unpack(output, 'label'),
    z: unpack(output, 'nres'),
    text: unpack(output, 'nres')
}];
var layout = {
    geo: {
        projection: {
            type: 'equirectangular'
        }
    }
};
Plotly.plot(mapChoropleth, data, layout, {
    showLink: false
});

Answer 1

Plotly tries to take all the available space without changing the image ratio. If you have a very wide div there will be a lot of empty space to left and right due but it will be filled from the top to the bottom.

You could change height and width in layout, change the margins and fine tune the color bar to get the desired result.

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_world_gdp_with_codes.csv', function(err, rows) {
    function unpack(rows, key) {
        return rows.map(function(row) {
            return row[key];
        });
    }

    var data = [{
        type: 'choropleth',
        locations: unpack(rows, 'CODE'),
        z: unpack(rows, 'GDP (BILLIONS)'),
        text: unpack(rows, 'COUNTRY'),
        colorscale: [
            [0, 'rgb(5, 10, 172)'],
            [0.35, 'rgb(40, 60, 190)'],
            [0.5, 'rgb(70, 100, 245)'],
            [0.6, 'rgb(90, 120, 245)'],
            [0.7, 'rgb(106, 137, 247)'],
            [1, 'rgb(220, 220, 220)']
        ],
        autocolorscale: false,
        reversescale: true,
        marker: {
            line: {
                color: 'rgb(180,180,180)',
                width: 0.5
            }
        },
        tick0: 0,
        zmin: 0,
        dtick: 1000,
        colorbar: {
            autotic: false,
            tickprefix: '$',
            len: 0.8,
            x: 1,
            y: 0.6
        }
    }];

    var layout = {
        width: 300,
        height: 300,
        geo: {
            showframe: false,
            showcoastlines: false,
            scope: 'europe',
            projection: {
                type: 'mercator',
            },

        },
        margin: {
            l: 0,
            r: 0,
            b: 0,
            t: 0,
            pad: 2
        }
    };
    Plotly.plot(myDiv, data, layout, {
        showLink: false
    });
});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>

---

You can also change the ratio of the map directly, an ugly but working possibility.

var c = document.getElementsByClassName('countries')[0];
c.setAttribute('transform', 'translate(-300), scale(3, 1)');
c = document.getElementsByClassName('choropleth')[0];
c.setAttribute('transform', 'translate(-300), scale(3, 1)');
c = document.getElementsByClassName('clips')[0].firstChild.firstChild;
c.setAttribute('x', -300);
c.setAttribute('width', 900);

The map is first drawn normally and then resized when clicked on.

var myPlot = document.getElementById('myDiv');
var data = [];
var layout = {};

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_world_gdp_with_codes.csv', function(err, rows) {
    function unpack(rows, key) {
        return rows.map(function(row) {
            return row[key];
        });
    }

    data = [{
        type: 'choropleth',
        locations: unpack(rows, 'CODE'),
        z: unpack(rows, 'GDP (BILLIONS)'),
        text: unpack(rows, 'COUNTRY'),
        colorscale: [
            [0, 'rgb(5, 10, 172)'],
            [0.35, 'rgb(40, 60, 190)'],
            [0.5, 'rgb(70, 100, 245)'],
            [0.6, 'rgb(90, 120, 245)'],
            [0.7, 'rgb(106, 137, 247)'],
            [1, 'rgb(220, 220, 220)']
        ],
        autocolorscale: false,
        reversescale: true,
        marker: {
            line: {
                color: 'rgb(180,180,180)',
                width: 0.5
            }
        },
        tick0: 0,
        zmin: 0,
        dtick: 1000,
        colorbar: {
            autotic: false,
            tickprefix: '$',
            len: 0.8,
            x: 1,
            y: 0.6
        }
    }];

    layout = {
        width: 1200,
        height: 400,
        geo: {
            showframe: false,
            showcoastlines: false,
            scope: 'europe',
            projection: {
                type: 'mercator',
                scale: 1
            },

        },
        margin: {
            l: 0,
            r: 0,
            b: 0,
            t: 0,
            pad: 2
        }
    };
        Plotly.plot(myPlot, data, layout, {
        showLink: false
    });
    myPlot.on('plotly_click', function(){

        var c = document.getElementsByClassName('countries')[0];
        c.setAttribute('transform', 'translate(-300), scale(3, 1)');
        c = document.getElementsByClassName('choropleth')[0];
        c.setAttribute('transform', 'translate(-300), scale(3, 1)');
        c = document.getElementsByClassName('clips')[0].firstChild.firstChild;
        c.setAttribute('x', -300);
        c.setAttribute('width', 900);
    })

});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="x: 0"></div>