Skip to content

Instantly share code, notes, and snippets.

@markmarkoh
Last active August 29, 2015 14:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save markmarkoh/11331459 to your computer and use it in GitHub Desktop.
Save markmarkoh/11331459 to your computer and use it in GitHub Desktop.
Fetching remote data with Datamaps

Remote Data with Datamaps

If you have data in CSV or JSON format on your server, you can now ( v0.2.7 ) fetch that data remotely.

CSV

To specify CSV, set dataType to "csv" and specify the dataUrl for the resource.

The format for this data should be:

id,fillKey
NY,Visited
TX,Visited
CA,Visited

You can optionally pass more data for event handlers and popupTemplate:

id,fillKey,anotherProperty
NY,Visited,Value for another property
TX,Visited,will be passed as `data.anotherProperty` in popupTemplate
CA,Visited,more data

JSON

JSON is the default dataType. For JSON data, just specify a dataUrl.

The payload should look something like this:

{
  "NY": {"fillKey": "Visited", "anotherProperty": "Born here"},
  "TX": {"fillKey": "Visited", "anotherProperty": "Live here"},
  "CA": {"fillKey": "Visited", "anotherProperty": "Here while writing this code"}
}
id fillKey info
NY Visited Born here
CA Visited Here while writing this code
TX Visited Live here
USA Visited Home Country
{
"NY": {"fillKey": "Visited", "info": "Born here"},
"TX": {"fillKey": "Visited", "info": "Live here"},
"CA": {"fillKey": "Visited", "info": "Here while writing this code"}
}
<!DOCTYPE html>
<html>
<head>
<style>
.active { fill: blue !important;}
/*.datamaps-key dt, .datamaps-key dd {float: none !important;}
.datamaps-key {right: -50px; top: 0;}*/
</style>
</head>
<body>
<div id="container1" style="border:1px dotted blue; width: 700px; height: 475px; position: relative;"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://datamaps.github.io/scripts/datamaps.usa.min.js"></script>
<script>
var election = new Datamap({
scope: 'usa',
element: document.getElementById('container1'),
geographyConfig: {
popupTemplate: function(geo, data) {
return data && data.info && "<div class='hoverinfo'><strong>" + data.info + "</strong></div>";
},
highlightOnHover: false,
borderColor: '#444',
borderWidth: 0.5
},
dataUrl: 'data.csv',
dataType: 'csv',
data: {},
fills: {
'Visited': '#306596',
'neato': '#0fa0fa',
'Trouble': '#bada55',
defaultFill: '#dddddd'
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment