This sample code uses JSON-stat + Visual to create a choropleth map of the US Gross State Product. Could it be simpler?
The data are retrieved from us-gsp.json. The US map is one of the sample maps provided by Visual.
See an advanced example similar to this one 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).
| <!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: simple choropleth map</title> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | |
| <!-- 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/lazyvisualsetup.js"></script> | |
| <!-- /DO NOT DO THIS IN PRODUCTION --> | |
| <style type="text/css"> | |
| #visual { | |
| text-align: center; | |
| font-family: verdana, sans-serif; | |
| } | |
| </style> | |
| <script> | |
| function ini(j){ | |
| var | |
| concept="gsp", | |
| ds=JSONstat(j).Dataset(0), | |
| data=ds.toTable( | |
| {type: "arrobj", content: "id"}, | |
| function(d){ | |
| if(d.concept===concept){ | |
| return {id: d.state, val: d.value}; | |
| } | |
| } | |
| ), | |
| metric=ds.Dimension(ds.role.metric[0]).Category(concept), | |
| unit=metric.unit | |
| ; //End of line 1 | |
| visual({ | |
| lang: "en", | |
| title: metric.label, | |
| footer: ds.source+" retrieved on "+ds.updated, | |
| time: ds.Dimension(ds.role.time[0]).Category(0).label, | |
| unit: { | |
| label: unit.label, | |
| symbol: unit.symbol, | |
| position: unit.position | |
| }, | |
| dec: metric.unit.decimals, | |
| range: 0, | |
| legend: false, | |
| type: "cmap", | |
| by: "usastates", | |
| data: data | |
| }); //End of line 2 | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <section id="visual" class="visual"></section> | |
| <script src="https://json-stat.org/samples/us-gsp.json?callback=ini"></script> | |
| </body> | |
| </html> |