Skip to content

Instantly share code, notes, and snippets.

@mapsam
Last active December 21, 2015 00:29
Project Linework - Charmingly Inaccurate
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
.states {
fill: #6BA0B5;
stroke: #fff;
stroke-width:2px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 500;
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
var projection = d3.geo.albersUsa()
.scale(1000)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
d3.json('charm.json', function(error, us) {
svg.append('path')
.datum(topojson.feature(us, us.objects.admin0_poly))
.attr('class', 'states')
.attr('d', path);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment