Skip to content

Instantly share code, notes, and snippets.

@badosa

badosa/index.html

Last active November 21, 2019 05:14
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/7234976 to your computer and use it in GitHub Desktop.
Save badosa/7234976 to your computer and use it in GitHub Desktop.
Download ZIP
The US Gross State Product per Capita Map
Raw
readme.md

Click on Gross State Product (GSP) to show a choropleth map of US states by GSP: California, Texas, New York...

See the same map expressed in % by clicking on Gross State Product as percentage of national GDP: slight changes in the colors are only due to rounding.

If you click on Population, you will notice that absolute differences on GSP are mainly due to different state size in terms of population.

Finally, click on Gross State Product per capita to get a map of US states by a relative measure of production: DC, Delaware, Alaska, Connecticut, Wyoming...

This sample code uses JSON-stat + Visual to create a choropleth map of the US population and Gross State Product.

The data are retrieved from us-gsp.json. The US map is one of the sample maps provided by Visual.

See also the simple choropleth map example or the population pyramid example.

Warning: This visualization does not work on Internet Explorer < 10: version 9 seems to be unable to process the JavaScript US map (2,490 kb).

Raw
index.html
<!DOCTYPE html>
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<title>Visual + JSON-stat: advanced case</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link href="visual.css" rel="stylesheet" type="text/css" />
<!-- DO NOT DO THIS IN PRODUCTION -->
<!-- js.org and json-stat.org ARE NOT CDNs! Link to your own copies or to a CDN. -->
<link href="https://visual.js.org/visual.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script>
<script src="https://visual.js.org/lib/d3.v3.js"></script>
<script src="https://visual.js.org/visual.js"></script>
<script src="https://visual.js.org/maps/visual.maps.js"></script>
<script src="https://visual.js.org/maps/usa2013states.js"></script>
<script src="https://visual.js.org/visual.setup.js"></script>
<!-- /DO NOT DO THIS IN PRODUCTION -->
</head>
<body>
<nav></nav>
<section id="visual" class="visual"></section>
<script>
JSONstat("https://json-stat.org/samples/us-gsp.json", function(){
var
ds=this.Dataset(0),
metric=ds.Dimension(ds.role.metric[0]),
concepts=metric.Category(),
getData=function(c){
return ds.toTable(
{type: "arrobj", content: "id"},
function(d){
if(d.concept===c){
return {id: d.state, val: d.value};
}
}
)
},
d=document,
nav=d.getElementsByTagName("nav")[0],
visual=d.getElementById("visual"),
vis=[],
unselect=function(){
var
divs=d.querySelectorAll("#visual > div"),
but=d.querySelectorAll("nav > a")
;
for(var i=0, len=divs.length; i<len; i++){
divs[i].style.display="none";
but[i].className="unselected";
}
}
;
VisualJS.setup.colors.map.base="#171208";
concepts.forEach(function(m, i){
var
o={
lang: "en",
show: false,
fixed: [960, 433],
footer: "Year: "+ds.Dimension(ds.role.time[0]).Category(0).label+". Source: "+ds.source+" retrieved on "+ds.updated,
legend: false,
type: "cmap",
by: "usastates"
},
id=metric.id[i],
unit=m.unit
;
o.id=id;
o.dec=unit.decimals;
o.unit={
label: unit.label,
symbol: unit.symbol,
position: unit.position
};
o.data=getData(id);
o.callback=function(){
var
div=d.createElement("div"),
a=d.createElement("a")
;
div.id=id;
div.style.display="none";
visual.appendChild(div);
if(this.chart){
nav.appendChild(a);
VisualJS.chart();
a.className="unselected";
a.textContent=m.label.charAt(0).toUpperCase() + m.label.slice(1);
a.onclick=function(){
unselect();
d.getElementById(id).style.display="block";
this.className="selected";
};
}
};
vis.push(o);
});
VisualJS.load(vis);
nav.getElementsByTagName("a")[0].click();
});
</script>
</body>
</html>
Raw
visual.css
nav, section {
text-align: center;
font-family: verdana, sans-serif;
}
a {
display: inline-block;
margin: 0.5em;
padding: 0.5em;
border-radius: 10px;
font-size: 90%;
}
a.unselected:hover {
background-color: #666;
color: #fff;
}
a.unselected {
cursor: pointer;
background-color: #000;
color: #e4dede;
}
a.selected {
cursor: default;
background-color:#5b4820;
color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment