Capisco come usare il GeoChart per visualizzare un dato che si trova in un continuum (ad esempio la temperatura).Come utilizzare colori distinti con Google GeoChart
Ma come è possibile configurarlo per visualizzare insiemi di dati distinti (stati repubblicani, democratici, indipendenti)? È possibile?
Grazie!
A questo punto non è possibile utilizzare GeoChart in questo modo. Per realizzare ciò ho finito per usare una mappa svg e cambiare il riempimento via css.
Un buon tutorial può essere trovato qui: http://blog.visual.ly/how-to-make-choropleth-maps-in-d3/
Hai provato qualcosa del genere?
data.addColumn('string', 'State');
data.addColumn('number', 'Votes (%)');
data.addColumn('string', 'Winner');
data.addRows([['Alabama', 56, 'Republicans'],['Maine', 61, 'Democrats']]);
È inoltre possibile risolvere questo massaggiando i dati un po 'e utilizzando i valori formattati per le etichette. Si dovrebbe essere in grado di incollare il seguente codice in here per vedere un esempio:
function drawVisualization() {
var geoData= new google.visualization.DataTable();
geoData.addRows(2);
geoData.addColumn('string', 'State');
geoData.addColumn('number', 'Votes (%)');
geoData.setValue(0, 0, 'Alabama');
geoData.setValue(0, 1, 0);
geoData.setFormattedValue(0, 1, '56%');
geoData.setValue(1, 0, 'Maine');
geoData.setValue(1, 1, 1);
geoData.setFormattedValue(1, 1, '64%');
var options = {};
options['region'] = 'US';
options['resolution'] = 'provinces';
options['colorAxis'] = { minValue : 0, maxValue : 1, colors : ['#FF0000','#0000FF']};
options['backgroundColor'] = '#FFFFFF';
options['datalessRegionColor'] = '#E5E5E5';
options['width'] = 556;
options['height'] = 347;
options['legend'] = 'none';
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(geoData, options);
}
Questo può ora essere realizzato convertendo i tuoi classificazioni di numeri invece di nomi di partito. Per esempio:
democrats = 0
independents = 1
republicans = 2
successivo includono un colore per ciascuna delle parti nei colori matrice colorAxis:
var options = {
colorAxis: {
colors: ['blue','green','red']
...
}
}
Il codice seguente visualizza gli stati democratici come blu, repubblicani il rosso e indipendenti come verde (i dati sono inventato, io non quale stato preferisce quale partito).
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["geochart"]});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['State', 'Party'],
['US-NY', 0],
['US-AB', 2],
['US-TX', 2],
['US-CA', 0],
['US-AK', 2],
['US-MI', 1]
]);
var options = {
displayMode: 'regions',
resolution:'provinces',
colorAxis:{
colors:['blue','green','red'],
minValue: 0,
maxValue:2},
region:'US',
legend:'none'
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Finché i colori che elenco nel colorAxis corrispondono al numero e l'ordine delle classificazioni si utilizza per gli stati, è possibile controllare il colore dello stato.
