Sam Matthews mapsam

Basic steps for rendering a topojson file

How to access secondary information within a topojson file and render it on the webpage.

A look at Queue.js and how you can load multiple files before running the rest of the code. Simple visualization of populated places in the USA. Files loaded:

US States - topojson
Populated Places - geojson

Adding labels to points from a geojson

Proportional symbol map based on secondary data. This map shows proportional symbols based on the city populations minimum and maximum values.

	$(document).ready(function(){
	var fixed = false;
	var topHeight = $('#header').height();
	var navHeight = $('#nav').height();
	var sectionHeaderHeight = $('.title').height();
	var sec0 = $('#section0').height() + topHeight + navHeight;
	var sec1 = $('#section1').height() + sec0 + sectionHeaderHeight;
	var sec2 = $('#section2').height() + sec1 + sectionHeaderHeight;
	var sec3 = $('#section3').height() + sec2 + sectionHeaderHeight;
	var sec4 = $('#section4').height() + sec3 + sectionHeaderHeight;

	var code,

	function yolo(e) { //gets the character code of whatever the user presses, this function will be run on any keyboard press, regardless of what we want specifically
	code = String.fromCharCode(e.charCode);
	if (code == "35") {
	specificEgg();
	}
	}

	function specificEgg() {

	length = stadia.features.length;
	var caps = [];
	for (var mug=0; mug<length; mug++) {
	var cap = stadia.features[mug].properties.capacity
	caps.push(Number(cap));
	}
	var min = Math.min.apply(Math, caps);
	var max = Math.max.apply(Math, caps);

	function init() {
	$(window).scroll(function() {
	top = $(window).scrollTop();
	if ( top < 15 ) {
	$("nav").fadeOut("fast", function() {
	$(this).css('box-shadow', 'none');
	});
	}
	else {
	$("nav").fadeIn("fast", function() {

	<!DOCTYPE html>
	<head>
	<style>
	body {
	text-align:center;
	}
	#clock {
	font-family:arial;
	font-size:2em;
	font-weight:bold;