rob4acre/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This small example was made to explore how to add geo satellite positions onto a world map.
forked from d3noob's block: Adding names to places

  
## cities.csv

          
            code
            city
            country
            lat
            lon

            
              ZNZ
              ZANZIBAR
              TANZANIA
              -6.13
              39.31

            
              TYO
              TOKYO
              JAPAN
              35.68
              139.76

            
              AKL
              AUCKLAND
              NEW ZEALAND
              -36.85
              174.78

            
              BKK
              BANGKOK
              THAILAND
              13.75
              100.48

            
              DEL
              DELHI
              INDIA
              29.01
              77.38

            
              SIN
              SINGAPORE
              SINGAPOR
              1.36
              103.75

            
              BSB
              BRASILIA
              BRAZIL
              -15.67
              -47.43

            
              RIO
              RIO DE JANEIRO
              BRAZIL
              -22.90
              -43.24

            
              YTO
              TORONTO
              CANADA
              43.64
              -79.40

            
              IPC
              EASTER ISLAND
              CHILE
              -27.11
              -109.36

            
              SEA
              SEATTLE
              USA
              47.61
              -122.33

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
  stroke: white;
  stroke-width: 0.25px;
  fill: grey;
}

.graticule {
   fill: none;
   stroke: #999;
   stroke-width: 0.5px;
   stroke-opacity: 0.5;
}

.land {
  fill: #ccc;
}

</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
    height = 500,
    longitude = -90;

var projection = d3.geoOrthographic()
    .center([0, 0 ])
    .scale(200)
    .rotate([longitude,0]);

var graticule = d3.geoGraticule();

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

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


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

   g.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);


// load and display the World
d3.json("world-110m2.json", function(error, topology) {

// load and display the cities
d3.csv("cities.csv", function(error, data) {
    g.selectAll("circle")
       .data(data)
       .enter()
       // only visible cities
     	 .filter(function(d){
      		var mlon = (d.lon % 360) + longitude;
					if (mlon > -90 && mlon < 90) {
            return d;
          }
       })
       .append("circle")
       .attr("cx", function(d) {
               return projection([d.lon, d.lat])[0];
       })
       .attr("cy", function(d) {
               return projection([d.lon, d.lat])[1];
       })
       .attr("r", 3)
       .style("fill","red");

    g.selectAll("text")
       .data(data)
       .enter()
       // only visible cities
     	 .filter(function(d){
      		var mlon = (d.lon % 360) + longitude;
					if (mlon > -90 && mlon < 90) {
            return d;
          }
       })
       .append("text") // append text
       .attr("x", function(d) {
               return projection([d.lon, d.lat])[0];
       })
       .attr("y", function(d) {
               return projection([d.lon, d.lat])[1];
       })
       .attr("dy", -7) // set y position of bottom of text
      .style("fill", "black") // fill the text with the colour black
      .attr("text-anchor", "middle") // set anchor y justification
      .text(function(d) {
 	        return d.city;
    	}); // define the text to display

});

// TODO:
  // change land colour from styles
  // hover over countries?
  // make the graticule zoom
// show equator
// add satellite positions in blue - maybe a satellite icon
// add some solution so satellites at same long are not on top of each other
// button to reset zoom
// keyboard keys - right/left/spacebar?

g.selectAll("path")
      .data(topojson.object(topology, topology.objects.countries)
          .geometries)
    .enter()
      .append("path")
      .attr("d", path)
});

// zoom and pan
var zoom = d3.zoom()
		.scaleExtent([1, 10])
    .translateExtent([[0,0],[960,500]])
    .on("zoom",function() {
        g.attr("transform",d3.event.transform)
        g.selectAll("circle")
            .attr("d", path.projection(projection));

  });

svg.call(zoom)

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

## satellites.csv

          
            code
            satellite
            lon

            
              G1
              GEOSAT1
              7

## world-110m2.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world-110m2.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
code	city	country	lat	lon
ZNZ	ZANZIBAR	TANZANIA	-6.13	39.31
TYO	TOKYO	JAPAN	35.68	139.76
AKL	AUCKLAND	NEW ZEALAND	-36.85	174.78
BKK	BANGKOK	THAILAND	13.75	100.48
DEL	DELHI	INDIA	29.01	77.38
SIN	SINGAPORE	SINGAPOR	1.36	103.75
BSB	BRASILIA	BRAZIL	-15.67	-47.43
RIO	RIO DE JANEIRO	BRAZIL	-22.90	-43.24
YTO	TORONTO	CANADA	43.64	-79.40
IPC	EASTER ISLAND	CHILE	-27.11	-109.36
SEA	SEATTLE	USA	47.61	-122.33
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	path {
	stroke: white;
	stroke-width: 0.25px;
	fill: grey;
	}

	.graticule {
	fill: none;
	stroke: #999;
	stroke-width: 0.5px;
	stroke-opacity: 0.5;
	}

	.land {
	fill: #ccc;
	}

	</style>
	<body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-array.v1.min.js"></script>
	<script src="https://d3js.org/d3-geo.v1.min.js"></script>
	<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
	<script>
	var width = 960,
	height = 500,
	longitude = -90;

	var projection = d3.geoOrthographic()
	.center([0, 0 ])
	.scale(200)
	.rotate([longitude,0]);

	var graticule = d3.geoGraticule();

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

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


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

	g.append("path")
	.datum(graticule)
	.attr("class", "graticule")
	.attr("d", path);


	// load and display the World
	d3.json("world-110m2.json", function(error, topology) {

	// load and display the cities
	d3.csv("cities.csv", function(error, data) {
	g.selectAll("circle")
	.data(data)
	.enter()
	// only visible cities
	.filter(function(d){
	var mlon = (d.lon % 360) + longitude;
	if (mlon > -90 && mlon < 90) {
	return d;
	}
	})
	.append("circle")
	.attr("cx", function(d) {
	return projection([d.lon, d.lat])[0];
	})
	.attr("cy", function(d) {
	return projection([d.lon, d.lat])[1];
	})
	.attr("r", 3)
	.style("fill","red");

	g.selectAll("text")
	.data(data)
	.enter()
	// only visible cities
	.filter(function(d){
	var mlon = (d.lon % 360) + longitude;
	if (mlon > -90 && mlon < 90) {
	return d;
	}
	})
	.append("text") // append text
	.attr("x", function(d) {
	return projection([d.lon, d.lat])[0];
	})
	.attr("y", function(d) {
	return projection([d.lon, d.lat])[1];
	})
	.attr("dy", -7) // set y position of bottom of text
	.style("fill", "black") // fill the text with the colour black
	.attr("text-anchor", "middle") // set anchor y justification
	.text(function(d) {
	return d.city;
	}); // define the text to display

	});

	// TODO:
	// change land colour from styles
	// hover over countries?
	// make the graticule zoom
	// show equator
	// add satellite positions in blue - maybe a satellite icon
	// add some solution so satellites at same long are not on top of each other
	// button to reset zoom
	// keyboard keys - right/left/spacebar?

	g.selectAll("path")
	.data(topojson.object(topology, topology.objects.countries)
	.geometries)
	.enter()
	.append("path")
	.attr("d", path)
	});

	// zoom and pan
	var zoom = d3.zoom()
	.scaleExtent([1, 10])
	.translateExtent([[0,0],[960,500]])
	.on("zoom",function() {
	g.attr("transform",d3.event.transform)
	g.selectAll("circle")
	.attr("d", path.projection(projection));

	});

	svg.call(zoom)

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