geoatlantic/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    This is a test map to visualize FCC's Open Data API. Point location data is directly  streamed from FCC Open Data API.
FCC Data Source: https://www.fcc.gov/consumer-help-center-data

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>FCC Complaints</title>

<style>

svg {
  background-color: #b0c4de;
  }

.info {
  font-family: sans-serif;
  color: #ffffff;
  position: aboslute;
  top: 450px;
  left: 500px;
  }
/* CGB Complaints */
path.CGB, circle.CGB {
  fill: #d358f7;
  fill-opacity: 0.5;
}

h3 {
font: 20px sans-serif;
}

</style>

<h3>FCC CGB - Consumer Complaints Data</h3>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.js"></script>

<body>
  <script>

  //Map display dimension
  var width = 960;
  var height = 600;
  var data; // Global variable

  //Building a canvas
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .on("mousemove", mousemoved);

  var info = d3.select("body").append("div")
      .attr("class", "info");

  var path = d3.geo.path();

  var projection = path.projection();
  //=============zoom==========================
  var zoom = d3.behavior.zoom()
    .translate([width / 2, height / 2])
    .scale(projection.scale() * 2 * Math.PI)
    .scaleExtent([1 << 10, 1 << 20])
    .on("zoom", zoomed);

  var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")

  var layer1 = svg.append("g");
  var layer2 = svg.append("g");

  svg.call(zoom)
	.call(zoom.event);
  //===========zoom============================


  // Link to the US administrative map
  //var url = "https://gist.githubusercontent.com/pbogden/5da1822e8fffc06cf5ed/raw/us.json";
  var url = "https://gist.githubusercontent.com/pbogden/1ba3d5e5ba44cceb37e5/raw/counties.json"
    d3.json(url, plotAdminBoundary);
  // Link to the FCC Consumer Complaints data API
  var fcc = "https://opendata.fcc.gov/resource/sr6c-syda.geojson";
    d3.json(fcc, plotFCC);

     // Draw the countries
    function plotAdminBoundary(error, json) {
    //data = json.objects.us.geometries.map (function (d) { return topojson.feature(json, d); });
    data = json.objects.tl_2015_us_county.geometries.map (function (d) { return topojson.feature(json, d); });

    layer1.selectAll ("path")
          .data(data)
          .enter()
          .append("path")
          .attr("d", path)
          .attr("stroke", "gray")
          .attr("fill", "darkseagreen")
  }
  //windows.setInterval(plotFCC, 3000);

  // Draw the CGB Complaints
  function plotFCC(error, data) {
    if (error) console.log(error);
    console.log(data);

    //CGB Complaints
    var point = layer2.selectAll("path.CGB")
          .data(data.features)
          .enter();
    var areas = point.append("path")
          .attr("d", path)
          .attr("class", "CGB");

    //Adding label to CGB Complaints
    point.append("text")
          .attr("x", function (d) { return path.centroid(d)[0]; })
          .attr("y", function (d) { return path.centroid(d)[1]; })
          //.text (function (d) { return d.properties.state; });
		  zoomed();
  }
  windows.setInterval(plotFCC, 3000);

  function mousemoved () {
    info.text(formatLocation(projection.invert(d3.mouse(this)), projection.scale()));
  }

  function formatLocation(p, k) {
    var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f");
    return (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") + " " + (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E");
  }
 //==========zoom function=========================================================
  function zoomed() {
  projection
      .translate(zoom.translate())
      .scale(zoom.scale());

  layer1.selectAll("path")
      .attr("d", path);

  layer2.selectAll("path")
      .attr("d", path);
	}
 //=============zoom function=====================================================
 d3.select(self.frameElement).style("height", height + "px");

  </script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>FCC Complaints</title>

	<style>

	svg {
	background-color: #b0c4de;
	}

	.info {
	font-family: sans-serif;
	color: #ffffff;
	position: aboslute;
	top: 450px;
	left: 500px;
	}
	/* CGB Complaints */
	path.CGB, circle.CGB {
	fill: #d358f7;
	fill-opacity: 0.5;
	}

	h3 {
	font: 20px sans-serif;
	}

	</style>

	<h3>FCC CGB - Consumer Complaints Data</h3>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.js"></script>

	<body>
	<script>

	//Map display dimension
	var width = 960;
	var height = 600;
	var data; // Global variable

	//Building a canvas
	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.on("mousemove", mousemoved);

	var info = d3.select("body").append("div")
	.attr("class", "info");

	var path = d3.geo.path();

	var projection = path.projection();
	//=============zoom==========================
	var zoom = d3.behavior.zoom()
	.translate([width / 2, height / 2])
	.scale(projection.scale() * 2 * Math.PI)
	.scaleExtent([1 << 10, 1 << 20])
	.on("zoom", zoomed);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")

	var layer1 = svg.append("g");
	var layer2 = svg.append("g");

	svg.call(zoom)
	.call(zoom.event);
	//===========zoom============================



	// Link to the US administrative map
	//var url = "https://gist.githubusercontent.com/pbogden/5da1822e8fffc06cf5ed/raw/us.json";
	var url = "https://gist.githubusercontent.com/pbogden/1ba3d5e5ba44cceb37e5/raw/counties.json"
	d3.json(url, plotAdminBoundary);
	// Link to the FCC Consumer Complaints data API
	var fcc = "https://opendata.fcc.gov/resource/sr6c-syda.geojson";
	d3.json(fcc, plotFCC);

	// Draw the countries
	function plotAdminBoundary(error, json) {
	//data = json.objects.us.geometries.map (function (d) { return topojson.feature(json, d); });
	data = json.objects.tl_2015_us_county.geometries.map (function (d) { return topojson.feature(json, d); });

	layer1.selectAll ("path")
	.data(data)
	.enter()
	.append("path")
	.attr("d", path)
	.attr("stroke", "gray")
	.attr("fill", "darkseagreen")
	}
	//windows.setInterval(plotFCC, 3000);

	// Draw the CGB Complaints
	function plotFCC(error, data) {
	if (error) console.log(error);
	console.log(data);

	//CGB Complaints
	var point = layer2.selectAll("path.CGB")
	.data(data.features)
	.enter();
	var areas = point.append("path")
	.attr("d", path)
	.attr("class", "CGB");

	//Adding label to CGB Complaints
	point.append("text")
	.attr("x", function (d) { return path.centroid(d)[0]; })
	.attr("y", function (d) { return path.centroid(d)[1]; })
	//.text (function (d) { return d.properties.state; });
	zoomed();
	}
	windows.setInterval(plotFCC, 3000);

	function mousemoved () {
	info.text(formatLocation(projection.invert(d3.mouse(this)), projection.scale()));
	}

	function formatLocation(p, k) {
	var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f");
	return (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") + " " + (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E");
	}
	//==========zoom function=========================================================
	function zoomed() {
	projection
	.translate(zoom.translate())
	.scale(zoom.scale());

	layer1.selectAll("path")
	.attr("d", path);

	layer2.selectAll("path")
	.attr("d", path);
	}
	//=============zoom function=====================================================
	d3.select(self.frameElement).style("height", height + "px");

	</script>
	</body>