Skip to content

Instantly share code, notes, and snippets.

@tomgullo

tomgullo/datamap.html

Created July 30, 2013 13:16
Show Gist options
  • Save tomgullo/6112807 to your computer and use it in GitHub Desktop.
Save tomgullo/6112807 to your computer and use it in GitHub Desktop.
Download ZIP
basic_datamap_based_on_example
Raw
datamap.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width">
<style>@media print, screen and (view-mode:minimized){#ghostery-purple-bubble{display:none}}</style>
<style>path {stroke: #FFFFFF; stroke-width: 1px;} .datamaps-legend dt,
.datamaps-legend dd { float: left; margin: 0 3px 0 0;}
.datamaps-legend dd {width: 20px; margin-right: 6px; border-radius: 3px;}
.datamaps-legend {padding-bottom: 20px; z-index: 1001; position: absolute; left: 4px; font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
.datamaps-hoverover {display: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.hoverinfo {padding: 4px; border-radius: 1px; background-color: #FFF; box-shadow: 1px 1px 5px #CCC; font-size: 12px; border: 1px solid #CCC; }
.hoverinfo hr {border:1px dotted #CCC; }
</style>
</head>
<body>
<script src="DataMaps_files/d3.min.js"></script>
<script src="DataMaps_files/topojson.js"></script>
<script src="DataMaps_files/datamaps.world.min.js"></script>
<div id="map_bombs" style="position: relative; width: 700px; height: 375px;">
<div style="z-index: 10001; position: absolute;" class="datamaps-hoverover"></div>
</div>
<script src="DataMaps_files/bombs.js"></script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment