Plotly.js Choropleth map size

南笙酒味 提交于 2019-12-20 02:09:09

问题


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
});

回答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>


来源:https://stackoverflow.com/questions/42722495/plotly-js-choropleth-map-size

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!