Skip to content

Instantly share code, notes, and snippets.

@rgdonohue
Last active April 24, 2017 06:01
Show Gist options
  • Save rgdonohue/ede89ea3aff7c876fdcc to your computer and use it in GitHub Desktop.
Save rgdonohue/ede89ea3aff7c876fdcc to your computer and use it in GitHub Desktop.
A D3 map using queue.js
<html>
<head>
<meta charset="utf-8">
<title>A D3 map using queue.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<style>
body {
padding: 0;
margin: 0;
background: whitesmoke;
}
h1 {
position: absolute;
left: 20px;
top: 10px;
font-family: "Proxima Nova", Montserrat, sans-serif;
font-size: 2em;
font-weight: 100;
color: #005DAA; /* offical UK Kentucky blue */
}
.county {
stroke: #fff;
fill:#005DAA;
}
</style>
</head>
<body>
<h1>Kentucky Counties</h1>
<script>
var width = 900,
height = 600;
var svg = d3.select( "body" )
.append( "svg" )
.attr( "width", width )
.attr( "height", height );
var projection = d3.geo.albers()
.center([0, 37.8])
.rotate([85.8,0])
.scale(8000)
.translate([width / 2, height / 2]);
var geoPath = d3.geo.path()
.projection(projection);
queue()
.defer(d3.json, "ky-counties.json")
.await(ready);
function ready(error, counties){
svg.append("g")
.selectAll("path")
.data(counties.features)
.enter()
.append("path")
.attr( "d", geoPath )
.attr("class","county");
}
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment