Clever Geek Handbook

RMaps library for interactive maps doesn't seem to work

I tried to reproduce the example from here , I copied the code for you:

require(devtools)
install_github('ramnathv/rCharts@dev')
install_github('ramnathv/rMaps')
library(rMaps)
crosslet(
  x = "country", 
  y = c("web_index", "universal_access", "impact_empowerment", "freedom_openness"),
  data = web_index
)

Execution throws no errors, but the page in the navigator remains blank (either in Firefox or Chrome). I looked at the item in the console and got the following error:

 ReferenceError: head is not defined index.html:26:4

In chrome the error is different, I have a ressource loading error for each link for js library. This is weird because the link seems to be valid and I don't have the same problems with the chart parameters in rCharts (another R library from the same author).

Here is the index.html code. I see that there is a problem with the head element. (in the copy I removed some countries for the sake of space)

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href='C:\Users\S Combes\Documents\R\R-3.2.0\library\rMaps\libraries\crosslet/styles.css'>
    <link rel='stylesheet' href='C:\Users\S Combes\Documents\R\R-3.2.0\library\rMaps\libraries\crosslet/http://fonts.googleapis.com/css?family=Open+Sans'>

    <script src='C:\Users\S Combes\Documents\R\R-3.2.0\library\rMaps\libraries\crosslet/head.load.min.js' type='text/javascript'></script>

    <style>
    .rChart {
      display: block;
      margin-left: auto; 
      margin-right: auto;
      width: 800px;
      height: 400px;
    }  
    </style>

  </head>
  <body >

    <div id="content" class="container"><div id="map"></div></div>    
     <script type="text/javascript">    
    var params = {"dom":"chart12fc45e47bf5","width":800,"height":400,"scope":"world","data":[{"country":"Argentina","web_index":55.2,"universal_access":47.1,"education_awareness":45.9,"access_affordability":67.9,"comm_infrastructure":47.2,"relevant_content":71.5,"web_use":82.8,"content_creation":56.1,"freedom_openness":52.2,"web_freedom":52.2,"impact_empowerment":39.8,"political_impact":49.7,"social_environmental":47.2,"economic_impact":33.4},{"country":"Australia","web_index":86.4,"universal_access":82.4,"education_awareness":75.8,"access_affordability":94.5,"comm_infrastructure":74.6,"relevant_content":92.6,"web_use":91.4,"content_creation":86.5,"freedom_openness":67.7,"web_freedom":67.7,"impact_empowerment":74.3,"political_impact":88,"social_environmental":71.1,"economic_impact":68.2},{"country":"Austria","web_index":84.8,"universal_access":85.9,"education_awareness":93.5,"access_affordability":89.4,"comm_infrastructure":72.8,"relevant_content":82.2,"web_use":81.3,"content_creation":77.7,"freedom_openness":78.6,"web_freedom":78.6,"impact_empowerment":66.4,"political_impact":89.3,"social_environmental":47.1,"economic_impact":69.8},{"country":"Bahrain","web_index":38.4,"universal_access":53.1,"education_awareness":57.2,"access_affordability":71.8,"comm_infrastructure":46.7,"relevant_content":59.3,"web_use":71.9,"content_creation":44.8,"freedom_openness":13.6,"web_freedom":13.6,"impact_empowerment":28.9,"political_impact":48.3,"social_environmental":15.2,"economic_impact":37.1},{"country":"Zimbabwe","web_index":10.1,"universal_access":17.7,"education_awareness":44.4,"access_affordability":29.1,"comm_infrastructure":22.4,"relevant_content":5.4,"web_use":10.5,"content_creation":9.4,"freedom_openness":22.8,"web_freedom":22.8,"impact_empowerment":11.2,"political_impact":25,"social_environmental":11.9,"economic_impact":13.8}],"id_field":"country","defaults":{"order":["web_index","universal_access","impact_empowerment","freedom_openness"],"active":"web_index"},"id":"chart12fc45e47bf5"}
    head.ready(function(){

        var myColorScale = d3.scale.linear()
         .domain([1, 10, 20.1])
         .range(["red", "yellow", "green"])
         .interpolate(d3.cie.interpolateLab)

        var config = {
          map: getMap(params.scope),
          data: {version: "1.0", id_field: params.id_field},
          dimensions : {
 "web_index": {
 "title": "web_index",
"data": {
 "dataSet":  params.data ,
"field": "web_index" 
} 
},
"universal_access": {
 "title": "universal_access",
"data": {
 "dataSet":  params.data ,
"field": "universal_access" 
} 
},
"education_awareness": {
 "title": "education_awareness",
"data": {
 "dataSet":  params.data ,
"field": "education_awareness" 
} 
},
"access_affordability": {
 "title": "access_affordability",
"data": {
 "dataSet":  params.data ,
"field": "access_affordability" 
} 
},
"comm_infrastructure": {
 "title": "comm_infrastructure",
"data": {
 "dataSet":  params.data ,
"field": "comm_infrastructure" 
} 
},
"relevant_content": {
 "title": "relevant_content",
"data": {
 "dataSet":  params.data ,
"field": "relevant_content" 
} 
},
"web_use": {
 "title": "web_use",
"data": {
 "dataSet":  params.data ,
"field": "web_use" 
} 
},
"content_creation": {
 "title": "content_creation",
"data": {
 "dataSet":  params.data ,
"field": "content_creation" 
} 
},
"freedom_openness": {
 "title": "freedom_openness",
"data": {
 "dataSet":  params.data ,
"field": "freedom_openness" 
} 
},
"web_freedom": {
 "title": "web_freedom",
"data": {
 "dataSet":  params.data ,
"field": "web_freedom" 
} 
},
"impact_empowerment": {
 "title": "impact_empowerment",
"data": {
 "dataSet":  params.data ,
"field": "impact_empowerment" 
} 
},
"political_impact": {
 "title": "political_impact",
"data": {
 "dataSet":  params.data ,
"field": "political_impact" 
} 
},
"social_environmental": {
 "title": "social_environmental",
"data": {
 "dataSet":  params.data ,
"field": "social_environmental" 
} 
},
"economic_impact": {
 "title": "economic_impact",
"data": {
 "dataSet":  params.data ,
"field": "economic_impact" 
} 
} 
},
          defaults: params.defaults,
        };
        new crosslet.MapView($("#map"),config)
    })

    function getMap(scope){
      var map = []
      map.world = {
        leaflet: {
          key: "af67a5248c104d27bff9e8d363b6db4a",
          styleId: 96931, /* 81531, */
          attribution: 'Map data &copy; <ahref="http://openstreetmap.org">OpenStreetMap</a>'
        },
        view: {
          center: [35.505, -1.09],
          zoom: 2
        },
        geo: {
          url: "http://rawgithub.com/markmarkoh/datamaps/master/src/js/data/world.topo.json",
          name_field: "name",
          id_field: "name",
          topo_object: "world"
        }
      }
      map.us = {
        leaflet: {
          key: "fe623ce312234f8f9333bbee72d4a176",
          styleId: 96931, /* 64657, */
          attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>'
        },
        view: {
          center: [40.42, -98.73],
          zoom:5
        },
        geo: {
          url: "http://rawgithub.com/sztanko/crosslet/gh-pages/examples/us/data/us_counties.topo.json",
          name_field: "NAME",
          id_field: "GEOID",
          topo_object: "us_counties"
        }
      }
      return map[scope]
    }
</script>
<script>
    head.load(
      "http://cdn.leafletjs.com/leaflet-0.4/leaflet.css",
      "http://sztanko.github.io/crosslet/css/crosslet-min.css",
      "//cdn.leafletjs.com/leaflet-0.4.4/leaflet.js",
      "//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js",
      "//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js",
      "//cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js",
      "//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js",
      "//sztanko.github.io/crosslet/js/crosslet.js"
    )
</script>

    <script></script>    
  </body>
</html>
+3


source to share


No one has answered this question yet

Check out similar questions:



More articles:


All Articles