Skip to content

Instantly share code, notes, and snippets.

@badosa

badosa/index.html

Last active November 21, 2019 05:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save badosa/391b8c447a8783eca017 to your computer and use it in GitHub Desktop.
Save badosa/391b8c447a8783eca017 to your computer and use it in GitHub Desktop.
Download ZIP
US Gross State Product Bubble Chart
Raw
readme.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart" style="height: 500px"></div>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
JSONstat("https://json-stat.org/samples/us-gsp.json", function(){
var
label={
title: "Gross State Product and Population by US State",
id: "ID",
x: "Population (millions)",
y: "Gross State Product per Capita (dollars)"
},
col={
id: "state",
x: "pop",
y: "capita"
},
min=Infinity, max=0,
time=this.Dimension( {role: "time"} )[0].Category( 0 ).label,
id=this.Dimension( col.id, false ),
x=this.Data( { concept: col.x }, false ),
y=this.Data( { concept: col.y }, false ),
input=[ [label.id, label.x, label.y ] ]
;
id.forEach(function(e,i){
//Remove DC (outlier): it's a federal district, not a US state
if(e!=="District of Columbia"){
input.push( [e, x[i], y[i]] );
max=(y[i]>max) ? y[i] : max;
min=(y[i]<min) ? y[i] : min;
}
});
google.charts.setOnLoadCallback(function(){
var
data=google.visualization.arrayToDataTable( input ),
options={
theme: "maximized",
title: label.title + ". " + time,
hAxis: {
title: label.x,
textStyle: {
fontSize: 12,
},
titleTextStyle: {
italic: false
}
},
vAxis: {
title: label.y,
textStyle: {
fontSize: 12
},
titleTextStyle: {
italic: false
},
viewWindow: {
min: Math.round(min/10000)*10000,
max: Math.round(max/10000)*10000
}
},
bubble: {
opacity: 0.2,
textStyle: {
fontSize: 12
}
}
},
chart=new google.visualization.BubbleChart( document.getElementById( "chart" ) )
;
chart.draw( data, options );
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment