gmculp/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Multiple maps of Community Health Survey Data . Built using D3 and ColorBrewer .   Code works in IE8 thanks to R2D3 and a little jQuery.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
    font: 11px sans-serif;
}


.openspace path {
  fill: #373737;
  stroke: #373737;
  stroke-width: 0.75px;
  stroke-linejoin: round;
}

.boroughs path {
  fill: none;
  stroke: #373737;
  stroke-width: 2.0px;
  stroke-linejoin: round;
}

.geo_entity path {
  stroke: #373737;
  stroke-width: 1.0px;
  stroke-linejoin: round;
}

.UHF_over {
  fill-opacity: 0;
  stroke: #00ffff;
  stroke-width: 3.0px;
  stroke-linejoin: round;
}

.UHF_out {
  fill-opacity: 0;
  stroke: none;
}

.axis line, .axis path, .legend_line {
    stroke: #373737;
	stroke-width: 1.0px;
    fill: none;
}

.tick line {
    stroke: #373737;
	stroke-width: 1.0px;
}

.map_sub_div {
	display: inline-block;
	overflow:hidden;
	width: 33%;
}

</style>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!--[if lte IE 8]><script src="http://cdnjs.cloudflare.com/ajax/libs/r2d3/0.2.0/r2d3.min.js"></script><![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<!--<![endif]-->
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<script src="http://rawgit.com/AndreasSoiron/Color_mixer/master/color_mixer.js"></script>
<script src="http://rawgit.com/jquery/jquery-color/master/jquery.color.js"></script>
<script type="text/javascript" src="https://rawgit.com/gmculp/b76fbaa2bf72f92c638f/raw/4d0235b7548e869e373f079e7abd1e8f1e9e81ee/map_functions.js"></script>
<div class ="map_sub_div">
	<div id ="map1_div"></div>
	<div id ="map2_div"></div>
</div>
<div class ="map_sub_div">
	<div id ="map3_div"></div>
	<div id ="map4_div"></div>
</div>
<div class ="map_sub_div">
	<div id ="map5_div"></div>
	<div id ="map6_div"></div>
</div>


<script>

//borough boundary GeoJSON file
var boroJSON = "https://gist.githubusercontent.com/gmculp/b76fbaa2bf72f92c638f/raw/borough.json";

//this will change based on data
var spatial = "https://gist.githubusercontent.com/gmculp/b76fbaa2bf72f92c638f/raw/UHF34.json";

//test data
var h_data = "https://gist.githubusercontent.com/gmculp/b76fbaa2bf72f92c638f/raw/health_data_2012B.json";


//scale based on window width
var w = ($( window ).height()/850)>1?1:$( window ).height()/850;

var f_size = Math.round(parseInt($("body").css('font-size'))*w);
$('body').css('font-size', f_size + 'px');


var projection = d3.geo.albers();
var path = d3.geo.path().projection(projection);

//sub maps
var projection1 = d3.geo.albers();

var path1 = d3.geo.path().projection(projection1);

var map1_dim = {margin:{ top: w*15, right: w*0, bottom: w*0, left: w*10 }, width: w*400, height: w*400, legend:{top:w*45, left:w*45, width:w*175, height:w*175, dim:w*30, orientation:"vertical"}};

var map1_svg = d3.select("#map1_div").append("svg").attr("id", "map1_svg");
var map2_svg = d3.select("#map2_div").append("svg").attr("id", "map2_svg");
var map3_svg = d3.select("#map3_div").append("svg").attr("id", "map3_svg");
var map4_svg = d3.select("#map4_div").append("svg").attr("id", "map4_svg");
var map5_svg = d3.select("#map5_div").append("svg").attr("id", "map5_svg");
var map6_svg = d3.select("#map6_div").append("svg").attr("id", "map6_svg");


$.getJSON(h_data, function (h_json) {

	draw_map (map1_dim, projection1, path1, "map1_svg", colorbrewer.YlGn[3], h_json, "21436");
	draw_map (map1_dim, projection1, path1, "map2_svg", colorbrewer.Greens[3], h_json, "21433");
	draw_map (map1_dim, projection1, path1, "map3_svg", colorbrewer.BuPu[3], h_json, "21451");
	draw_map (map1_dim, projection1, path1, "map4_svg", colorbrewer.Purples[3], h_json, "21448");
	draw_map (map1_dim, projection1, path1, "map5_svg", colorbrewer.OrRd[3], h_json, "21527");
	draw_map (map1_dim, projection1, path1, "map6_svg", colorbrewer.Reds[3], h_json, "21524");

}); //close health data

</script>

</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 11px sans-serif;
	}


	.openspace path {
	fill: #373737;
	stroke: #373737;
	stroke-width: 0.75px;
	stroke-linejoin: round;
	}

	.boroughs path {
	fill: none;
	stroke: #373737;
	stroke-width: 2.0px;
	stroke-linejoin: round;
	}

	.geo_entity path {
	stroke: #373737;
	stroke-width: 1.0px;
	stroke-linejoin: round;
	}

	.UHF_over {
	fill-opacity: 0;
	stroke: #00ffff;
	stroke-width: 3.0px;
	stroke-linejoin: round;
	}

	.UHF_out {
	fill-opacity: 0;
	stroke: none;
	}

	.axis line, .axis path, .legend_line {
	stroke: #373737;
	stroke-width: 1.0px;
	fill: none;
	}

	.tick line {
	stroke: #373737;
	stroke-width: 1.0px;
	}

	.map_sub_div {
	display: inline-block;
	overflow:hidden;
	width: 33%;
	}

	</style>
	<body>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

	<!--[if lte IE 8]><script src="http://cdnjs.cloudflare.com/ajax/libs/r2d3/0.2.0/r2d3.min.js"></script><![endif]-->
	<!--[if gte IE 9]><!-->
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<!--<![endif]-->
	<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
	<script src="http://rawgit.com/AndreasSoiron/Color_mixer/master/color_mixer.js"></script>
	<script src="http://rawgit.com/jquery/jquery-color/master/jquery.color.js"></script>
	<script type="text/javascript" src="https://rawgit.com/gmculp/b76fbaa2bf72f92c638f/raw/4d0235b7548e869e373f079e7abd1e8f1e9e81ee/map_functions.js"></script>
	<div class ="map_sub_div">
	<div id ="map1_div"></div>
	<div id ="map2_div"></div>
	</div>
	<div class ="map_sub_div">
	<div id ="map3_div"></div>
	<div id ="map4_div"></div>
	</div>
	<div class ="map_sub_div">
	<div id ="map5_div"></div>
	<div id ="map6_div"></div>
	</div>


	<script>

	//borough boundary GeoJSON file
	var boroJSON = "https://gist.githubusercontent.com/gmculp/b76fbaa2bf72f92c638f/raw/borough.json";

	//this will change based on data
	var spatial = "https://gist.githubusercontent.com/gmculp/b76fbaa2bf72f92c638f/raw/UHF34.json";

	//test data
	var h_data = "https://gist.githubusercontent.com/gmculp/b76fbaa2bf72f92c638f/raw/health_data_2012B.json";


	//scale based on window width
	var w = ($( window ).height()/850)>1?1:$( window ).height()/850;

	var f_size = Math.round(parseInt($("body").css('font-size'))*w);
	$('body').css('font-size', f_size + 'px');


	var projection = d3.geo.albers();
	var path = d3.geo.path().projection(projection);

	//sub maps
	var projection1 = d3.geo.albers();

	var path1 = d3.geo.path().projection(projection1);

	var map1_dim = {margin:{ top: w15, right: w0, bottom: w0, left: w10 }, width: w400, height: w400, legend:{top:w45, left:w45, width:w175, height:w175, dim:w*30, orientation:"vertical"}};

	var map1_svg = d3.select("#map1_div").append("svg").attr("id", "map1_svg");
	var map2_svg = d3.select("#map2_div").append("svg").attr("id", "map2_svg");
	var map3_svg = d3.select("#map3_div").append("svg").attr("id", "map3_svg");
	var map4_svg = d3.select("#map4_div").append("svg").attr("id", "map4_svg");
	var map5_svg = d3.select("#map5_div").append("svg").attr("id", "map5_svg");
	var map6_svg = d3.select("#map6_div").append("svg").attr("id", "map6_svg");


	$.getJSON(h_data, function (h_json) {

	draw_map (map1_dim, projection1, path1, "map1_svg", colorbrewer.YlGn[3], h_json, "21436");
	draw_map (map1_dim, projection1, path1, "map2_svg", colorbrewer.Greens[3], h_json, "21433");
	draw_map (map1_dim, projection1, path1, "map3_svg", colorbrewer.BuPu[3], h_json, "21451");
	draw_map (map1_dim, projection1, path1, "map4_svg", colorbrewer.Purples[3], h_json, "21448");
	draw_map (map1_dim, projection1, path1, "map5_svg", colorbrewer.OrRd[3], h_json, "21527");
	draw_map (map1_dim, projection1, path1, "map6_svg", colorbrewer.Reds[3], h_json, "21524");

	}); //close health data

	</script>

	</body>
	</html>
No results found