mapsam/README.md

## README.md

      
    Raw
  

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

  
## index.html
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>

.states {
	fill: #e5e5e5;
	stroke: #fff;
	stroke-width:1px;
}
.cities {
	fill:red;
	fill-opacity:0.5;
	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 src="http://d3js.org/queue.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);

queue()
	.defer(d3.json, '/svmatthews/raw/6090056/states.json')
	.defer(d3.json, '/svmatthews/raw/6090056/cities.json')
	.await(makeMyMap);

function makeMyMap(error, states, cities) {

	var length = cities.features.length;
	var pops = [];
	for (var mug=0; mug<length; mug++) {
		var pop = cities.features[mug].properties.POPULATION;
		pops.push(Number(pop));
	}
	var min = Math.min.apply(Math, pops);
	var max = Math.max.apply(Math, pops);

	var radius = d3.scale.sqrt()
		.domain([min, max])
		.range([10, 30]);

	svg.append('path')
		.datum(topojson.feature(states, states.objects.usStates))
		.attr('d', path)
		.attr('class', 'states');

	svg.selectAll('.cities')
		.data(cities.features)
		.enter().append('path')
		.attr('class', 'cities')
		.attr('d', path.pointRadius(function(d) { return radius(d.properties.POPULATION); }));

}

</script>
</body>
</html>
	<!DOCTYPE html>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<style>

	.states {
	fill: #e5e5e5;
	stroke: #fff;
	stroke-width:1px;
	}
	.cities {
	fill:red;
	fill-opacity:0.5;
	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 src="http://d3js.org/queue.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);

	queue()
	.defer(d3.json, '/svmatthews/raw/6090056/states.json')
	.defer(d3.json, '/svmatthews/raw/6090056/cities.json')
	.await(makeMyMap);

	function makeMyMap(error, states, cities) {

	var length = cities.features.length;
	var pops = [];
	for (var mug=0; mug<length; mug++) {
	var pop = cities.features[mug].properties.POPULATION;
	pops.push(Number(pop));
	}
	var min = Math.min.apply(Math, pops);
	var max = Math.max.apply(Math, pops);

	var radius = d3.scale.sqrt()
	.domain([min, max])
	.range([10, 30]);

	svg.append('path')
	.datum(topojson.feature(states, states.objects.usStates))
	.attr('d', path)
	.attr('class', 'states');

	svg.selectAll('.cities')
	.data(cities.features)
	.enter().append('path')
	.attr('class', 'cities')
	.attr('d', path.pointRadius(function(d) { return radius(d.properties.POPULATION); }));

	}

	</script>
	</body>
	</html>