Skip to content

Instantly share code, notes, and snippets.

@bowmanmc
Last active August 29, 2015 14:11
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 bowmanmc/1a4f273bc81f53d35cd1 to your computer and use it in GitHub Desktop.
Save bowmanmc/1a4f273bc81f53d35cd1 to your computer and use it in GitHub Desktop.
Animated Ohio Map with Counties
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animated Ohio Choropleth Map</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<!-- Vendor css -->
<!-- App css -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="map" class="fullscreen-map"></div>
<a id="redraw">Re-Draw</a>
<!-- Vendor Scripts -->
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<!-- Page Scripts -->
<script src="map.js"></script>
<script>
var map = new OhioMap('#map');
map.drawMap();
</script>
</body>
</html>
function OhioMap(elementIdSelector) {
this.mapSelector = elementIdSelector;
this.drawMap = function() {
var map = this;
var el = $(map.mapSelector)[0];
//var width = 960,
// height = 1200;
map.height = el.clientHeight;
map.width = (960 / 1200) * map.height;
console.log('Making map size: ' + map.width + 'x' + map.height);
//map.projection = d3.geo.mercator().translate([map.width / 2, map.height / 2]);
map.projection = d3.geo.conicConformal()
.rotate([82 + 30 / 60, -39 - 40 / 60])
.translate([map.width / 2, map.height / 2]);
map.path = d3.geo.path().projection(map.projection);
map.svg = d3.select(map.mapSelector).append('svg')
.attr('width', map.width)
.attr('height', map.height);
map.bg = map.svg.append('g');
map.fg = map.svg.append('g');
map.getState().then(function() {
map.getCounties().then(function() {
map.draw();
});
});
$('#redraw').click(function() {
map.clear();
map.draw();
});
};
this.clear = function() {
map.bg.html('');
map.fg.html('');
};
this.draw = function() {
this.drawState();
this.drawCounties();
};
this.getState = function() {
var deferred = $.Deferred();
var map = this;
d3.json('state.oh.json', function(error, response) {
map.state = response;
deferred.resolve();
});
return deferred.promise();
};
this.drawState = function() {
var map = this;
map.projection.scale(1).translate([0, 0]);
var b = map.path.bounds(map.state),
s = 0.95 / Math.max((b[1][0] - b[0][0]) / map.width, (b[1][1] - b[0][1]) / map.height),
t = [(map.width - s * (b[1][0] + b[0][0])) / 2, (map.height - s * (b[1][1] + b[0][1])) / 2];
map.projection.scale(s).translate(t);
var ohioPath = map.fg.selectAll('path')
.data(map.state.features)
.enter().append('path')
.attr('id', 'pathOhio')
.attr('class', 'state')
.attr('stroke', '#fff')
.attr('stroke-width', 3)
.attr('d', map.path);
map.animate('#' + ohioPath.attr('id'));
};
this.getCounties = function() {
var deferred = $.Deferred();
var map = this;
d3.json('county.oh.json', function(error, response) {
map.counties = response;
deferred.resolve();
});
return deferred.promise();
};
this.drawCounties = function() {
var map = this;
map.bg.selectAll('path')
.data(map.counties.features)
.enter().append('path')
.attr('id', function(d) {
return 'county_' + d.properties['FIPS_CODE'];
})
.attr('class', 'county')
.attr('stroke', '#999')
.attr('stroke-width', 1)
.attr('d', map.path);
map.bg.selectAll('path').each(function(d, i) {
map.animate('#county_' + d.properties['FIPS_CODE']);
});
};
this.animate = function(selector) {
var speed = 2.5;
var path = document.querySelector(selector);
var length = path.getTotalLength();
//console.log('animating path ' + selector + ' of length ' + length);
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset ' + speed + 's ease';
// Go!
path.style.strokeDashoffset = '0';
};
}; // OhioMap
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
body, html {
/*background: #101316;*/
background: #000306;
color: #f3f6f9;
font-family: "Helvetica Neue", Helvetica, sans-serif;
height: 100%;
}
a {
color: #06c;
cursor: pointer;
text-decoration: none;
}
a:hover {
color: #09f;
text-decoration: underline;
}
.fullscreen-map {
height: 90%;
width: 90%;
text-align: center;
}
.county {
fill: none;
}
.state {
fill: #333639;
/* Set the fill-opacity to 0 so we get click events */
fill-opacity: 0;
stroke-linecap: round;
stroke-linejoin: round;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment