blehman/geoData.json

## geoData.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              geoData.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

circle.outer {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}
circle.points{
  fill: none;
  stroke: red;
}

circle.bigPoints{
  fill: none;
}

</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 src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
<script src="map_points_basic.js" type="text/javascript"></script>
</body>

## map_points_basic.js
queue() // javascript is asynchronous; queue runs the awaiting makeMap function only after the data files load
  .defer(d3.json, "world.json")
  .defer(d3.json, "geoData.json")
  .await(makeMap);

function makeMap(error,world,geoData){
    var width = 960,
        height = 700;

    var projection = d3.geo.ginzburg5()
        .scale(180) // total map size adjustment
        .translate([width / 2, height / 2]) // map center

    var path = d3.geo.path() // a function that essentially just draws lines
        .projection(projection); // translates the geo coords to screen coordinates

    var svg = d3.select("body").append("svg") // selections are arrays of dom elements
        .attr("width", width)
        .attr("height", height)

    var feature = svg.append("path") // appends a path element to the svg
        .datum(topojson.feature(world, world.objects.land)) // accesses the land features and appends them to the path element
        .attr("d", path) // uses the path function to add directions for how to draw
        .attr("stroke","#000");  // adds the country outline

    var bounds = svg.insert("path")
      .datum(topojson.feature(world, world.objects.countries))
      .attr("class", "boundary")
      .attr("d", path)
      .attr("fill","#ccc");

    var large_circle = svg.selectAll(".bigPoints")
                   .data(geoData.features) // selects features to bind to the elements classed as points
                   .enter() // binds the correct number of elements
                   .append("circle") // adds data bound circle elements to the graph
                   .style("stroke","steelblue")// overides the css to the color the circles
                   .classed("bigPoints",true)
                   .attr("cx",0)
                   .attr("cy",0)
                   .attr("transform", function(d){ return "translate("+path.centroid(d)+")"})// uses the path function to translate the long,lat into screen coords
                   .attr("r",20) // sets the radius

    var small_circle = svg.selectAll(".points")
                   .data(geoData.features) // selects features to bind to the elements classed as points
                   .enter() // binds the correct number of elements
                   .append("circle") // adds data bound circle elements to the graph
                   .classed("points",true) //  classes the circle elements
                   .attr("cx",0)
                   .attr("cy",0)
                   .attr("transform", function(d){ return "translate("+path.centroid(d)+")"})// uses the path function to translate the long,lat into screen coords
                   .attr("r",2) // sets the radius

};

## tweetData.json
{"body": "I freaking love maps!", "geo": {"type": "Point", "coordinates": [37.64, -122.09]}, "actor": {"displayName": "BrianLehman"}}
{"body": "I love you @grandma_smarmy!", "geo": {"type": "Point", "coordinates": [3.18, 101.60]}, "actor": {"displayName": "Uncle_Smarmy"}}

## world.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	circle.outer {
	fill: none;
	stroke: #000;
	stroke-width: 2px;
	}
	circle.points{
	fill: none;
	stroke: red;
	}

	circle.bigPoints{
	fill: none;
	}

	</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 src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
	<script src="map_points_basic.js" type="text/javascript"></script>
	</body>
	queue() // javascript is asynchronous; queue runs the awaiting makeMap function only after the data files load
	.defer(d3.json, "world.json")
	.defer(d3.json, "geoData.json")
	.await(makeMap);

	function makeMap(error,world,geoData){
	var width = 960,
	height = 700;

	var projection = d3.geo.ginzburg5()
	.scale(180) // total map size adjustment
	.translate([width / 2, height / 2]) // map center

	var path = d3.geo.path() // a function that essentially just draws lines
	.projection(projection); // translates the geo coords to screen coordinates

	var svg = d3.select("body").append("svg") // selections are arrays of dom elements
	.attr("width", width)
	.attr("height", height)

	var feature = svg.append("path") // appends a path element to the svg
	.datum(topojson.feature(world, world.objects.land)) // accesses the land features and appends them to the path element
	.attr("d", path) // uses the path function to add directions for how to draw
	.attr("stroke","#000"); // adds the country outline

	var bounds = svg.insert("path")
	.datum(topojson.feature(world, world.objects.countries))
	.attr("class", "boundary")
	.attr("d", path)
	.attr("fill","#ccc");

	var large_circle = svg.selectAll(".bigPoints")
	.data(geoData.features) // selects features to bind to the elements classed as points
	.enter() // binds the correct number of elements
	.append("circle") // adds data bound circle elements to the graph
	.style("stroke","steelblue")// overides the css to the color the circles
	.classed("bigPoints",true)
	.attr("cx",0)
	.attr("cy",0)
	.attr("transform", function(d){ return "translate("+path.centroid(d)+")"})// uses the path function to translate the long,lat into screen coords
	.attr("r",20) // sets the radius

	var small_circle = svg.selectAll(".points")
	.data(geoData.features) // selects features to bind to the elements classed as points
	.enter() // binds the correct number of elements
	.append("circle") // adds data bound circle elements to the graph
	.classed("points",true) // classes the circle elements
	.attr("cx",0)
	.attr("cy",0)
	.attr("transform", function(d){ return "translate("+path.centroid(d)+")"})// uses the path function to translate the long,lat into screen coords
	.attr("r",2) // sets the radius

	};
	{"body": "I freaking love maps!", "geo": {"type": "Point", "coordinates": [37.64, -122.09]}, "actor": {"displayName": "BrianLehman"}}
	{"body": "I love you @grandma_smarmy!", "geo": {"type": "Point", "coordinates": [3.18, 101.60]}, "actor": {"displayName": "Uncle_Smarmy"}}