gmculp/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Bivariate map of Community Health Survey Data inspired by the work of Anna Leonowicz and axismaps Indie Mapper . Built using D3 , ColorBrewer and Color Mixer .   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_div {
	display: inline-block;
	overflow:hidden;
	width: 66%;
}

#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 id ="map_div"></div>
<div id ="map_sub_div">
	<div id ="map1_div"></div>
	<div id ="map2_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";


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');

//main map - bivariate
var projection = d3.geo.albers();

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

//var map_dim = {margin:{ top: 15, right: 0, bottom: 15, left: 20 }, width: 700, height: 700, legend:{top:70, left:70, width:175, height:175}};

var map_dim = {margin:{ top: w*15, right: w*0, bottom: w*15, left: w*20 }, width: w*700, height: w*700, legend:{top:w*70, left:w*70, width:w*175, height:w*175}};

var map_svg = d3.select("#map_div").append("svg").attr("id", "map_svg");


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

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

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

var map2_dim = {margin:{ top: w*15, right: w*0, bottom: w*0, left: w*10 }, width: w*400, height: w*400, legend:{top:w*25, left:w*15, width:w*175, height:w*175, dim:w*30, orientation:"horizontal"}};
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");


//build 2X2 palette with ColorBrewer and Color Mixer

var palette1=colorbrewer.Oranges[3];
var palette2=colorbrewer.Blues[3];

var palette3 = [];
for (i=0; i<palette1.length; i++) {
	palette3.push([]);
	for (j=0; j<palette2.length; j++) {
	mix_color = Color_mixer.mix($.Color(palette1[i]),$.Color(palette2[j]));
	palette3[i].push(mix_color.toHexString());
	}
}


$.getJSON(h_data, function (h_json) {

	//get data fields from JSON for use in dropdown
	//var keys = [];
	//for(var k in h_json.health_data[0]) keys.push(k);
	//console.log(keys.toSource());

	var y_var = "21451";
	var x_var = "21527";


	draw_map (map2_dim, projection1, path1, "map2_svg", palette2, h_json, x_var);
	draw_map (map1_dim, projection1, path1, "map1_svg", palette1, h_json, y_var);
	draw_map (map_dim, projection, path, "map_svg", palette3, h_json, x_var, y_var);

}); //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_div {
	display: inline-block;
	overflow:hidden;
	width: 66%;
	}

	#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 id ="map_div"></div>
	<div id ="map_sub_div">
	<div id ="map1_div"></div>
	<div id ="map2_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";


	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');

	//main map - bivariate
	var projection = d3.geo.albers();

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

	//var map_dim = {margin:{ top: 15, right: 0, bottom: 15, left: 20 }, width: 700, height: 700, legend:{top:70, left:70, width:175, height:175}};

	var map_dim = {margin:{ top: w15, right: w0, bottom: w15, left: w20 }, width: w700, height: w700, legend:{top:w70, left:w70, width:w175, height:w175}};

	var map_svg = d3.select("#map_div").append("svg").attr("id", "map_svg");



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

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

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

	var map2_dim = {margin:{ top: w15, right: w0, bottom: w0, left: w10 }, width: w400, height: w400, legend:{top:w25, left:w15, width:w175, height:w175, dim:w*30, orientation:"horizontal"}};
	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");



	//build 2X2 palette with ColorBrewer and Color Mixer

	var palette1=colorbrewer.Oranges[3];
	var palette2=colorbrewer.Blues[3];

	var palette3 = [];
	for (i=0; i<palette1.length; i++) {
	palette3.push([]);
	for (j=0; j<palette2.length; j++) {
	mix_color = Color_mixer.mix($.Color(palette1[i]),$.Color(palette2[j]));
	palette3[i].push(mix_color.toHexString());
	}
	}




	$.getJSON(h_data, function (h_json) {

	//get data fields from JSON for use in dropdown
	//var keys = [];
	//for(var k in h_json.health_data[0]) keys.push(k);
	//console.log(keys.toSource());

	var y_var = "21451";
	var x_var = "21527";


	draw_map (map2_dim, projection1, path1, "map2_svg", palette2, h_json, x_var);
	draw_map (map1_dim, projection1, path1, "map1_svg", palette1, h_json, y_var);
	draw_map (map_dim, projection, path, "map_svg", palette3, h_json, x_var, y_var);

	}); //close health data

	</script>

	</body>
	</html>
No results found