D3 Examples - maaappppsssss

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <style>
​
        .graticule {
          fill: none;
          stroke: #777;
          stroke-width: .5px;
          stroke-opacity: .5;
        }
​
​
​
        body {
  background: #fcfcfa;
}
​
.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}
​
.fill {
  fill: #fff;
}
​
.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}
​
.land {
  fill: #222;
}
​
.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}
​
        </style>
​
​
    </head>
    <body>
​
        <div id="container" style="width: 960px; height: 500px; position: relative;"></div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script src="https://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
        <script src="https://d3js.org/topojson.v1.min.js"></script>
        <script src="/datamaps.world.min.js"></script>
        <script src="/datamaps.all.js"></script>
       <script>
​
    var map = new Datamap({
        element: document.getElementById('container'),
        scope: 'world',
            setProjection: function(element, options) {
                var projection, path; 
                var width = element.offsetWidth,
                    height = element.offsetHeight;
​
                var projection = d3.geo.aitoff()
                    .scale(150)
                    .translate([width / 2, height / 2])
                    .precision(.1);
​
​
                path = d3.geo.path()
                  .projection( projection );
​
                return {path: path, projection: projection};
​
            },
            projection: 'aitoff',
        fills: {
            VERY_HIGH: 'rgb(227, 26, 28)',
            HIGH: 'rgb(252, 78, 42)',
            MEDIUM: 'rgb(253, 141, 60)',
            LOW:'rgb(254, 178, 76)',
            VERY_LOW:'rgb(254, 217, 118)',
            UNKNOWN: '#ccc',
            defaultFill: '#ccc'
        },
​
​
        data: {
​
            CYP:{
             fillKey:"VERY_LOW",
             GDP_change:-3.886
         },
GNQ:{ fillKey:"VERY_LOW",GDP_change:-1.938},
SVN:{ fillKey:"VERY_LOW",GDP_change:-1.448},
BRB:{ fillKey:"VERY_LOW",GDP_change:-1.05},
SMR:{ fillKey:"LOW",GDP_change:0},
CAF:{ fillKey:"LOW",GDP_change:0.153},
ESP:{ fillKey:"LOW",GDP_change:0.171},
SWZ:{ fillKey:"LOW",GDP_change:0.309},
NLD:{ fillKey:"LOW",GDP_change:0.311},
FSM:{ fillKey:"LOW",GDP_change:0.528},
GRC:{ fillKey:"LOW",GDP_change:0.633},
ITA:{ fillKey:"LOW",GDP_change:0.712},
PRT:{ fillKey:"LOW",GDP_change:0.769},
FRA:{ fillKey:"LOW",GDP_change:0.981},
BEL:{ fillKey:"LOW",GDP_change:1.044},
GRD:{ fillKey:"LOW",GDP_change:1.05},
FIN:{ fillKey:"LOW",GDP_change:1.145},
DNK:{ fillKey:"LOW",GDP_change:1.228},
JPN:{ fillKey:"LOW",GDP_change:1.244},
JAM:{ fillKey:"LOW",GDP_change:1.25},
LUX:{ fillKey:"LOW",GDP_change:1.256},
HUN:{ fillKey:"LOW",GDP_change:1.261},
TUV:{ fillKey:"LOW",GDP_change:1.264},
IRN:{ fillKey:"LOW",GDP_change:1.278},
LCA:{ fillKey:"LOW",GDP_change:1.34},
DEU:{ fillKey:"LOW",GDP_change:1.4},
CZE:{ fillKey:"LOW",GDP_change:1.451},
HRV:{ fillKey:"LOW",GDP_change:1.5},
LBN:{ fillKey:"LOW",GDP_change:1.5},
UKR:{ fillKey:"LOW",GDP_change:1.504},
DMA:{ fillKey:"LOW",GDP_change:1.55},
BGR:{ fillKey:"LOW",GDP_change:1.6},
SLV:{ fillKey:"LOW",GDP_change:1.6},
TON:{ fillKey:"LOW",GDP_change:1.616},
AUT:{ fillKey:"LOW",GDP_change:1.638},
VEN:{ fillKey:"LOW",GDP_change:1.7},
IRL:{ fillKey:"LOW",GDP_change:1.751},
MLT:{ fillKey:"LOW",GDP_change:1.761},
CHE:{ fillKey:"LOW",GDP_change:1.787},
ERI:{ fillKey:"LOW",GDP_change:1.857},
WSM:{ fillKey:"LOW",GDP_change:1.869},
GBR:{ fillKey:"LOW",GDP_change:1.869},
SRB:{ fillKey:"LOW",GDP_change:1.955},
BIH:{ fillKey:"MEDIUM",GDP_change:2},
VCT:{ fillKey:"MEDIUM",GDP_change:2.027},
ALB:{ fillKey:"MEDIUM",GDP_change:2.1},
BHS:{ fillKey:"MEDIUM",GDP_change:2.1},
ISL:{ fillKey:"MEDIUM",GDP_change:2.142},
ROU:{ fillKey:"MEDIUM",GDP_change:2.156},
CAN:{ fillKey:"MEDIUM",GDP_change:2.16},
MNE:{ fillKey:"MEDIUM",GDP_change:2.189},
FJI:{ fillKey:"MEDIUM",GDP_change:2.244},
NOR:{ fillKey:"MEDIUM",GDP_change:2.278},
TTO:{ fillKey:"MEDIUM",GDP_change:2.281},
SWE:{ fillKey:"MEDIUM",GDP_change:2.299},
SVK:{ fillKey:"MEDIUM",GDP_change:2.339},
POL:{ fillKey:"MEDIUM",GDP_change:2.361},
EST:{ fillKey:"MEDIUM",GDP_change:2.48},
BLZ:{ fillKey:"MEDIUM",GDP_change:2.5},
PLW:{ fillKey:"MEDIUM",GDP_change:2.5},
BRA:{ fillKey:"MEDIUM",GDP_change:2.502},
PAK:{ fillKey:"MEDIUM",GDP_change:2.53},
SDN:{ fillKey:"MEDIUM",GDP_change:2.536},
BLR:{ fillKey:"MEDIUM",GDP_change:2.539},
KWT:{ fillKey:"MEDIUM",GDP_change:2.551},
USA:{ fillKey:"MEDIUM",GDP_change:2.588},
MHL:{ fillKey:"MEDIUM",GDP_change:2.641},
GNB:{ fillKey:"MEDIUM",GDP_change:2.683},
KIR:{ fillKey:"MEDIUM",GDP_change:2.7},
ARG:{ fillKey:"MEDIUM",GDP_change:2.751},
AUS:{ fillKey:"MEDIUM",GDP_change:2.776},
HND:{ fillKey:"MEDIUM",GDP_change:2.8},
EGY:{ fillKey:"MEDIUM",GDP_change:2.834},
ZAF:{ fillKey:"MEDIUM",GDP_change:2.932},
NZL:{ fillKey:"MEDIUM",GDP_change:2.944},
MEX:{ fillKey:"MEDIUM",GDP_change:2.997},
RUS:{ fillKey:"MEDIUM",GDP_change:3.002},
KNA:{ fillKey:"MEDIUM",GDP_change:3.179},
ATG:{ fillKey:"MEDIUM",GDP_change:3.193},
MKD:{ fillKey:"MEDIUM",GDP_change:3.22},
BHR:{ fillKey:"MEDIUM",GDP_change:3.285},
URY:{ fillKey:"MEDIUM",GDP_change:3.304},
ISR:{ fillKey:"MEDIUM",GDP_change:3.314},
LTU:{ fillKey:"MEDIUM",GDP_change:3.364},
YEM:{ fillKey:"MEDIUM",GDP_change:3.383},
GTM:{ fillKey:"MEDIUM",GDP_change:3.4},
OMN:{ fillKey:"MEDIUM",GDP_change:3.402},
SGP:{ fillKey:"MEDIUM",GDP_change:3.433},
TUR:{ fillKey:"MEDIUM",GDP_change:3.47},
JOR:{ fillKey:"MEDIUM",GDP_change:3.5},
AFG:{ fillKey:"MEDIUM",GDP_change:3.548},
ZWE:{ fillKey:"MEDIUM",GDP_change:3.566},
DOM:{ fillKey:"MEDIUM",GDP_change:3.63},
DZA:{ fillKey:"MEDIUM",GDP_change:3.676},
KOR:{ fillKey:"MEDIUM",GDP_change:3.679},
TUN:{ fillKey:"MEDIUM",GDP_change:3.7},
MDG:{ fillKey:"MEDIUM",GDP_change:3.752},
MDV:{ fillKey:"MEDIUM",GDP_change:3.766},
TWN:{ fillKey:"MEDIUM",GDP_change:3.768},
SLB:{ fillKey:"MEDIUM",GDP_change:3.797},
CRI:{ fillKey:"MEDIUM",GDP_change:3.8},
MAR:{ fillKey:"MEDIUM",GDP_change:3.849},
SYC:{ fillKey:"MEDIUM",GDP_change:3.885},
ARE:{ fillKey:"MEDIUM",GDP_change:3.901},
COM:{ fillKey:"MEDIUM",GDP_change:3.96},
NAM:{ fillKey:"MEDIUM",GDP_change:3.982},
MDA:{ fillKey:"HIGH",GDP_change:4},
NIC:{ fillKey:"HIGH",GDP_change:4},
SUR:{ fillKey:"HIGH",GDP_change:4.03},
ECU:{ fillKey:"HIGH",GDP_change:4.034},
BWA:{ fillKey:"HIGH",GDP_change:4.112},
COL:{ fillKey:"HIGH",GDP_change:4.161},
VUT:{ fillKey:"HIGH",GDP_change:4.179},
LVA:{ fillKey:"HIGH",GDP_change:4.238},
MUS:{ fillKey:"HIGH",GDP_change:4.351},
HKG:{ fillKey:"HIGH",GDP_change:4.378},
SAU:{ fillKey:"HIGH",GDP_change:4.385},
CPV:{ fillKey:"HIGH",GDP_change:4.434},
CHL:{ fillKey:"HIGH",GDP_change:4.496},
NPL:{ fillKey:"HIGH",GDP_change:4.503},
HTI:{ fillKey:"HIGH",GDP_change:4.528},
SEN:{ fillKey:"HIGH",GDP_change:4.589},
PRY:{ fillKey:"HIGH",GDP_change:4.6},
BDI:{ fillKey:"HIGH",GDP_change:4.738},
BEN:{ fillKey:"HIGH",GDP_change:4.76},
ARM:{ fillKey:"HIGH",GDP_change:4.8},
COG:{ fillKey:"HIGH",GDP_change:4.824},
MYS:{ fillKey:"HIGH",GDP_change:4.9},
CMR:{ fillKey:"HIGH",GDP_change:4.945},
GEO:{ fillKey:"HIGH",GDP_change:4.97},
LSO:{ fillKey:"HIGH",GDP_change:4.995},
BOL:{ fillKey:"HIGH",GDP_change:5},
QAT:{ fillKey:"HIGH",GDP_change:5.006},
IND:{ fillKey:"HIGH",GDP_change:5.147},
GIN:{ fillKey:"HIGH",GDP_change:5.19},
KAZ:{ fillKey:"HIGH",GDP_change:5.24},
THA:{ fillKey:"HIGH",GDP_change:5.249},
VNM:{ fillKey:"HIGH",GDP_change:5.4},
IDN:{ fillKey:"HIGH",GDP_change:5.5},
STP:{ fillKey:"HIGH",GDP_change:5.5},
AZE:{ fillKey:"HIGH",GDP_change:5.594},
PER:{ fillKey:"HIGH",GDP_change:5.729},
TJK:{ fillKey:"HIGH",GDP_change:5.75},
GUY:{ fillKey:"HIGH",GDP_change:5.824},
TGO:{ fillKey:"HIGH",GDP_change:5.92},
DJI:{ fillKey:"HIGH",GDP_change:5.992},
BGD:{ fillKey:"VERY_HIGH",GDP_change:6.013},
PHL:{ fillKey:"VERY_HIGH",GDP_change:6.026},
GHA:{ fillKey:"VERY_HIGH",GDP_change:6.09},
MWI:{ fillKey:"VERY_HIGH",GDP_change:6.118},
BRN:{ fillKey:"VERY_HIGH",GDP_change:6.215},
KEN:{ fillKey:"VERY_HIGH",GDP_change:6.246},
AGO:{ fillKey:"VERY_HIGH",GDP_change:6.273},
PNG:{ fillKey:"VERY_HIGH",GDP_change:6.295},
IRQ:{ fillKey:"VERY_HIGH",GDP_change:6.336},
NER:{ fillKey:"VERY_HIGH",GDP_change:6.339},
MRT:{ fillKey:"VERY_HIGH",GDP_change:6.362},
BFA:{ fillKey:"VERY_HIGH",GDP_change:6.382},
UGA:{ fillKey:"VERY_HIGH",GDP_change:6.479},
UZB:{ fillKey:"VERY_HIGH",GDP_change:6.5},
ZMB:{ fillKey:"VERY_HIGH",GDP_change:6.539},
LKA:{ fillKey:"VERY_HIGH",GDP_change:6.75},
LBR:{ fillKey:"VERY_HIGH",GDP_change:6.815},
GAB:{ fillKey:"VERY_HIGH",GDP_change:6.843},
MMR:{ fillKey:"VERY_HIGH",GDP_change:6.883},
PAN:{ fillKey:"VERY_HIGH",GDP_change:6.931},
TZA:{ fillKey:"VERY_HIGH",GDP_change:7.193},
KHM:{ fillKey:"VERY_HIGH",GDP_change:7.236},
CHN:{ fillKey:"VERY_HIGH",GDP_change:7.254},
NGA:{ fillKey:"VERY_HIGH",GDP_change:7.365},
MLI:{ fillKey:"VERY_HIGH",GDP_change:7.386},
ETH:{ fillKey:"VERY_HIGH",GDP_change:7.461},
RWA:{ fillKey:"VERY_HIGH",GDP_change:7.5},
LAO:{ fillKey:"VERY_HIGH",GDP_change:7.799},
TLS:{ fillKey:"VERY_HIGH",GDP_change:7.991},
CIV:{ fillKey:"VERY_HIGH",GDP_change:8.019},
BTN:{ fillKey:"VERY_HIGH",GDP_change:8.037},
GMB:{ fillKey:"VERY_HIGH",GDP_change:8.457},
MOZ:{ fillKey:"VERY_HIGH",GDP_change:8.5},
TKM:{ fillKey:"VERY_HIGH",GDP_change:10.416},
TCD:{ fillKey:"VERY_HIGH",GDP_change:10.483},
COD:{ fillKey:"VERY_HIGH",GDP_change:10.488},
MNG:{ fillKey:"VERY_HIGH",GDP_change:11.678},
SLE:{ fillKey:"VERY_HIGH",GDP_change:14.032},
LBY:{ fillKey:"VERY_HIGH",GDP_change:25.533},
SSD:{ fillKey:"VERY_HIGH",GDP_change:43.023},
SYR:{ fillKey:"UNKNOWN",GDP_change:null}
​
        },
​
​
done: function(datamap) {
          var graticule = d3.geo.graticule();
          datamap.svg.append("path")
            .datum(graticule)
            .attr("class", "graticule")
            .attr("d", datamap.path);
         },
​
 });
​
​
    //draw a legend for this map
    map.legend();
</script>
​
​
        </script>
        <h2 class="info"></h2>
    </body>
</html>
​
​
    