Plotly.js Choroplethマップサイズ

Question

私はchoroplethマップを作成しようとしていますが、マップのサイズはどのように設定できますか？ 今私はこのマップを持っています： 私はすべてのスペースにマップを展開したいと思いますが、私はドキュメントを読んでいますが、解決策は見つかりませんでした。

これは私のコードです：

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は、画像比率を変えずに、すべての利用可能なスペースを取るしようとします。あなたが非常に広いdivを持っているなら、左と右のために多くの空きスペースがありますが、それは上から下に満たされます。

とを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]; 
 
     }); 
 
    } 
 

 
    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>

---

また、直接マップの割合、醜いが、作業可能性を変更することができます。

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

マップは最初に正常に描画され、次にクリックされるとサイズが変更されます。

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>